wip

InseeFr · Feb 5, 2024 · 82eff7d · 82eff7d
1 parent 926f69b
commit 82eff7d
Show file tree

Hide file tree

Showing 23 changed files with 264 additions and 85 deletions.
diff --git a/.env b/.env
@@ -1,4 +1,5 @@
 VITE_OIDC_ISSUER=
 VITE_OIDC_CLIENT_ID=
+VITE_PORTAIL_URL=
 VITE_APP_VERSION=$npm_package_version
 VITE_LUNATIC_VERSION=$npm_package_dependencies__inseefr_lunatic
diff --git a/index.html b/index.html
@@ -24,7 +24,6 @@
   <!--<link rel="preload" href="/dsfr/fonts/Marianne-Bold_Italic.woff2" as="font" crossorigin="anonymous" />-->
   <!--<link rel="preload" href="/dsfr/fonts/Spectral-Regular.woff2" as="font" crossorigin="anonymous" />-->
   <!--<link rel="preload" href="/dsfr/fonts/Spectral-ExtraBold.woff2" as="font" crossorigin="anonymous" />-->
-  <title>Vite + React + TS</title>
 </head>
 
 <body>

diff --git a/package.json b/package.json
@@ -16,32 +16,32 @@
     "prebuild": "only-include-used-icons && npx @inseefr/lunatic workers"
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^1.2.1",
+    "@codegouvfr/react-dsfr": "^1.2.2",
     "@emotion/react": "^11.11.3",
-    "@inseefr/lunatic": "^2.7.14",
+    "@inseefr/lunatic": "^2.7.15",
     "@inseefr/lunatic-dsfr": "^1.0.21",
-    "@tanstack/react-query": "^5.18.0",
-    "@tanstack/react-router": "^1.15.7",
+    "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-router": "^1.15.17",
     "axios": "^1.6.7",
     "oidc-spa": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.49.3",
-    "tss-react": "^4.9.3",
+    "react-hook-form": "^7.50.0",
+    "tss-react": "^4.9.4",
     "vite-tsconfig-paths": "^4.3.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/node": "^20.11.13",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.53",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   }

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_OIDC_CLIENT_ID: string
   readonly VITE_APP_VERSION: string
   readonly VITE_LUNATIC_VERSION: string
+  readonly VITE_PORTAIL_URL: string
 }
 
 interface ImportMeta {

diff --git a/src/hooks/useDocumentTitle.ts b/src/hooks/useDocumentTitle.ts
@@ -0,0 +1,11 @@
+import { useEffect } from 'react'
+
+export function useDocumentTitle(title: string) {
+  useEffect(() => {
+    const prevTitle = document.title
+    document.title = title
+    return () => {
+      document.title = prevTitle
+    }
+  })
+}
diff --git a/src/pages/Accessibility/AccessibilityPage.tsx b/src/pages/Accessibility/AccessibilityPage.tsx
@@ -0,0 +1,17 @@
+import { Breadcrumb } from '@codegouvfr/react-dsfr/Breadcrumb'
+import { Grid } from 'components/Grid'
+
+export function AccessibilityPage() {
+  return (
+    <Grid>
+      <Breadcrumb
+        currentPageLabel="Accessibilité"
+        homeLinkProps={{
+          to: '/',
+        }}
+        segments={[]}
+      />
+      <h2>Accessibilité</h2>
+    </Grid>
+  )
+}
diff --git a/src/pages/Accessibility/route.ts b/src/pages/Accessibility/route.ts
@@ -0,0 +1,12 @@
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from 'router/router'
+import { AccessibilityPage } from './AccessibilityPage'
+
+export const accessibilityRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'accessibilite',
+  component: AccessibilityPage,
+  loader: () => {
+    document.title = 'Accessibilité'
+  },
+})
diff --git a/src/pages/Error/ErrorPage.tsx b/src/pages/Error/ErrorPage.tsx
@@ -2,6 +2,7 @@ import { fr } from '@codegouvfr/react-dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
 import TechnicalError from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg'
 import { Container } from 'components/Container'
