fix(pagination): mise à jour de react-instantsearch et suppression du…

… routing pour réparer la pagination des pages utilisant InstantSearchLayout (#2711) * fix(pagination): mise à jour de react-instantsearch et suppression du routing pour réparer la pagination des pages utilisant InstantSearchLayout * fix(deps): package-lock non accepté sans npm install * chore: ajout du commentaire redirigeant vers la PR * chore: préparationde la prochaine majeure avec l’option future={{ preserveSharedStateOnUnmount: true }} * refacto: ne pas passer true mais juste router en props
DNUM-SocialGouv · Feb 20, 2024 · ace76c4 · ace76c4
1 parent 2f67b36
commit ace76c4
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 136 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,8 +46,8 @@
     "react": "18.2.0",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.2.0",
-    "react-instantsearch": "7.5.0",
-    "react-instantsearch-router-nextjs": "7.5.0",
+    "react-instantsearch": "7.6.0",
+    "react-instantsearch-router-nextjs": "7.6.0",
     "redis": "4.6.13",
     "reflect-metadata": "0.2.1",
     "sharp": "0.33.2",

diff --git a/src/client/components/layouts/InstantSearch/InstantSearchLayout.test.tsx b/src/client/components/layouts/InstantSearch/InstantSearchLayout.test.tsx
@@ -9,7 +9,6 @@ import { InstantSearchLayout } from '~/client/components/layouts/InstantSearch/I
 import { aRechercheClientService } from '~/client/components/layouts/InstantSearch/InstantSearchLayout.fixture';
 import { mockLargeScreen } from '~/client/components/window.mock';
 import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
-import { aRoutingService } from '~/client/services/routing/routing.service.fixture';
 
 jest.mock('react-instantsearch', () => ({
 	...jest.requireActual('react-instantsearch'),
@@ -25,7 +24,6 @@ describe('<InstantSearchLayout />', () => {
 		render(
 			<DependenciesProvider
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<InstantSearchLayout
 					meilisearchIndex="fake"
@@ -47,7 +45,7 @@ describe('<InstantSearchLayout />', () => {
 
 		const pageSuivant = screen.getByRole('link', { name: /Page suivante/i });
 		await user.click(pageSuivant);
-		
+
 		expect(résultats.scrollIntoView).toHaveBeenCalledTimes(1);
 		expect(résultats.scrollIntoView).toHaveBeenCalledWith(true);
 	});

diff --git a/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx b/src/client/components/layouts/InstantSearch/InstantSearchLayout.tsx
@@ -13,7 +13,6 @@ import { MeiliSearchCustomPagination } from '~/client/components/ui/Meilisearch/
 import { MessageResultatRecherche } from '~/client/components/ui/Meilisearch/MessageResultatRecherche';
 import { useDependency } from '~/client/context/dependenciesContainer.context';
 import { useSynchronizedRef } from '~/client/hooks/useSynchronizedRef';
-import { RoutingService } from '~/client/services/routing/routing.service';
 
 export interface HitProps<THit extends BaseHit> {
     hit: THit;
@@ -55,7 +54,6 @@ export function InstantSearchLayout<THit extends BaseHit = BaseHit>(props: Insta
 	} = props;
 
 	const searchClient = useDependency<SearchClient>('rechercheClientService');
-	const routing = useDependency<RoutingService>('routingService');
 
 	const listeDesResultatsRef = useRef<HTMLElement>(null);
 
@@ -74,7 +72,8 @@ export function InstantSearchLayout<THit extends BaseHit = BaseHit>(props: Insta
 			<InstantSearch
 				searchClient={searchClient}
 				indexName={meilisearchIndex}
-				routing={routing}
+				routing /* NOTE (SULI 19-02-2024): Cf PR https://github.com/DNUM-SocialGouv/1j1s-front/pull/2711 pour réutiliser createInstantSearchRouterNext*/
+				future={{ preserveSharedStateOnUnmount: true }}
 			>
 				<InstantSearchErrorBoundary>
 					<>

diff --git a/src/client/dependencies.container.ts b/src/client/dependencies.container.ts
@@ -1,7 +1,5 @@
 import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
 import { SearchClient } from 'algoliasearch-helper/types/algoliasearch';
-import singletonRouter from 'next/router';
-import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs';
 
 import { ManualAnalyticsService } from '~/client/services/analytics/analytics.service';
 import { EulerianAnalyticsService } from '~/client/services/analytics/eulerian/eulerian.analytics.service';
@@ -36,7 +34,6 @@ import { NullMarketingService } from '~/client/services/marketing/null/null.mark
 import { BffAlternanceMetierService } from '~/client/services/metiers/bff.alternance.metier.service';
 import { MetierService } from '~/client/services/metiers/metier.service';
 import { MissionEngagementService } from '~/client/services/missionEngagement/missionEngagement.service';
-import { RoutingService } from '~/client/services/routing/routing.service';
 import { BffStageService } from '~/client/services/stage/bff.stage.service';
 import { StageService } from '~/client/services/stage/stage.service';
 import { BffStage3eEt2deService } from '~/client/services/stage3eEt2de/bff.stage3eEt2de.service';
@@ -58,7 +55,6 @@ export type Dependencies = {
 	metierStage3eEt2deService: MetierService
 	missionEngagementService: MissionEngagementService
 	rechercheClientService: SearchClient
-	routingService: RoutingService
 	stageService: StageService
 	youtubeService: VideoService
 	établissementAccompagnementService: ÉtablissementAccompagnementService
@@ -124,8 +120,6 @@ export default function dependenciesContainer(sessionId: string): Dependencies {
 
 	const stage3eEt2deService = new BffStage3eEt2deService(httpClientService);
 
-	const routingService = new RoutingService(createInstantSearchRouterNext({ singletonRouter }));
-
 	return {
 		analyticsService,
 		cookiesService,
@@ -141,7 +135,6 @@ export default function dependenciesContainer(sessionId: string): Dependencies {
 		metierStage3eEt2deService,
 		missionEngagementService,
 		rechercheClientService,
-		routingService,
 		stage3eEt2deService,
 		stageService,
 		youtubeService,

diff --git a/src/client/services/routing/routing.service.fixture.ts b/src/client/services/routing/routing.service.fixture.ts
diff --git a/src/client/services/routing/routing.service.ts b/src/client/services/routing/routing.service.ts
diff --git a/src/pages/decouvrir-les-metiers/index.page.test.tsx b/src/pages/decouvrir-les-metiers/index.page.test.tsx
@@ -11,7 +11,6 @@ import { mockUseRouter } from '~/client/components/useRouter.mock';
 import { mockSmallScreen } from '~/client/components/window.mock';
 import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
 import { aManualAnalyticsService } from '~/client/services/analytics/analytics.service.fixture';
-import { aRoutingService } from '~/client/services/routing/routing.service.fixture';
 import RechercherFicheMetierPage from '~/pages/decouvrir-les-metiers/index.page';
 
 jest.mock('react-instantsearch', () => ({
@@ -28,7 +27,6 @@ describe('<RechercherFicheMetierPage />', () => {
 			<DependenciesProvider
 				analyticsService={aManualAnalyticsService()}
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<RechercherFicheMetierPage />
 			</DependenciesProvider>,
@@ -44,7 +42,6 @@ describe('<RechercherFicheMetierPage />', () => {
 			<DependenciesProvider
 				analyticsService={aManualAnalyticsService()}
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<RechercherFicheMetierPage />
 			</DependenciesProvider>,

diff --git a/src/pages/logements/annonces/index.page.test.tsx b/src/pages/logements/annonces/index.page.test.tsx
@@ -11,7 +11,6 @@ import { mockUseRouter } from '~/client/components/useRouter.mock';
 import { mockSmallScreen } from '~/client/components/window.mock';
 import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
 import { aManualAnalyticsService } from '~/client/services/analytics/analytics.service.fixture';
-import { aRoutingService } from '~/client/services/routing/routing.service.fixture';
 import AnnoncesPage from '~/pages/logements/annonces/index.page';
 
 jest.mock('react-instantsearch', () => ({
@@ -28,7 +27,6 @@ describe('<AnnoncesPage />', () => {
 			<DependenciesProvider
 				analyticsService={aManualAnalyticsService()}
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<AnnoncesPage />
 			</DependenciesProvider>,
@@ -44,7 +42,6 @@ describe('<AnnoncesPage />', () => {
 			<DependenciesProvider
 				analyticsService={aManualAnalyticsService()}
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<AnnoncesPage />
 			</DependenciesProvider>,

diff --git a/src/pages/stages/index.page.test.tsx b/src/pages/stages/index.page.test.tsx
@@ -11,7 +11,6 @@ import { mockUseRouter } from '~/client/components/useRouter.mock';
 import { mockSmallScreen } from '~/client/components/window.mock';
 import { DependenciesProvider } from '~/client/context/dependenciesContainer.context';
 import { aManualAnalyticsService } from '~/client/services/analytics/analytics.service.fixture';
-import { aRoutingService } from '~/client/services/routing/routing.service.fixture';
 import RechercherOffreStagePage from '~/pages/stages/index.page';
 
 jest.mock('react-instantsearch', () => ({
@@ -28,7 +27,6 @@ describe('<RechercherOffreStagePage />', () => {
 			<DependenciesProvider
 				analyticsService={aManualAnalyticsService()}
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<RechercherOffreStagePage />
 			</DependenciesProvider>,
@@ -44,7 +42,6 @@ describe('<RechercherOffreStagePage />', () => {
 			<DependenciesProvider
 				analyticsService={aManualAnalyticsService()}
 				rechercheClientService={aRechercheClientService()}
-				routingService={aRoutingService()}
 			>
 				<RechercherOffreStagePage />
 			</DependenciesProvider>,