add save on logout

src/components/Orchestrator/Orchestrator.tsx

@@ -26,6 +26,7 @@ import { useRefSync } from 'hooks/useRefSync'
 import { isSequencePage } from './utils/sequence'
 import { scrollToFirstError } from './utils/scrollToFirstError'
 import { isObjectEmpty } from 'utils/isObjectEmpty'
+import { useAddPreLogoutAction } from 'utils/prelogout'
 
 export type OrchestratorProps = OrchestratorProps.Common &
   (OrchestratorProps.Visualize | OrchestratorProps.Collect)
@@ -158,13 +159,26 @@ export function Orchestrator(props: OrchestratorProps) {
     })
   })
 
+  useAddPreLogoutAction(() => {
+    if (mode !== 'collect') return
+
+    const { updateDataAndStateData } = props
+
+    const data = getChangedData()
+
+    updateDataAndStateData({
+      stateData: getCurrentStateData(),
+      data: isObjectEmpty(data.COLLECTED ?? {}) ? undefined : data.COLLECTED,
+      onSuccess: resetChangedData,
+    })
+  })
   // Persist data and stateData when page change in "collect" mode
   useUpdateEffect(() => {
     if (mode !== 'collect') return
     const { updateDataAndStateData } = props
 
     const data = getChangedData()
-    
+
     updateDataAndStateData({
       stateData: getCurrentStateData(),
       data: isObjectEmpty(data.COLLECTED ?? {}) ? undefined : data.COLLECTED,

src/hooks/useEvent.ts

@@ -0,0 +1,19 @@
+import { useRef, useState } from "react";
+
+/**
+ * https://stackoverflow.com/questions/65890278/why-cant-usecallback-always-return-the-same-ref
+ * https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
+ **/
+export function useEvent<T extends ((...args: any[]) => unknown) | undefined | null>(
+    callback: NonNullable<T>
+): T {
+    const callbackRef = useRef<typeof callback>(null as any);
+
+    callbackRef.current = callback;
+
+    return useState(
+        () =>
+            (...args: Parameters<Exclude<T, undefined | null>>) =>
+                callbackRef.current(...args)
+    )[0] as T;
+}

src/hooks/useUpdateEffect.ts

@@ -1,15 +1,14 @@
 import { useEffect, useRef } from 'react'
 
 function useFirstMountState(): boolean {
-  const isFirst = useRef(true)
-
-  if (isFirst.current) {
-    isFirst.current = false
+  const isFirstRef = useRef(true)
 
+  if (isFirstRef.current) {
+    isFirstRef.current = false
     return true
   }
 
-  return isFirst.current
+  return isFirstRef.current
 }
 
 export const useUpdateEffect: typeof useEffect = (effect, deps) => {

src/router/Layout/Header.tsx

@@ -4,6 +4,7 @@ import logoInsee from 'assets/logo-insee.png'
 import { headerFooterDisplayItem } from '@codegouvfr/react-dsfr/Display'
 import { Badge } from '@codegouvfr/react-dsfr/Badge'
 import { useLogoutUrl } from 'hooks/useLogoutUrl'
+import { executePreLogoutActions } from 'utils/prelogout'
 
 export function Header() {
   const { isUserLoggedIn, logout } = useOidc()
@@ -38,11 +39,13 @@ export function Header() {
               {
                 iconId: 'ri-account-box-line',
                 buttonProps: {
-                  onClick: () =>
+                  onClick: async () => {
+                    await executePreLogoutActions()
                     logout({
                       redirectTo: 'specific url',
                       url: logoutUrl,
-                    }),
+                    })
+                  },
                 },
                 text: 'Se déconnecter',
               } as const,

src/utils/prelogout.ts

@@ -0,0 +1,20 @@
+import { useEvent } from 'hooks/useEvent'
+import { useEffect } from 'react'
+
+const actions = new Set<() => Promise<void> | void>()
+
+export async function executePreLogoutActions() {
+  for (const action of actions) {
+    await action()
+  }
+}
+
+export function useAddPreLogoutAction(
+  action: () => Promise<void> | void
+): void {
+  const stableAction = useEvent(action)
+  useEffect(() => {
+    actions.add(stableAction)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}