From 5681f201a7118b6ae0ce9f7567d4d23cf4dd3751 Mon Sep 17 00:00:00 2001
From: Paul Farault <diode-farault.consultant@dgfip.finances.gouv.fr>
Date: Tue, 31 Jan 2023 17:01:46 +0100
Subject: [PATCH] refactor: define params query in context

---
 src/app/dashboard/services/layout.tsx         | 12 ---------
 .../Services/ComponentsNav/ComponentsNav.tsx  | 11 +++-----
 src/components/Services/Layout.tsx            | 25 +++++++++++++++++++
 src/components/Services/ParamsContext.tsx     | 14 +++++++++++
 src/components/Services/index.tsx             |  1 +
 src/components/Services/useParamsContext.ts   | 12 +++++++++
 src/pages/services/[serviceId].tsx            |  3 ++-
 7 files changed, 57 insertions(+), 21 deletions(-)
 delete mode 100644 src/app/dashboard/services/layout.tsx
 create mode 100644 src/components/Services/Layout.tsx
 create mode 100644 src/components/Services/ParamsContext.tsx
 create mode 100644 src/components/Services/useParamsContext.ts

diff --git a/src/app/dashboard/services/layout.tsx b/src/app/dashboard/services/layout.tsx
deleted file mode 100644
index cf66533c..00000000
--- a/src/app/dashboard/services/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { PageTitle } from 'src/components/Layout/primitives/PageTitle'
-import { ComponentsNav } from 'src/components/Services/ComponentsNav'
-
-export default function ServiceLayout({ children }) {
-  return (
-    <>
-      <PageTitle>Variables configuration</PageTitle>
-      <ComponentsNav />
-      {children}
-    </>
-  )
-}
diff --git a/src/components/Services/ComponentsNav/ComponentsNav.tsx b/src/components/Services/ComponentsNav/ComponentsNav.tsx
index 3763d88f..e6c7cb85 100644
--- a/src/components/Services/ComponentsNav/ComponentsNav.tsx
+++ b/src/components/Services/ComponentsNav/ComponentsNav.tsx
@@ -1,16 +1,11 @@
-import { useRouter } from 'next/router'
 import { useSelectService } from 'src/features/variables'
-import { getFirstElementIfArray } from 'src/utils'
+import { useParamsContext } from '../useParamsContext'
 import { ComponentsDropdown } from './ComponentsDropdown'
 import { ComponentsTabs } from './ComponentsTabs'
 
 export function ComponentsNav() {
-  const {
-    query: { serviceId: tempServiceId, componentId: tempComponentId },
-    isReady,
-  } = useRouter()
-  const currentComponentId = isReady && getFirstElementIfArray(tempComponentId)
-  const currentServiceId = isReady && getFirstElementIfArray(tempServiceId)
+  const { serviceId: currentServiceId, componentId: currentComponentId } =
+    useParamsContext()
 
   const [usedComponents, unusedComponents] = useSelectService(
     currentServiceId
diff --git a/src/components/Services/Layout.tsx b/src/components/Services/Layout.tsx
new file mode 100644
index 00000000..e02333c5
--- /dev/null
+++ b/src/components/Services/Layout.tsx
@@ -0,0 +1,25 @@
+import { useRouter } from 'next/router'
+import { PageTitle } from 'src/components/Layout/primitives/PageTitle'
+import { ComponentsNav } from 'src/components/Services/ComponentsNav'
+import { getFirstElementIfArray } from 'src/utils'
+import { ParamsContextProvider } from './ParamsContext'
+
+export function Layout({ children }) {
+  const {
+    query: { serviceId: tempServiceId, componentId: tempComponentId },
+    isReady,
+  } = useRouter()
+  const currentServiceId = isReady && getFirstElementIfArray(tempServiceId)
+  const currentComponentId = isReady && getFirstElementIfArray(tempComponentId)
+
+  return (
+    <ParamsContextProvider
+      serviceId={currentServiceId}
+      componentId={currentComponentId}
+    >
+      <PageTitle>Variables configuration</PageTitle>
+      <ComponentsNav />
+      {children}
+    </ParamsContextProvider>
+  )
+}
diff --git a/src/components/Services/ParamsContext.tsx b/src/components/Services/ParamsContext.tsx
new file mode 100644
index 00000000..cf66e5bf
--- /dev/null
+++ b/src/components/Services/ParamsContext.tsx
@@ -0,0 +1,14 @@
+import { createContext } from 'react'
+
+export const ParamsContext = createContext<{
+  serviceId: string
+  componentId?: string
+}>(null)
+
+export function ParamsContextProvider({ children, serviceId, componentId }) {
+  return (
+    <ParamsContext.Provider value={{ serviceId, componentId }}>
+      {children}
+    </ParamsContext.Provider>
+  )
+}
diff --git a/src/components/Services/index.tsx b/src/components/Services/index.tsx
index 4493d6ec..17d00e6d 100644
--- a/src/components/Services/index.tsx
+++ b/src/components/Services/index.tsx
@@ -1,2 +1,3 @@
 export * from './ComponentsNav'
 export * from './VariablesDisplay'
+export * from './Layout'
diff --git a/src/components/Services/useParamsContext.ts b/src/components/Services/useParamsContext.ts
new file mode 100644
index 00000000..6e263e65
--- /dev/null
+++ b/src/components/Services/useParamsContext.ts
@@ -0,0 +1,12 @@
+import { useContext } from 'react'
+import { ParamsContext } from './ParamsContext'
+
+export const useParamsContext = () => {
+  const paramContext = useContext(ParamsContext)
+  if (!paramContext) {
+    throw new Error(
+      'useParamsContext must be used within a ParamsContextProvider'
+    )
+  }
+  return paramContext
+}
diff --git a/src/pages/services/[serviceId].tsx b/src/pages/services/[serviceId].tsx
index f0be0103..3be73976 100644
--- a/src/pages/services/[serviceId].tsx
+++ b/src/pages/services/[serviceId].tsx
@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router'
 import { ReactElement } from 'react'
 import DashboardLayout from 'src/app/dashboard/layout'
-import ServiceLayout from 'src/app/dashboard/services/layout'
+
 import {
+  Layout as ServiceLayout,
   ValidateBar,
   VariablesContextProvider,
   VariablesDisplay,