Events v2: only return user's own drafts as part of event

packages/client/src/v2-events/features/events/actions/declare/Pages.tsx

@@ -15,25 +15,28 @@ import {
   useTypedParams,
   useTypedSearchParams
 } from 'react-router-typesafe-routes/dom'
+import { v4 as uuid } from 'uuid'
 import { ActionType, getCurrentEventState } from '@opencrvs/commons/client'
 import { useEvents } from '@client/v2-events//features/events/useEvents/useEvents'
 import { Pages as PagesComponent } from '@client/v2-events/features/events/components/Pages'
 import { useEventConfiguration } from '@client/v2-events/features/events/useEventConfiguration'
 import { useEventFormNavigation } from '@client/v2-events/features/events/useEventFormNavigation'
 import { ROUTES } from '@client/v2-events/routes'
 import { useEventFormData } from '@client/v2-events/features/events/useEventFormData'
+import { FormLayout } from '@client/v2-events/layouts/form'
 
 export function Pages() {
   const { eventId, pageId } = useTypedParams(ROUTES.V2.EVENTS.DECLARE.PAGES)
   const [searchParams] = useTypedSearchParams(ROUTES.V2.EVENTS.DECLARE.PAGES)
   const navigate = useNavigate()
   const events = useEvents()
-  const { modal } = useEventFormNavigation()
+  const { modal, goToHome } = useEventFormNavigation()
 
   const formEventId = useEventFormData((state) => state.eventId)
   const setFormValues = useEventFormData((state) => state.setFormValues)
   const [event] = events.getEvent.useSuspenseQuery(eventId)
   const currentState = getCurrentEventState(event)
+  const form = useEventFormData((state) => state.formValues)
 
   useEffect(() => {
     if (formEventId !== event.id) {
@@ -89,7 +92,18 @@ export function Pages() {
   }, [event.id, event.transactionId, eventId, navigate])
 
   return (
-    <>
+    <FormLayout
+      route={ROUTES.V2.EVENTS.DECLARE}
+      onSaveAndExit={() => {
+        events.actions.declare.mutate({
+          eventId: event.id,
+          data: form,
+          transactionId: uuid(),
+          draft: true
+        })
+        goToHome()
+      }}
+    >
       {modal}
       <PagesComponent
         eventId={eventId}
@@ -108,6 +122,6 @@ export function Pages() {
           navigate(ROUTES.V2.EVENTS.DECLARE.REVIEW.buildPath({ eventId }))
         }
       />
-    </>
+    </FormLayout>
   )
 }

packages/client/src/v2-events/features/events/actions/declare/Review.tsx

@@ -29,6 +29,7 @@ import { useEvents } from '@client/v2-events/features/events/useEvents/useEvents
 import { useModal } from '@client/v2-events/hooks/useModal'
 import { ROUTES } from '@client/v2-events/routes'
 import { Review as ReviewComponent } from '@client/v2-events/features/events/components/Review'
+import { FormLayout } from '@client/v2-events/layouts/form'
 
 const messages = defineMessages({
   reviewActionTitle: {
@@ -155,7 +156,7 @@ export function Review() {
       declareMutation.mutate({
         eventId: event.id,
         data: form,
-        transactionId: `tmp-${uuid()}`
+        transactionId: uuid()
       })
 
       goToHome()
@@ -183,7 +184,18 @@ export function Review() {
   }
 
   return (
-    <>
+    <FormLayout
+      route={ROUTES.V2.EVENTS.DECLARE}
+      onSaveAndExit={() => {
+        events.actions.declare.mutate({
+          eventId: event.id,
+          data: form,
+          transactionId: uuid(),
+          draft: true
+        })
+        goToHome()
+      }}
+    >
       <ReviewComponent.Body
         eventConfig={config}
         formConfig={formConfigs[0]}
@@ -207,7 +219,7 @@ export function Review() {
         />
       </ReviewComponent.Body>
       {modal}
-    </>
+    </FormLayout>
   )
 }
 

packages/client/src/v2-events/features/events/actions/register/Pages.tsx

@@ -15,22 +15,25 @@ import {
   useTypedParams,
   useTypedSearchParams
 } from 'react-router-typesafe-routes/dom'
+import { v4 as uuid } from 'uuid'
 import { ActionType, getCurrentEventState } from '@opencrvs/commons/client'
 import { useEvents } from '@client/v2-events//features/events/useEvents/useEvents'
 import { Pages as PagesComponent } from '@client/v2-events/features/events/components/Pages'
 import { useEventConfiguration } from '@client/v2-events/features/events/useEventConfiguration'
 import { useEventFormNavigation } from '@client/v2-events/features/events/useEventFormNavigation'
 import { ROUTES } from '@client/v2-events/routes'
 import { useEventFormData } from '@client/v2-events/features/events/useEventFormData'
+import { FormLayout } from '@client/v2-events/layouts/form'
 
 export function Pages() {
   const { eventId, pageId } = useTypedParams(ROUTES.V2.EVENTS.REGISTER.PAGES)
   const [searchParams] = useTypedSearchParams(ROUTES.V2.EVENTS.REGISTER.PAGES)
   const setFormValues = useEventFormData((state) => state.setFormValues)
   const formEventId = useEventFormData((state) => state.eventId)
+  const form = useEventFormData((state) => state.formValues)
   const navigate = useNavigate()
   const events = useEvents()
-  const { modal } = useEventFormNavigation()
+  const { modal, goToHome } = useEventFormNavigation()
 
   const [event] = events.getEvent.useSuspenseQuery(eventId)
   const currentState = getCurrentEventState(event)
@@ -72,7 +75,18 @@ export function Pages() {
   }, [pageId, currentPageId, navigate, eventId])
 
   return (
-    <>
+    <FormLayout
+      route={ROUTES.V2.EVENTS.REGISTER}
+      onSaveAndExit={() => {
+        events.actions.register.mutate({
+          eventId: event.id,
+          data: form,
+          transactionId: uuid(),
+          draft: true
+        })
+        goToHome()
+      }}
+    >
       {modal}
       <PagesComponent
         eventId={eventId}
@@ -91,6 +105,6 @@ export function Pages() {
           navigate(ROUTES.V2.EVENTS.REGISTER.REVIEW.buildPath({ eventId }))
         }
       />
-    </>
+    </FormLayout>
   )
 }

packages/client/src/v2-events/features/events/actions/register/Review.tsx

@@ -22,6 +22,7 @@ import { useModal } from '@client/v2-events/hooks/useModal'
 import { useEventFormNavigation } from '@client/v2-events/features/events/useEventFormNavigation'
 import { useEventConfiguration } from '@client/v2-events/features/events/useEventConfiguration'
 import { useEventFormData } from '@client/v2-events/features/events/useEventFormData'
+import { FormLayout } from '@client/v2-events/layouts/form'
 
 const messages = defineMessages({
   registerActionTitle: {
@@ -116,22 +117,35 @@ export function Review() {
   }
 
   return (
-    <ReviewComponent.Body
-      eventConfig={config}
-      form={form}
-      formConfig={formConfigs[0]}
-      title=""
-      onEdit={handleEdit}
+    <FormLayout
+      route={ROUTES.V2.EVENTS.REGISTER}
+      onSaveAndExit={() => {
+        events.actions.register.mutate({
+          eventId: event.id,
+          data: form,
+          transactionId: uuid(),
+          draft: true
+        })
+        goToHome()
+      }}
     >
-      <ReviewComponent.Actions
-        messages={{
-          title: messages.registerActionTitle,
-          description: messages.registerActionDescription,
-          onConfirm: messages.registerActionDeclare
-        }}
-        onConfirm={handleRegistration}
-      />
-      {modal}
-    </ReviewComponent.Body>
+      <ReviewComponent.Body
+        eventConfig={config}
+        form={form}
+        formConfig={formConfigs[0]}
+        title=""
+        onEdit={handleEdit}
+      >
+        <ReviewComponent.Actions
+          messages={{
+            title: messages.registerActionTitle,
+            description: messages.registerActionDescription,
+            onConfirm: messages.registerActionDeclare
+          }}
+          onConfirm={handleRegistration}
+        />
+        {modal}
+      </ReviewComponent.Body>
+    </FormLayout>
   )
 }

packages/client/src/v2-events/features/events/useEvents/procedures/action.ts

@@ -13,7 +13,7 @@ import { Mutation as TanstackMutation } from '@tanstack/query-core'
 import { hashKey, useMutation } from '@tanstack/react-query'
 import { getMutationKey, getQueryKey } from '@trpc/react-query'
 import {
-  DraftActionInput,
+  ActionInput,
   EventDocument,
   getCurrentEventState
 } from '@opencrvs/commons/client'
@@ -48,14 +48,12 @@ function waitUntilEventIsCreated<T extends { eventId: string }, R>(
 
 type Mutation =
   | typeof api.event.actions.declare
-  | typeof api.event.actions.draft
   | typeof api.event.actions.notify
   | typeof api.event.actions.register
   | typeof api.event.actions.validate
 
 type Procedure =
   | typeof utils.event.actions.declare
-  | typeof utils.event.actions.draft
   | typeof utils.event.actions.notify
   | typeof utils.event.actions.register
   | typeof utils.event.actions.validate
@@ -69,35 +67,46 @@ type Procedure =
  * The draft stage in the middle will be cancelled. This is to prevent race conditions
  * between when the backend receives the draft when it receives the declare action.
  */
-function cancelOngoingDraftRequests(eventId: string) {
+function cancelOngoingDraftRequests({ eventId, draft }: ActionInput) {
   const mutationCache = queryClient.getMutationCache()
 
   const isDraftMutation = (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mutation: TanstackMutation<unknown, Error, any, unknown>
-  ): mutation is TanstackMutation<unknown, Error, DraftActionInput, unknown> =>
-    mutation.options.mutationKey
-      ? hashKey(mutation.options.mutationKey) ===
-        hashKey(getQueryKey(api.event.actions.draft))
-      : false
+  ): mutation is TanstackMutation<unknown, Error, ActionInput, unknown> => {
+    const mutationKey = mutation.options.mutationKey
+    if (!mutationKey || !mutationKey[0]) {
+      return false
+    }
+    return ['event', 'actions'].every((key) => mutationKey.flat().includes(key))
+  }
 
-  mutationCache
+  const draftMutationsForThisEvent = mutationCache
     .getAll()
     .filter(
       (mutation) =>
         isDraftMutation(mutation) &&
-        mutation.state.variables?.eventId === eventId
+        mutation.state.variables?.eventId === eventId &&
+        mutation.state.variables.draft
     )
-    .forEach((mutation) => {
+
+  if (!draft) {
+    draftMutationsForThisEvent.forEach((mutation) => {
       mutationCache.remove(mutation)
     })
+  } else {
+    // Keep the last draft mutation as it's this current request
+    draftMutationsForThisEvent.slice(0, -1).forEach((mutation) => {
+      mutationCache.remove(mutation)
+    })
+  }
 }
 
-function updateEventOptimistically<
-  T extends { eventId: string; data: ActionFormData }
->(actionType: 'DECLARE' | 'DRAFT') {
+function updateEventOptimistically<T extends ActionInput>(
+  actionType: 'DECLARE'
+) {
   return (variables: T) => {
-    cancelOngoingDraftRequests(variables.eventId)
+    cancelOngoingDraftRequests(variables)
 
     const localEvent = utils.event.get.getData(variables.eventId)
     if (!localEvent) {
@@ -110,6 +119,7 @@ function updateEventOptimistically<
         {
           type: actionType,
           data: variables.data,
+          draft: false,
           createdAt: new Date().toISOString(),
           createdBy: '@todo',
           createdAtLocation: '@todo'
@@ -130,15 +140,7 @@ utils.event.actions.declare.setMutationDefaults(({ canonicalMutationFn }) => ({
   retryDelay: 10000,
   mutationFn: waitUntilEventIsCreated(canonicalMutationFn),
   onSuccess: updateLocalEvent,
-  onMutate: updateEventOptimistically('DECLARE')
-}))
-
-utils.event.actions.draft.setMutationDefaults(({ canonicalMutationFn }) => ({
-  retry: true,
-  retryDelay: 10000,
-  mutationFn: waitUntilEventIsCreated(canonicalMutationFn),
-  onMutate: updateEventOptimistically('DRAFT'),
-  onSuccess: updateLocalEvent
+  onMutate: (params) => updateEventOptimistically('DECLARE')(params)
 }))
 
 utils.event.actions.register.setMutationDefaults(({ canonicalMutationFn }) => ({

packages/client/src/v2-events/features/events/useEvents/procedures/create.ts

@@ -28,6 +28,7 @@ utils.event.create.setMutationDefaults(({ canonicalMutationFn }) => ({
           createdAt: new Date().toISOString(),
           createdBy: 'offline',
           createdAtLocation: 'TODO',
+          draft: false,
           data: {}
         } satisfies CreatedAction
       ]

packages/client/src/v2-events/features/events/useEvents/useEvents.test.tsx

@@ -60,6 +60,7 @@ const createHandler = trpcHandler(async ({ request }) => {
         createdAt: new Date('2024-12-05T18:37:31.295Z').toISOString(),
         createdBy: '6733309827b97e6483877188',
         createdAtLocation: 'ae5be1bb-6c50-4389-a72d-4c78d19ec176',
+        draft: false,
         data: {}
       }
     ]