feat: add cells data on leaf state update events (#254)

Author: Grafikart

src/components/orchestrator/Orchestrator.tsx

@@ -232,20 +232,24 @@ export function Orchestrator(props: OrchestratorProps) {
     initialInterrogation?.stateData?.date,
   )
 
+  const getCurrentArticulationState = () => {
+    // @ts-expect-error source has articulation
+    return getArticulationState(source, getData(false))
+  }
+
   const { interrogation, updateInterrogation } = useInterrogation(
     initialInterrogation,
     {
       getArticulationState: () => {
         if (!hasArticulation) {
           return { items: [] }
         }
-        // @ts-expect-error source has articulation
-        return getArticulationState(source, getData(false))
+        return getCurrentArticulationState()
       },
       getMultimode: getMultimode,
     },
   )
-  useEvents(interrogation)
+  useEvents(interrogation, getCurrentArticulationState, pageTag, getChangedData)
 
   /** For validating the questionnaire, it tries to put a `VALIDATED` stateData with the `endPage` */
   const validateQuestionnaire = async () => {

src/components/orchestrator/hooks/useEvents.ts

@@ -1,18 +1,26 @@
+import type { getArticulationState } from '@inseefr/lunatic'
+
 import { usePostEvents } from '@/api/10-events'
 import {
   LeafStatesUpdatedEventType,
   MultimodeMovedEventType,
   QuestionnaireEventType,
 } from '@/models/api'
 import type { Interrogation } from '@/models/interrogation'
+import type { LunaticPageTag } from '@/models/lunaticType.ts'
 import { hasMultimode } from '@/utils/env.ts'
 
 import { useCallbackOnValueChange } from './useCallbackOnValueChange.ts'
 
 /**
- * Trigger events when specific operation happens during interrogation
+ * Trigger events when specific operations happens during interrogation
  */
-export function useEvents(interrogation: Interrogation) {
+export function useEvents(
+  interrogation: Interrogation,
+  getLeafStatesData: () => ReturnType<typeof getArticulationState>,
+  pageTag: LunaticPageTag,
+  getChangedData: (reset: boolean) => Record<string, unknown>,
+) {
   // Disable events api if multimode is not enabled
   if (!hasMultimode()) {
     return
@@ -49,18 +57,48 @@ export function useEvents(interrogation: Interrogation) {
       if (!leafStates || !interrogation.id) {
         return
       }
+
+      // Inject cell data inside the leafStates
+      const data = getLeafStatesData()
+      const leafStatesWithCells = leafStates.map((leafState, index) => {
+        return {
+          ...leafState,
+          cells: data.items[index].cells,
+        }
+      })
+
       mutateAsync({
         data: {
           type: LeafStatesUpdatedEventType.LEAF_STATES_UPDATED,
           payload: {
             interrogationId: interrogation.id,
-            leafStates,
+            leafStates: leafStatesWithCells,
           },
         },
       })
     },
   )
 
+  // Send an event when data change between pages
+  useCallbackOnValueChange(pageTag, () => {
+    // No data where changed between pages
+    const changedData = getChangedData(true) as {
+      COLLECTED: Record<string, unknown>
+    }
+    if (Object.keys(changedData.COLLECTED).length === 0 || !interrogation.id) {
+      return
+    }
+
+    mutateAsync({
+      data: {
+        type: `QUESTIONNAIRE_UPDATED` as QuestionnaireEventType,
+        payload: {
+          interrogationId: interrogation.id,
+        },
+      },
+    })
+  })
+
   // Send an event when the interrogation state changes
   useCallbackOnValueChange(interrogation.stateData?.state, (state) => {
     if (!state || !interrogation.id) {

src/models/api/questionnaireEventType.ts

@@ -14,4 +14,5 @@ export const QuestionnaireEventType = {
   QUESTIONNAIRE_INIT: 'QUESTIONNAIRE_INIT',
   QUESTIONNAIRE_VALIDATED: 'QUESTIONNAIRE_VALIDATED',
   QUESTIONNAIRE_COMPLETED: 'QUESTIONNAIRE_COMPLETED',
+  QUESTIONNAIRE_UPDATED: 'QUESTIONNAIRE_UPDATED',
 } as const