From 8f84b89181d262914bfbf01cb167340759611925 Mon Sep 17 00:00:00 2001
From: John Ballesteros <89079900+johnshift@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:15:43 +0800
Subject: [PATCH] refactor: org filters section component (#103)

* refactor: add placeholder props to filters section component

* refactor: orgs filters section
---
 app/jobs/@list/client-page.tsx                |  5 ++-
 app/organizations/@list/client-page.tsx       | 27 ++++++++++++
 app/organizations/@list/default.tsx           |  1 +
 app/organizations/@list/page.tsx              | 44 +++++++++++++++++++
 app/organizations/layout.tsx                  | 20 +++++++++
 .../components/filters-section/index.tsx      |  5 ++-
 .../atoms/org-filters-search-params-atom.ts   |  5 +++
 7 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 app/organizations/@list/client-page.tsx
 create mode 100644 app/organizations/@list/default.tsx
 create mode 100644 app/organizations/@list/page.tsx
 create mode 100644 app/organizations/layout.tsx
 create mode 100644 src/orgs/atoms/org-filters-search-params-atom.ts

diff --git a/app/jobs/@list/client-page.tsx b/app/jobs/@list/client-page.tsx
index 5a056a09e..3832c1e84 100644
--- a/app/jobs/@list/client-page.tsx
+++ b/app/jobs/@list/client-page.tsx
@@ -19,7 +19,10 @@ export const JobListClientPage = ({ rawSearchParams }: Props) => {
       routeSection={ROUTE_SECTIONS.JOBS}
       atom={jobFiltersSearchParamsAtom}
     >
-      <FiltersSection countAtom={jobTotalCountAtom} />
+      <FiltersSection
+        countAtom={jobTotalCountAtom}
+        searchPlaceholder="Enter job title, description, or organization..."
+      />
       <JobList />
     </FiltersProvider>
   );
diff --git a/app/organizations/@list/client-page.tsx b/app/organizations/@list/client-page.tsx
new file mode 100644
index 000000000..a6ab91318
--- /dev/null
+++ b/app/organizations/@list/client-page.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { ROUTE_SECTIONS } from '~/shared/core/constants';
+
+import { orgFiltersSearchParamsAtom } from '~/orgs/atoms/org-filters-search-params-atom';
+import { orgTotalCountAtom } from '~/orgs/atoms/org-total-count-atom';
+import { FiltersSection } from '~/filters/components/filters-section';
+import { FiltersProvider } from '~/filters/providers/filters-provider';
+
+interface Props {
+  rawSearchParams: Record<string, string>;
+}
+
+export const OrgListClientPage = ({ rawSearchParams }: Props) => {
+  return (
+    <FiltersProvider
+      rawSearchParams={rawSearchParams}
+      routeSection={ROUTE_SECTIONS.ORGS}
+      atom={orgFiltersSearchParamsAtom}
+    >
+      <FiltersSection
+        countAtom={orgTotalCountAtom}
+        searchPlaceholder="Search organizations ..."
+      />
+    </FiltersProvider>
+  );
+};
diff --git a/app/organizations/@list/default.tsx b/app/organizations/@list/default.tsx
new file mode 100644
index 000000000..70c0a557d
--- /dev/null
+++ b/app/organizations/@list/default.tsx
@@ -0,0 +1 @@
+export { default } from './page';
diff --git a/app/organizations/@list/page.tsx b/app/organizations/@list/page.tsx
new file mode 100644
index 000000000..f5af6b0c7
--- /dev/null
+++ b/app/organizations/@list/page.tsx
@@ -0,0 +1,44 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+
+import { ROUTE_SECTIONS } from '~/shared/core/constants';
+import { getQueryClient } from '~/shared/utils/get-query-client';
+
+import { filterQueryKeys } from '~/filters/core/query-keys';
+import { orgQueryKeys } from '~/orgs/core/query-keys';
+import { getFilterConfig } from '~/filters/api/get-filter-config';
+import { getOrgList } from '~/orgs/api/get-org-list';
+
+import { OrgListClientPage } from './client-page';
+
+interface Props {
+  searchParams: Record<string, string>;
+}
+
+const OrgListPage = async ({ searchParams: rawSearchParams }: Props) => {
+  const queryClient = getQueryClient();
+
+  await Promise.all([
+    // Prefetch list
+    queryClient.prefetchInfiniteQuery({
+      queryKey: orgQueryKeys.list(rawSearchParams),
+      queryFn: async ({ pageParam }) => getOrgList(pageParam, rawSearchParams),
+      initialPageParam: 1,
+    }),
+    // Prefetch filter config
+    queryClient.prefetchQuery({
+      queryKey: filterQueryKeys.list(rawSearchParams, ROUTE_SECTIONS.ORGS),
+      queryFn: () => getFilterConfig(`/${ROUTE_SECTIONS.ORGS}`),
+    }),
+  ]);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <OrgListClientPage rawSearchParams={rawSearchParams} />
+    </HydrationBoundary>
+  );
+};
+
+export default OrgListPage;
+
+// Force SSR on this page (needed to pick up searchParams)
+export const dynamic = 'force-dynamic';
diff --git a/app/organizations/layout.tsx b/app/organizations/layout.tsx
new file mode 100644
index 000000000..4a8338e4d
--- /dev/null
+++ b/app/organizations/layout.tsx
@@ -0,0 +1,20 @@
+interface Props {
+  children: React.ReactNode;
+  list: React.ReactNode;
+}
+
+const OrgsLayout = ({ children, list }: Props) => {
+  return (
+    <div className="min-h-screen w-full md:pl-[212px]">
+      <div className="w-full lg:w-1/2">
+        <div className="flex flex-col gap-8 px-2 py-8 pt-24 md:px-8 md:pt-8">
+          {list}
+        </div>
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default OrgsLayout;
diff --git a/src/filters/components/filters-section/index.tsx b/src/filters/components/filters-section/index.tsx
index b3ca38e7e..f15cacbe7 100644
--- a/src/filters/components/filters-section/index.tsx
+++ b/src/filters/components/filters-section/index.tsx
@@ -8,12 +8,13 @@ import { TotalCount } from './total-count';
 
 interface Props {
   countAtom: PrimitiveAtom<number | null>;
+  searchPlaceholder: string;
 }
 
-export const FiltersSection = ({ countAtom }: Props) => {
+export const FiltersSection = ({ countAtom, searchPlaceholder }: Props) => {
   return (
     <div className="flex flex-col gap-4">
-      <FilterQueryInput placeholder="Enter job title, description, or organization..." />
+      <FilterQueryInput placeholder={searchPlaceholder} />
 
       <FilterToggler countSection={<TotalCount countAtom={countAtom} />}>
         <FilterConfigMapper />
diff --git a/src/orgs/atoms/org-filters-search-params-atom.ts b/src/orgs/atoms/org-filters-search-params-atom.ts
new file mode 100644
index 000000000..72dc66c49
--- /dev/null
+++ b/src/orgs/atoms/org-filters-search-params-atom.ts
@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+
+export const orgFiltersSearchParamsAtom = atom<URLSearchParams>(
+  new URLSearchParams(),
+);