♻️ Compatibilité RSC pour ListPageTemplate

MTES-MCT · Jul 8, 2024 · 8446230 · 8446230
1 parent eb54492
commit 8446230
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 66 deletions.
diff --git a/packages/applications/ssr/src/components/molecules/Search.tsx b/packages/applications/ssr/src/components/molecules/Search.tsx
@@ -1,3 +1,4 @@
+'use client';
 import assert from 'assert';
 
 import SearchBar from '@codegouvfr/react-dsfr/SearchBar';

diff --git a/packages/applications/ssr/src/components/organisms/List.tsx b/packages/applications/ssr/src/components/organisms/List.tsx
@@ -1,9 +1,7 @@
-'use client';
-import { usePathname, useSearchParams } from 'next/navigation';
 import { FC } from 'react';
 
-import { Pagination } from './Pagination';
 import { Tile } from './Tile';
+import { ListPagination } from './ListPagination';
 
 type ListProps<TItem> = {
   items: Array<TItem & { key: string }>;
@@ -20,16 +18,6 @@ export const List = <TItem,>({
   itemsPerPage,
   ItemComponent,
 }: ListProps<TItem>) => {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const pageCount = Math.ceil(totalItems / itemsPerPage);
-
-  const getPageUrl = (pageToGo: number): string => {
-    const urlSearchParams = new URLSearchParams(searchParams);
-    urlSearchParams.set('page', pageToGo.toString());
-    return `${pathname}${urlSearchParams.size > 0 ? `?${urlSearchParams.toString()}` : ''}`;
-  };
-
   return (
     <>
       <ul>
@@ -41,8 +29,11 @@ export const List = <TItem,>({
           </li>
         ))}
       </ul>
-
-      <Pagination getPageUrl={getPageUrl} currentPage={currentPage} pageCount={pageCount} />
+      <ListPagination
+        currentPage={currentPage}
+        totalItems={totalItems}
+        itemsPerPage={itemsPerPage}
+      />
     </>
   );
 };
diff --git a/packages/applications/ssr/src/components/organisms/ListHeader.tsx b/packages/applications/ssr/src/components/organisms/ListHeader.tsx
@@ -3,31 +3,44 @@ import Tag from '@codegouvfr/react-dsfr/Tag';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { FC } from 'react';
 
+import { ListFiltersProps } from './ListFilters';
+
 export type ListHeaderProps = {
-  tagFilters: Array<{
-    label: string;
-    searchParamKey: string;
-  }>;
+  filters: ListFiltersProps['filters'];
   totalCount: number;
 };
 