+import { useDocumentTitle } from 'hooks/useDocumentTitle'
 
 const getErrorInformations = (code: 301 | 404 | undefined) => {
   switch (code) {
@@ -22,6 +23,8 @@ export function ErrorPage(props: { code: 301 | 404 | undefined }) {
 
   const { title, subtitle, paragraph } = getErrorInformations(code)
 
+  useDocumentTitle(title)
+
   return (
     <Container>
       <div

diff --git a/src/pages/Legals/LegalsPage.tsx b/src/pages/Legals/LegalsPage.tsx
@@ -0,0 +1,17 @@
+import { Breadcrumb } from '@codegouvfr/react-dsfr/Breadcrumb'
+import { Grid } from 'components/Grid'
+
+export function LegalPage() {
+  return (
+    <Grid>
+      <Breadcrumb
+        currentPageLabel="Mentions Légales"
+        homeLinkProps={{
+          to: '/',
+        }}
+        segments={[]}
+      />
+      <h2>Mentions légales</h2>
+    </Grid>
+  )
+}
diff --git a/src/pages/Legals/route.ts b/src/pages/Legals/route.ts
@@ -0,0 +1,12 @@
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from 'router/router'
+import { LegalPage } from './LegalsPage'
+
+export const legalsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'mentions-legales',
+  component: LegalPage,
+  loader: () => {
+    document.title = 'Mentions Légales'
+  },
+})
diff --git a/src/pages/NavigationAssistance/NavigationAssistancePage.tsx b/src/pages/NavigationAssistance/NavigationAssistancePage.tsx
@@ -0,0 +1,17 @@
+import Breadcrumb from '@codegouvfr/react-dsfr/Breadcrumb'
+import { Grid } from 'components/Grid'
+
+export function NavigationAssistancePage() {
+  return (
+    <Grid>
+      <Breadcrumb
+        currentPageLabel="Aide à la navigation"
+        homeLinkProps={{
+          to: '/',
+        }}
+        segments={[]}
+      />
+      <h2>Aide à la navigation</h2>
+    </Grid>
+  )
+}
diff --git a/src/pages/NavigationAssistance/route.ts b/src/pages/NavigationAssistance/route.ts
@@ -0,0 +1,12 @@
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from 'router/router'
+import { NavigationAssistancePage } from './NavigationAssistancePage'
+
+export const navigationAssistanceRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'aide-a-la-navigation',
+  component: NavigationAssistancePage,
+  loader: () => {
+    document.title = 'Aide à la navigation'
+  },
+})
diff --git a/src/pages/Security/SecurityPage.tsx b/src/pages/Security/SecurityPage.tsx
@@ -0,0 +1,17 @@
+import Breadcrumb from '@codegouvfr/react-dsfr/Breadcrumb'
+import { Grid } from 'components/Grid'
+
+export function SecurityPage() {
+  return (
+    <Grid>
+      <Breadcrumb
+        currentPageLabel="Sécurité"
+        homeLinkProps={{
+          to: '/',
+        }}
+        segments={[]}
+      />
+      <h2>Sécurité</h2>
+    </Grid>
+  )
+}
diff --git a/src/pages/Security/route.ts b/src/pages/Security/route.ts
@@ -0,0 +1,12 @@
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from 'router/router'
+import { SecurityPage } from './SecurityPage'
+
+export const securityRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'securite',
+  component: SecurityPage,
+  loader: () => {
+    document.title = 'Sécurité'
+  },
+})
diff --git a/src/pages/SiteMap/SiteMapPage.tsx b/src/pages/SiteMap/SiteMapPage.tsx
@@ -0,0 +1,33 @@
+import { Breadcrumb } from '@codegouvfr/react-dsfr/Breadcrumb'
+import { Grid } from 'components/Grid'
+
+import { Link } from '@tanstack/react-router'
+
+export function SiteMapPage() {
+  return (
+    <Grid>
+      <Breadcrumb
+        currentPageLabel="Plan du site"
+        homeLinkProps={{
+          to: '/',
+        }}
+        segments={[]}
+      />
+      <h2>Plan du site</h2>
+      <ul>
+        <li>
+          <Link to="/">Accueil</Link>
+        </li>
+        <li>
+          <Link to="">Mentions légales</Link>
+        </li>
+        <li>
+          <Link to="/accessibilite">Accessibilité</Link>
+        </li>
+        <li>
+          <Link to="/securite">Sécurité</Link>
+        </li>
+      </ul>
+    </Grid>
+  )
+}
diff --git a/src/pages/SiteMap/route.ts b/src/pages/SiteMap/route.ts
@@ -0,0 +1,12 @@
+import { createRoute } from '@tanstack/react-router'
+import { rootRoute } from 'router/router'
+import { SiteMapPage } from './SiteMapPage'
+
+export const siteMapRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'plan-du-site',
+  component: SiteMapPage,
+  loader: () => {
+    document.title = 'Plan du site'
+  },
+})
diff --git a/src/pages/Visualize/Visualize.tsx b/src/pages/Visualize/Visualize.tsx
@@ -1,6 +1,6 @@
 import { Orchestrator } from 'components/Orchestrator/Orchestrator'
 import { VisualizeForm } from './Form/VisualizeForm'
