Merge branch 'develop' of github.com:opencrvs/opencrvs-core into ocrv…

…s-event-v2-7919

packages/client/src/v2-events/.eslintrc.js

@@ -11,6 +11,7 @@
 module.exports = {
   extends: '../../../../.eslintrc.events.js',
   rules: {
+    'react/jsx-key': 1,
     'react/jsx-no-literals': 1,
     'react/destructuring-assignment': 1,
     'react/jsx-sort-props': [

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

@@ -16,33 +16,36 @@ import {
   useTypedSearchParams
 } from 'react-router-typesafe-routes/dom'
 import { v4 as uuid } from 'uuid'
-import { ActionType, getCurrentEventState } from '@opencrvs/commons/client'
+import { ActionType } 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 {
+  useEventFormData,
+  useSubscribeEventFormData
+} 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, goToHome } = useEventFormNavigation()
+  const [event] = events.getEvent.useSuspenseQuery(eventId)
+
+  const { eventId: formEventId, formValues } = useSubscribeEventFormData()
 
-  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) {
-      setFormValues(event.id, currentState.data)
+      setFormValues(event.id, formValues)
     }
-  }, [currentState.data, event.id, formEventId, setFormValues])
+  }, [event.id, setFormValues, formEventId, formValues])
 
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type
@@ -81,7 +84,6 @@ export function Pages() {
    */
   useEffect(() => {
     const hasTemporaryId = event.id === event.transactionId
-
     if (eventId !== event.id && !hasTemporaryId) {
       navigate(
         ROUTES.V2.EVENTS.DECLARE.buildPath({
@@ -98,16 +100,18 @@ export function Pages() {
       onSaveAndExit={() => {
         events.actions.declare.mutate({
           eventId: event.id,
-          data: form,
+          data: formValues,
           transactionId: uuid(),
           draft: true
         })
+
         goToHome()
       }}
     >
       {modal}
       <PagesComponent
         eventId={eventId}
+        form={formValues}
         formPages={formPages}
         pageId={currentPageId}
         showReviewButton={searchParams.from === 'review'}

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

@@ -22,15 +22,18 @@ import { Pages as PagesComponent } from '@client/v2-events/features/events/compo
 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 {
+  useEventFormData,
+  useSubscribeEventFormData
+} 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 { eventId: formEventId, formValues: form } = useSubscribeEventFormData()
+
   const navigate = useNavigate()
   const events = useEvents()
   const { modal, goToHome } = useEventFormNavigation()
@@ -91,6 +94,7 @@ export function Pages() {
       {modal}
       <PagesComponent
         eventId={eventId}
+        form={form}
         formPages={formPages}
         pageId={currentPageId}
         showReviewButton={searchParams.from === 'review'}

packages/client/src/v2-events/features/events/components/Pages.tsx

@@ -13,10 +13,10 @@ import React, { useEffect } from 'react'
 import { useIntl } from 'react-intl'
 import { FormWizard } from '@opencrvs/components'
 import { FormPage } from '@opencrvs/commons'
+import { ActionFormData } from '@opencrvs/commons/client'
 import { FormFieldGenerator } from '@client/v2-events/components/forms/FormFieldGenerator'
 import { usePagination } from '@client/v2-events/hooks/usePagination'
 import { useEventFormData } from '@client/v2-events/features/events/useEventFormData'
-import { getInitialValues } from '@client/v2-events/components/forms/utils'
 
 /**
  *
@@ -27,21 +27,21 @@ export function Pages({
   pageId,
   showReviewButton,
   formPages,
+  form,
   onFormPageChange,
   onSubmit
 }: {
   eventId: string
   pageId: string
+  form: ActionFormData
   showReviewButton?: boolean
   formPages: FormPage[]
   onFormPageChange: (nextPageId: string) => void
   onSubmit: () => void
 }) {
   const intl = useIntl()
 
-  const getFormValues = useEventFormData((state) => state.getFormValues)
   const setFormValues = useEventFormData((state) => state.setFormValues)
-
   const pageIdx = formPages.findIndex((p) => p.id === pageId)
 
   const {
@@ -51,7 +51,6 @@ export function Pages({
     total
   } = usePagination(formPages.length, Math.max(pageIdx, 0))
   const page = formPages[currentPage]
-  const formValues = getFormValues(eventId, getInitialValues(page.fields))
 
   useEffect(() => {
     const pageChanged = formPages[currentPage].id !== pageId
@@ -73,9 +72,9 @@ export function Pages({
     >
       <FormFieldGenerator
         fields={page.fields}
-        formData={formValues}
+        formData={form}
         id="locationForm"
-        initialValues={formValues}
+        initialValues={form}
         setAllFieldsDirty={false}
         onChange={(values) => {
           setFormValues(eventId, values)

packages/client/src/v2-events/features/events/useEventFormData.ts

@@ -11,6 +11,7 @@
 
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
+import { useEffect, useRef } from 'react'
 import { ActionFormData } from '@opencrvs/commons/client'
 import { storage } from '@client/storage'
 
@@ -65,3 +66,33 @@ export const useEventFormData = create<EventFormData>()(
     }
   )
 )
+/**
+ * Based on https://github.com/pmndrs/zustand?tab=readme-ov-file#transient-updates-for-often-occurring-state-changes
+ *
+ * Access state through subscription-pattern to avoid re-renders on every state change
+ */
+export const useSubscribeEventFormData = () => {
+  const stateEventIdRef = useRef(useEventFormData.getState().eventId)
+  const stateFormRef = useRef(useEventFormData.getState().formValues)
+
+  useEffect(
+    () =>
+      useEventFormData.subscribe(
+        (state) => (stateEventIdRef.current = state.eventId)
+      ),
+    []
+  )
+
+  useEffect(
+    () =>
+      useEventFormData.subscribe(
+        (state) => (stateFormRef.current = state.formValues)
+      ),
+    []
+  )
+
+  return {
+    eventId: stateEventIdRef.current,
+    formValues: stateFormRef.current
+  }
+}

packages/client/src/v2-events/layouts/form/FormHeader.tsx

@@ -108,7 +108,7 @@ export function FormHeader({
             {intl.formatMessage(messages.exitButton)}
           </Button>
           <ToggleMenu
-            id={`event-menu`}
+            id={'event-menu'}
             menuItems={
               isUndeclaredDraft(event)
                 ? [
@@ -145,7 +145,7 @@ export function FormHeader({
             <Icon name="X" />
           </Button>
           <ToggleMenu
-            id={`event-menu`}
+            id={'event-menu'}
             menuItems={[
               {
                 label: 'Delete declaration',

packages/components/src/ToggleMenu/ToggleMenu.tsx

@@ -46,7 +46,7 @@ export const ToggleMenu = ({
       <DropdownMenu.Content>
         {menuHeader && <DropdownMenu.Label>{menuHeader}</DropdownMenu.Label>}
         {menuItems.map((item) => (
-          <DropdownMenu.Item onClick={item.handler}>
+          <DropdownMenu.Item onClick={item.handler} key={item.label}>
             {item.icon} {item.label}
           </DropdownMenu.Item>
         ))}

packages/events/src/service/indexing/indexing.ts

@@ -23,7 +23,7 @@ import {
   getEventIndexName,
   getOrCreateClient
 } from '@events/storage/elasticsearch'
-import { getAllFields } from '@opencrvs/commons'
+import { getAllFields, logger } from '@opencrvs/commons'
 import { Transform } from 'stream'
 import { z } from 'zod'
 
@@ -42,6 +42,7 @@ export async function ensureIndexExists(eventConfiguration: EventConfig) {
   const hasEventsIndex = await esClient.indices.exists({
     index: indexName
   })
+
   if (!hasEventsIndex) {
     await createIndex(indexName, getAllFields(eventConfiguration))
   }
@@ -75,6 +76,7 @@ export async function createIndex(
       }
     }
   })
+
   return client.indices.putAlias({
     index: indexName,
     name: getEventAliasName()
@@ -194,6 +196,9 @@ export async function getIndexedEvents() {
   })
 
   if (!hasEventsIndex) {
+    logger.error(
+      'Event index not created. Sending empty array. Ensure indexing is running.'
+    )
     return []
   }
 

packages/toolkit/build.sh

@@ -17,19 +17,24 @@ npx tsc --build
 
 # Build common events
 npx esbuild src/events/index.ts --bundle --format=cjs --outdir=./dist/events --allow-overwrite --packages=external
-cp -r ../commons/build/dist/common/events/*.d.ts ./dist/events
+mkdir -p ./dist/commons/events
+cp -r ../commons/build/dist/common/events/*.d.ts ./dist/commons/events
 
 # Build common conditionals
 npx esbuild src/conditionals/index.ts --bundle --format=cjs --outdir=./dist/conditionals --allow-overwrite --packages=external
-cp -r ../commons/build/dist/common/conditionals/*.d.ts ./dist/conditionals
+mkdir -p ./dist/commons/conditionals
+cp -r ../commons/build/dist/common/conditionals/*.d.ts ./dist/commons/conditionals
 
 # Build api client
 npx esbuild src/api/index.ts --bundle --format=cjs --outdir=./dist/api --allow-overwrite --packages=external
-cp -r ../events/build/types/router/router.d.ts ./dist/api
+mkdir -p ./dist/commons/api
+cp -r ../events/build/types/router/router.d.ts ./dist/commons/api
 if [[ "$OSTYPE" == "darwin"* ]]; then
-  sed -i '' 's|@opencrvs/events/build/types|.|g' dist/api/index.d.ts
+  sed -i '' 's|@opencrvs/events/build/types|../commons/api|g' dist/api/index.d.ts
+  find dist -type f -exec sed -i '' 's|@opencrvs/commons|../commons|g' {} +
 else
-  sed -i 's|@opencrvs/events/build/types|.|g' dist/api/index.d.ts
+  sed -i 's|@opencrvs/events/build/types|../commons/api|g' dist/api/index.d.ts
+  find dist -type f -exec sed -i 's|@opencrvs/commons|../commons|g' {} +
 fi
 
 echo "Build completed successfully."

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencrvs/toolkit",
-  "version": "0.0.19-events-ml",
+  "version": "0.0.20-build-toolkit",
   "description": "OpenCRVS toolkit for building country configurations",
   "license": "MPL-2.0",
   "exports": {