add env var and refactor vizu

Dockerfile

@@ -18,4 +18,4 @@ EXPOSE 8080
 
 USER nginx
 
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT sh -c "./vite-envs.sh && nginx -g 'daemon off;'"

package.json

@@ -1,9 +1,10 @@
 {
   "name": "stromae-dsfr",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
+    "prepare": "vite-envs update-types",
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -13,12 +14,12 @@
     "format:check": "npm run _format -- --list-different",
     "postinstall": "copy-dsfr-to-public",
     "predev": "only-include-used-icons",
-    "prebuild": "only-include-used-icons && npx @inseefr/lunatic workers"
+    "prebuild": "only-include-used-icons && npx @inseefr/lunatic"
   },
   "dependencies": {
     "@codegouvfr/react-dsfr": "^1.7.2",
     "@emotion/react": "^11.11.3",
-    "@inseefr/lunatic": "^2.7.19",
+    "@inseefr/lunatic": "^2.7.20",
     "@inseefr/lunatic-dsfr": "^1.0.21",
     "@tanstack/react-query": "^5.24.1",
     "@tanstack/react-router": "^1.17.4",
@@ -45,6 +46,7 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "^3.2.5",
     "typescript": "^5.3.3",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "vite-envs": "^4.0.8"
   }
 }

src/components/Orchestrator/Orchestrator.tsx

@@ -9,13 +9,14 @@ import { downloadAsJson } from 'utils/downloadAsJson'
 import { useNavigate } from '@tanstack/react-router'
 import { Welcome } from './CustomPages/Welcome'
 import { Navigation } from './Navigation'
-import type { StateData, SurveyUnitData } from './type'
 import { useEffect, useState } from 'react'
 import { Validation } from './CustomPages/Validation'
 import { useStromaeNavigation } from './useStromaeNavigation'
 import { EndPage } from './CustomPages/EndPage'
 import { ValidationModal } from './CustomPages/ValidationModal'
 import { assert } from 'tsafe/assert'
+import type { SurveyUnitData } from 'model/SurveyUnitData'
+import type { StateData } from 'model/StateData'
 
 export function Orchestrator(props: {
   source: LunaticSource
@@ -37,6 +38,7 @@ export function Orchestrator(props: {
     isLastPage,
     pageTag,
     goToPage: goToLunaticPage,
+
   } = useLunatic(source, surveyUnitData?.data, {
     // @ts-expect-error need some work on lunatic-dsfr to remove this
     custom,

src/components/Orchestrator/type.ts

@@ -1,21 +1,3 @@
-import type { LunaticData, useLunatic } from '@inseefr/lunatic'
-
-export type StateData = {
-  state: 'INIT' | 'COMPLETED' | 'VALIDATED' | 'TOEXTRACT' | 'EXTRACTED' | null
-  date: number
-  currentPage:
-    | 'welcomePage'
-    | 'validationPage'
-    | 'endPage'
-    | ReturnType<typeof useLunatic>['pageTag'] // We hope Lunatic will better type this with template literal type
-}
-
-export type SurveyUnitData = {
-  stateData?: StateData
-  data?: LunaticData
-  personalization?: Array<unknown>
-}
-
 export type PageType =
   | 'welcomePage'
   | 'validationPage'

src/components/Orchestrator/useStromaeNavigation.tsx

@@ -8,6 +8,7 @@ type Params = {
   isFirstPage: boolean
   isLastPage: boolean
   initialCurrentPage: string | undefined
+  //initialCurrentPage: PageType
   goNextLunatic: () => void
   goPrevLunatic: () => void
   openValidationModal: () => Promise<void>
@@ -23,28 +24,14 @@ export function useStromaeNavigation({
   goToLunaticPage,
   openValidationModal,
 }: Params) {
-  // const getInitialCurrentPage = () => {
-  //   switch (initialCurrentPage) {
-  //     case undefined:
-  //       return 'welcomePage'
-  //     case 'welcomePage':
-  //     case 'validationPage':
-  //     case 'endPage':
-  //       return initialCurrentPage
-  //     default:
-  //       //string value (pageTag in fact)
-  //       return 'lunaticPage'
-  //   }
-  // }
-
+  //Wait for https://github.com/InseeFr/Lunatic/issues/876 to handle case lunaticPage
   const [currentPage, setCurrentPage] = useState<PageType>(
     initialCurrentPage === 'endPage' ? 'endPage' : 'welcomePage'
   )
 
   const goNext = () => {
     switch (currentPage) {
       case 'validationPage':
-        //return setCurrentPage('validationModal')
         openValidationModal().then(() => {
           setCurrentPage('endPage')
         })

src/model/StateData.ts

@@ -0,0 +1,11 @@
+import type { useLunatic } from '@inseefr/lunatic'
+
+export type StateData = {
+  state: 'INIT' | 'COMPLETED' | 'VALIDATED' | 'TOEXTRACT' | 'EXTRACTED' | null
+  date: number
+  currentPage:
+    | 'welcomePage'
+    | 'validationPage'
+    | 'endPage'
+    | ReturnType<typeof useLunatic>['pageTag'] // We hope Lunatic will better type this with template literal type
+}

src/model/SurveyUnitData.ts

@@ -0,0 +1,8 @@
+import type { LunaticData } from '@inseefr/lunatic'
+import type { StateData } from './StateData'
+
+export type SurveyUnitData = {
+  stateData?: StateData
+  data?: LunaticData
+  personalization?: Array<unknown>
+}

src/pages/Visualize/Form/encodeParams.ts

@@ -1,5 +1,6 @@
 import type { FormInputs } from './VisualizeForm'
 
+//TODO Remove this and use Zod with Form everywhere
 export const encodeParams = (data: FormInputs) => {
   return {
     nomenclature: data.nomenclature.reduce<Record<string, string>>(
@@ -11,29 +12,3 @@ export const encodeParams = (data: FormInputs) => {
     data: encodeURIComponent(data.data),
   }
 }
-
-export const decodeParams = (params: {
-  nomenclature?: Record<string, string>
-  source?: string
-  metadata?: string
-  data?: string
-}) => {
-  const { source, data, metadata, nomenclature } = params
-
-  const decodedNomenclature = nomenclature
-    ? Object.entries(nomenclature).reduce<Record<string, string>>(
-        (acc, [name, uri]) => ({
-          ...acc,
-          [name]: decodeURIComponent(uri),
-        }),
-        {}
-      )
-    : undefined
-
-  return {
-    sourceUrl: source ? decodeURIComponent(source) : undefined,
-    metadataUrl: metadata ? decodeURIComponent(metadata) : undefined,
-    surveyUnitDataUrl: data ? decodeURIComponent(data) : undefined,
-    nomenclature: decodedNomenclature,
-  }
-}

src/pages/Visualize/Visualize.tsx

@@ -6,23 +6,22 @@ import { axiosGet } from 'utils/axios'
 export function VisualizePage() {
   const loaderResults = visualizeRoute.useLoaderData()
 
-  if (loaderResults) {
-    const { source, surveyUnitData, nomenclature } = loaderResults
-
-    const getReferentiel = (name: string) => {
-      return nomenclature
-        ? axiosGet<Array<unknown>>(nomenclature[name])
-        : Promise.reject(new Error('No nomenclature provided'))
-    }
+  if (!loaderResults) {
+    return <VisualizeForm />
+  }
+  const { source, surveyUnitData, nomenclature } = loaderResults
 
-    return (
-      <Orchestrator
-        source={source}
-        surveyUnitData={surveyUnitData}
-        getReferentiel={getReferentiel}
-      />
-    )
+  const getReferentiel = (name: string) => {
+    return nomenclature
+      ? axiosGet<Array<unknown>>(nomenclature[name])
+      : Promise.reject(new Error('No nomenclature provided'))
   }
 
-  return <VisualizeForm />
+  return (
+    <Orchestrator
+      source={source}
+      surveyUnitData={surveyUnitData}
+      getReferentiel={getReferentiel}
+    />
+  )
 }

src/pages/Visualize/route.ts

@@ -2,56 +2,50 @@ import { createRoute } from '@tanstack/react-router'
 import { rootRoute } from 'router/router'
 import { VisualizePage } from './Visualize'
 import { z } from 'zod'
-import { type LunaticSource } from '@inseefr/lunatic'
-import { queryOptions } from '@tanstack/react-query'
-import { axiosGet } from 'utils/axios'
-import { decodeParams } from './Form/encodeParams'
-import type { SurveyUnitData } from 'components/Orchestrator/type'
+
+import {
+  metadataQueryOptions,
+  sourceQueryOptions,
+  surveyUnitDataQueryOptions,
+} from 'utils/query/visualizeQueryOptions'
 
 export const visualizeRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: 'visualize',
   component: VisualizePage,
   validateSearch: z.object({
-    source: z.string().optional(),
-    metadata: z.string().optional(),
-    data: z.string().optional(),
-    nomenclature: z.record(z.string()).optional(),
+    source: z.string().transform(decodeURIComponent).optional(),
+    metadata: z.string().transform(decodeURIComponent).optional(),
+    data: z.string().transform(decodeURIComponent).optional(),
+    nomenclature: z.record(z.string().transform(decodeURIComponent)).optional(),
+  }),
+  loaderDeps: ({ search }) => ({
+    sourceUrl: search.source,
+    surveyUnitDataUrl: search.data,
+    metadataUrl: search.metadata,
+    nomenclature: search.nomenclature,
   }),
-  loaderDeps: ({ search }) => decodeParams(search),
   loader: async ({
     context: { queryClient },
     deps: { sourceUrl, surveyUnitDataUrl, metadataUrl, nomenclature },
   }) => {
     document.title = 'Visualisation'
+
     if (!sourceUrl) {
       return
     }
 
-    const sourceQueryOption = queryOptions({
-      queryKey: [sourceUrl],
-      queryFn: () => axiosGet<LunaticSource>(sourceUrl),
-    })
-
-    const surveyUnitDataQueryOption = queryOptions({
-      queryKey: [surveyUnitDataUrl],
-      queryFn: () =>
-        surveyUnitDataUrl
-          ? axiosGet<SurveyUnitData>(surveyUnitDataUrl)
-          : undefined,
-    })
+    const sourcePr = queryClient.ensureQueryData(sourceQueryOptions(sourceUrl))
 
-    //TODO Type metadata
-    const metadataQueryOption = queryOptions({
-      queryKey: [metadataUrl],
-      queryFn: () => (metadataUrl ? axiosGet<unknown>(metadataUrl) : undefined),
-    })
+    const surveyUnitDataPr = surveyUnitDataUrl
+      ? queryClient.ensureQueryData(
+          surveyUnitDataQueryOptions(surveyUnitDataUrl)
+        )
+      : Promise.resolve(undefined)
 
-    const sourcePr = queryClient.ensureQueryData(sourceQueryOption)
-    const surveyUnitDataPr = queryClient.ensureQueryData(
-      surveyUnitDataQueryOption
-    )
-    const metadataPr = queryClient.ensureQueryData(metadataQueryOption)
+    const metadataPr = metadataUrl
+      ? queryClient.ensureQueryData(metadataQueryOptions(metadataUrl))
+      : Promise.resolve(undefined)
 
     const [source, surveyUnitData, metadata] = await Promise.all([
       sourcePr,

src/utils/query/visualizeQueryOptions.ts

@@ -0,0 +1,23 @@
+import type { LunaticSource } from '@inseefr/lunatic'
+import { queryOptions } from '@tanstack/react-query'
+import type { SurveyUnitData } from 'model/SurveyUnitData'
+import { axiosGet } from 'utils/axios'
+
+export const sourceQueryOptions = (sourceUrl: string) =>
+  queryOptions({
+    queryKey: [sourceUrl],
+    queryFn: () => axiosGet<LunaticSource>(sourceUrl),
+  })
+
+export const surveyUnitDataQueryOptions = (surveyUnitDataUrl: string) =>
+  queryOptions({
+    queryKey: [surveyUnitDataUrl],
+    queryFn: () => axiosGet<SurveyUnitData>(surveyUnitDataUrl),
+  })
+
+//TODO Type metadata
+export const metadataQueryOptions = (metadataUrl: string) =>
+  queryOptions({
+    queryKey: [metadataUrl],
+    queryFn: () => axiosGet<unknown>(metadataUrl),
+  })

src/vite-env.d.ts

@@ -1 +1,40 @@
-/// <reference types="vite/client" />
+/// <reference types="vite-envs/client" />
+
+
+type ImportMetaEnv = {
+  // Auto-generated by `npx vite-envs update-types` and hot-reloaded by the `vite-env` plugin
+  VITE_OIDC_ISSUER: string
+  VITE_OIDC_CLIENT_ID: string
+  VITE_PORTAIL_URL: string
+  VITE_APP_VERSION: string
+  VITE_LUNATIC_VERSION: string
+  BASE_URL: string
+  MODE: string
+  DEV: boolean
+  PROD: boolean
+  // @user-defined-start
+  /*
+   * Here you can define your own special variables
+   * that would be available on `import.meta.env` but
+   * that vite-envs does not know about.
+   * This section will be preserved thanks to the special comments.
+   * Example:
+   */
+  SSR: boolean;
+  // @user-defined-end
+}
+
+
+
+interface ImportMeta {
+  // Auto-generated by `npx vite-envs update-types`
+
+  url: string
+
+  readonly hot?: import('vite-envs/types/hot').ViteHotContext
+
+  readonly env: ImportMetaEnv
+
+  glob: import('vite-envs/types/importGlob').ImportGlobFunction
+}
+

vite.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { viteEnvs } from 'vite-envs'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [react(), tsconfigPaths(), viteEnvs()],
 })