-export const ListHeader: FC<ListHeaderProps> = ({ tagFilters, totalCount }) => {
-  const currentSearchParams = useSearchParams();
-  const searchParams = tagFilters.reduce((urlSearchParams, { searchParamKey }) => {
-    if (currentSearchParams.has(searchParamKey)) {
-      urlSearchParams.set(searchParamKey, currentSearchParams.get(searchParamKey) ?? '');
-    }
-
-    return urlSearchParams;
-  }, new URLSearchParams());
-
+export const ListHeader: FC<ListHeaderProps> = ({ filters, totalCount }) => {
+  const searchParams = useSearchParams();
   const pathname = usePathname();
   const router = useRouter();
 
-  const onClick = (tagName: string) => {
-    searchParams.delete(tagName);
+  const tagFilters = filters.reduce(
+    (allFilters, { searchParamKey, label, options }) => {
+      const currentFilterValue = searchParams.get(searchParamKey);
+      if (!currentFilterValue) {
+        return allFilters;
+      }
+      return [
+        ...allFilters,
+        {
+          label: `${label}: ${options.find((x) => x.value === currentFilterValue)?.label}`,
+          searchParamKey,
+        },
+      ];
+    },
+    [] as { label: string; searchParamKey: string }[],
+  );
 
-    const url = `${pathname}${searchParams.size > 0 ? `?${searchParams.toString()}` : ''}`;
+  const onClick = (tagName: string) => {
+    const newSearchParams = tagFilters.reduce((urlSearchParams, { searchParamKey }) => {
+      if (searchParams.has(searchParamKey)) {
+        urlSearchParams.set(searchParamKey, searchParams.get(searchParamKey) ?? '');
+      }
+      return urlSearchParams;
+    }, new URLSearchParams());
+    newSearchParams.delete(tagName);
+    const url = `${pathname}${newSearchParams.size > 0 ? `?${newSearchParams.toString()}` : ''}`;
     router.push(url);
   };
 

diff --git a/packages/applications/ssr/src/components/organisms/ListPagination.tsx b/packages/applications/ssr/src/components/organisms/ListPagination.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { FC } from 'react';
+
+import { Pagination } from './Pagination';
+
+type ListPaginationProps = {
+  currentPage: number;
+  totalItems: number;
+  itemsPerPage: number;
+};
+
+export const ListPagination: FC<ListPaginationProps> = ({
+  currentPage,
+  itemsPerPage,
+  totalItems,
+}) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const pageCount = Math.ceil(totalItems / itemsPerPage);
+
+  const getPageUrl = (pageToGo: number): string => {
+    const urlSearchParams = new URLSearchParams(searchParams);
+    urlSearchParams.set('page', pageToGo.toString());
+    return `${pathname}${urlSearchParams.size > 0 ? `?${urlSearchParams.toString()}` : ''}`;
+  };
+
+  return <Pagination getPageUrl={getPageUrl} currentPage={currentPage} pageCount={pageCount} />;
+};
diff --git a/...onents/pages/attestation-conformité/transmettre/transmettreAttestationConformité.page.tsx b/...onents/pages/attestation-conformité/transmettre/transmettreAttestationConformité.page.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { FC } from 'react';
 
 import { PageTemplate } from '@/components/templates/Page.template';

diff --git a/...tions/ssr/src/components/pages/réseau/gestionnaire/lister/GestionnaireRéseauList.page.tsx b/...tions/ssr/src/components/pages/réseau/gestionnaire/lister/GestionnaireRéseauList.page.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { FC } from 'react';
 
 import { Routes } from '@potentiel-applications/routes';

diff --git a/packages/applications/ssr/src/components/pages/tâche/TâcheList.page.tsx b/packages/applications/ssr/src/components/pages/tâche/TâcheList.page.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { FC } from 'react';
 
 import { ListerTâchesReadModel } from '@potentiel-domain/tache';

diff --git a/packages/applications/ssr/src/components/templates/ListPage.template.tsx b/packages/applications/ssr/src/components/templates/ListPage.template.tsx
@@ -1,6 +1,3 @@
-'use client';
-
-import { useSearchParams } from 'next/navigation';
 import { FC } from 'react';
 
 import { LinkAction } from '../atoms/LinkAction';
@@ -38,29 +35,6 @@ export const ListPageTemplate = <TItem,>({
   totalItems,
   search,
 }: ListPageTemplateProps<TItem>) => {
-  /**
-   * Use search params as key for the ListFilters component
-   * This will force react to mount again this component
-   * when the search params changed
-   */
-  const listFiltersKey = new URLSearchParams(useSearchParams()).toString();
-  const searchParams = useSearchParams();
-  const tagFilters = filters.reduce(
-    (allFilters, { searchParamKey, label, options }) => {
-      const currentFilterValue = searchParams.get(searchParamKey);
-      if (!currentFilterValue) {
-        return allFilters;
-      }
-      return [
-        ...allFilters,
-        {
-          label: `${label}: ${options.find((x) => x.value === currentFilterValue)?.label}`,
-          searchParamKey,
-        },
-      ];
-    },
-    [] as { label: string; searchParamKey: string }[],
-  );
   return (
     <PageTemplate banner={<Heading1 className="text-theme-white">{heading}</Heading1>}>
       <div className="flex flex-col md:flex-row gap-5 md:gap-10">
@@ -77,7 +51,7 @@ export const ListPageTemplate = <TItem,>({
               ))}
             </>
           ) : null}
-          {filters.length ? <ListFilters key={listFiltersKey} filters={filters} /> : null}
+          {filters.length ? <ListFilters filters={filters} /> : null}
         </div>
 
         <div className="flex flex-col gap-3 flex-grow md:w-3/4">
@@ -87,7 +61,7 @@ export const ListPageTemplate = <TItem,>({
             </div>
           </div>
           <div className="flex flex-col md:flex-row md:items-center gap-3">
-            <ListHeader tagFilters={tagFilters} totalCount={totalItems} />
+            <ListHeader filters={filters} totalCount={totalItems} />
           </div>
           {items.length ? (
             <List