-import { visualizeRoute } from './visualizeRoute'
+import { visualizeRoute } from './route'
 import { axiosGet } from 'utils/axios'
 
 export function VisualizePage() {

diff --git a/src/pages/Visualize/visualizeRoute.ts → src/pages/Visualize/route.ts b/src/pages/Visualize/visualizeRoute.ts → src/pages/Visualize/route.ts
@@ -22,6 +22,7 @@ export const visualizeRoute = createRoute({
     context: { queryClient },
     deps: { sourceUrl, dataUrl, metadataUrl, nomenclature },
   }) => {
+    document.title = 'Visualisation'
     if (!sourceUrl) {
       return
     }

diff --git a/src/router/Layout/Footer.tsx b/src/router/Layout/Footer.tsx
@@ -36,16 +36,13 @@ export function Footer() {
         </>
       }
       websiteMapLinkProps={{
-        to: '',
-        //to: '/plan-du-site',
+        to: '/plan-du-site',
       }}
       accessibilityLinkProps={{
-        to: '',
-        //to: '/accessibilite',
+        to: '/accessibilite',
       }}
       termsLinkProps={{
-        to: '',
-        //to: '/mentions-legales',
+        to: '/mentions-legales',
       }}
       operatorLogo={{
         alt: 'Insee, mesurer pour comprendre',
@@ -56,15 +53,13 @@ export function Footer() {
         {
           text: 'Sécurité',
           linkProps: {
-            to: '',
-            //to: '/securite'
+            to: '/securite',
           },
         },
         {
-          text: 'Aide à la navigation ',
+          text: 'Aide à la navigation',
           linkProps: {
-            to: '',
-            //to: '/aide-a-la-navigation'
+            to: '/aide-a-la-navigation',
           },
         },
         <span className={fr.cx('fr-footer__bottom-link')}>

diff --git a/src/router/Layout/Header.tsx b/src/router/Layout/Header.tsx
@@ -8,7 +8,13 @@ export function Header() {
 
   return (
     <DsfrHeader
-      brandTop="République Française"
+      brandTop={
+        <>
+          République
+          <br />
+          Française
+        </>
+      }
       homeLinkProps={{
         to: '/',
         title:

diff --git a/src/router/router.tsx b/src/router/router.tsx
@@ -1,12 +1,13 @@
 import type { QueryClient } from '@tanstack/react-query'
 import { Layout } from './Layout'
-import {
-  createRootRouteWithContext,
-  createRoute,
-  Outlet,
-} from '@tanstack/react-router'
+import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import { ErrorPage } from 'pages/Error/ErrorPage'
-import { visualizeRoute } from 'pages/Visualize/visualizeRoute'
+import { visualizeRoute } from 'pages/Visualize/route'
+import { accessibilityRoute } from 'pages/Accessibility/route'
+import { securityRoute } from 'pages/Security/route'
+import { siteMapRoute } from 'pages/SiteMap/route'
+import { legalsRoute } from 'pages/Legals/route'
+import { navigationAssistanceRoute } from 'pages/NavigationAssistance/route'
 
 export const rootRoute = createRootRouteWithContext<{
   queryClient: QueryClient
@@ -23,11 +24,11 @@ export const rootRoute = createRootRouteWithContext<{
   ),
 })
 
-// test route, need to be removed
-const indexRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/',
-  component: () => <>Index Route</>,
-})
-
-export const routeTree = rootRoute.addChildren([indexRoute, visualizeRoute])
+export const routeTree = rootRoute.addChildren([
+  visualizeRoute,
+  accessibilityRoute,
+  securityRoute,
+  siteMapRoute,
+  legalsRoute,
+  navigationAssistanceRoute
+])
diff --git a/tsconfig.json b/tsconfig.json
@@ -22,8 +22,8 @@
 
     "verbatimModuleSyntax": true,
 
-    "baseUrl": "./src",
+    "baseUrl": "./src"
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }