fix: reset cache error boundary after navigate in visualize page

InseeFr · May 6, 2024 · fce6a2d · fce6a2d
1 parent 8985a4e
commit fce6a2d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/components/Error/ErrorComponent.tsx b/src/components/Error/ErrorComponent.tsx
@@ -1,16 +1,18 @@
 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 { useNavigate } from '@tanstack/react-router'
 import { Container } from 'components/Container'
 import { useDocumentTitle } from 'hooks/useDocumentTitle'
 import { getErrorInformations } from 'utils/error/errorUtils'
 
 export function ErrorComponent(props: {
   error: unknown
+  reset?: () => void
   redirectTo: 'home' | 'portal' | 'visualizeForm' | undefined
 }) {
-  const { error, redirectTo } = props
-
+  const { error, redirectTo, reset } = props
+  const navigate = useNavigate()
   const { title, subtitle, paragraph, code } = getErrorInformations(error)
 
   useDocumentTitle(title)
@@ -39,7 +41,11 @@ export function ErrorComponent(props: {
                   case 'portal':
                     return { href: import.meta.env.VITE_PORTAIL_URL }
                   case 'visualizeForm':
-                    return { to: '/visualize' }
+                    return {
+                      onClick: () => {
+                        navigate({ to: '/visualize' }).then(reset)
+                      },
+                    }
                   default:
                     return {}
                 }

diff --git a/src/pages/Visualize/route.tsx b/src/pages/Visualize/route.tsx
@@ -32,7 +32,6 @@ export const visualizeRoute = createRoute({
   }) => {
     //TODO get name (Filière d'Enquête) in metadata
     document.title = "Visualisation | Filière d'Enquête"
-
     if (!sourceUrl) {
       return
     }
@@ -55,7 +54,7 @@ export const visualizeRoute = createRoute({
       }
     )
   },
-  errorComponent: ({ error }) => {
-    return <ErrorComponent error={error} redirectTo="visualizeForm" />
-  },
+  errorComponent: ({ error, reset }) => (
+    <ErrorComponent error={error} reset={reset} redirectTo="visualizeForm" />
+  ),
 })