refactor: org filters section component (#103)

* refactor: add placeholder props to filters section component

* refactor: orgs filters section

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>
   );

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>
+  );
+};

app/organizations/@list/default.tsx

@@ -0,0 +1 @@
+export { default } from './page';

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';

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;

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 />

src/orgs/atoms/org-filters-search-params-atom.ts

@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+
+export const orgFiltersSearchParamsAtom = atom<URLSearchParams>(
+  new URLSearchParams(),
+);