refactor: define params query in context

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

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

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

src/components/Services/index.tsx

@@ -1,2 +1,3 @@
 export * from './ComponentsNav'
 export * from './VariablesDisplay'
+export * from './Layout'

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

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,