Added react-hook rules to eslint

packages/client/eslint.config.js

@@ -40,7 +40,8 @@ module.exports = [
     'plugin:@typescript-eslint/recommended',
     'plugin:import/recommended',
     'plugin:prettier/recommended',
-    'plugin:jsx-a11y/recommended'
+    'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended'
   ),
   {
     plugins: {

packages/client/src/v2-events/components/DownloadButton.tsx

@@ -99,8 +99,8 @@ export function DownloadButton({
   )
   const assignmentStatus = getAssignmentStatus(event, authentication.sub)
 
-  const eventDocument = getEvent.findFromCache(event.id)
-  const isAssignMutationFetching = actions.assignment.assign.isAssigning(
+  const eventDocument = getEvent.useFindEventFromCache(event.id)
+  const isAssignMutationFetching = actions.assignment.assign.useIsAssigning(
     event.id
   )
 

packages/client/src/v2-events/components/forms/FormFieldGenerator/FormFieldGenerator.tsx

@@ -135,6 +135,9 @@ export const FormFieldGenerator: React.FC<FormFieldGeneratorProps> = React.memo(
         {(formikProps) => {
           const { touched } = formikProps
 
+          // Because react Hook "useEffect" cannot be called inside a callback,
+          // we disable the rule for this line
+          // eslint-disable-next-line react-hooks/rules-of-hooks
           useEffect(() => {
             /**
              * Because 'enableReinitialize' prop is set to 'true' above, whenever initialValue changes,

packages/client/src/v2-events/features/drafts/useDrafts.ts

@@ -12,20 +12,14 @@
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { create } from 'zustand'
 import { createJSONStorage, persist } from 'zustand/middleware'
-import {
-  ActionDocument,
-  deepDropNulls,
-  Draft,
-  UUID
-} from '@opencrvs/commons/client'
+import { deepDropNulls, Draft, UUID } from '@opencrvs/commons/client'
 import { storage } from '@client/storage'
 import {
   clearPendingDraftCreationRequests,
   findLocalEventDocument,
   refetchDraftsList,
   refetchAllSearchQueries,
-  setDraftData,
-  updateLocalEventIndex
+  setDraftData
 } from '@client/v2-events/features/events/useEvents/api'
 import {
   createEventActionMutationFn,
@@ -182,7 +176,7 @@ export function useDrafts() {
   const localDraft = localDraftStore((drafts) => drafts.draft)
   const createDraft = useCreateDraft()
 
-  function getAllRemoteDrafts(
+  function useRemoteDrafts(
     additionalOptions: QueryOptions<typeof trpc.event.draft.list> = {}
   ): Draft[] {
     // Skip the queryFn defined by tRPC and use the one defined above
@@ -238,12 +232,12 @@ export function useDrafts() {
         status: localDraft.action.status
       })
     },
-    getAllRemoteDrafts,
-    getRemoteDraftByEventId: function useDraftList(
+    useRemoteDrafts,
+    useGetRemoteDraftByEventId: (
       eventId: string,
       additionalOptions: QueryOptions<typeof trpc.event.draft.list> = {}
-    ): Draft | undefined {
-      const eventDrafts = getAllRemoteDrafts(additionalOptions).filter(
+    ): Draft | undefined => {
+      const eventDrafts = useRemoteDrafts(additionalOptions).filter(
         (draft) => draft.eventId === eventId
       )
 

packages/client/src/v2-events/features/events/ReadOnlyView.tsx

@@ -36,7 +36,7 @@ import { removeCachedFiles } from '../files/cache'
 function ReadonlyView() {
   const { eventId } = useTypedParams(ROUTES.V2.EVENTS.DECLARE.REVIEW)
   const events = useEvents()
-  const event = events.getEvent.viewEvent(eventId)
+  const event = events.getEvent.useViewEvent(eventId)
   const validatorContext = useValidatorContext()
 
   const maybeAuth = useAuthentication()
@@ -45,8 +45,8 @@ function ReadonlyView() {
     'Authentication is not available but is required'
   )
 
-  const { getRemoteDraftByEventId } = useDrafts()
-  const draft = getRemoteDraftByEventId(event.id)
+  const { useGetRemoteDraftByEventId } = useDrafts()
+  const draft = useGetRemoteDraftByEventId(event.id)
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type
   )

packages/client/src/v2-events/features/events/Search/AdvancedSearch.tsx

@@ -25,7 +25,7 @@ import {
 import { useEventConfigurations } from '@client/v2-events/features/events/useEventConfiguration'
 import { TabSearch } from './TabSearch'
 import {
-  checkScopeForEventSearch,
+  useEventSearchScope,
   parseFieldSearchParams,
   deserializeSearchParams
 } from './utils'
@@ -55,6 +55,7 @@ export function AdvancedSearch() {
     deserializeSearchParams(location.search)
   )
 
+  const checkScopeForEventSearch = useEventSearchScope()
   const advancedSearchEvents = allEvents.filter(
     (event) =>
       event.advancedSearch.length > 0 && checkScopeForEventSearch(event.id)
@@ -89,6 +90,16 @@ export function AdvancedSearch() {
 
   const [activeTabId, setActiveTabId] = useState<string>(selectedTabId)
 
+  const handleFormChange = useCallback(
+    (updatedForm: Record<string, FieldValue>) => {
+      setFormValuesByTabId((prev) => ({
+        ...prev,
+        [activeTabId]: updatedForm
+      }))
+    },
+    [activeTabId]
+  )
+
   const currentEvent = allEvents.find((e) => e.id === activeTabId)
   if (!currentEvent) {
     return null
@@ -101,16 +112,6 @@ export function AdvancedSearch() {
     setActiveTabId(tabId)
   }
 
-  const handleFormChange = useCallback(
-    (updatedForm: Record<string, FieldValue>) => {
-      setFormValuesByTabId((prev) => ({
-        ...prev,
-        [activeTabId]: updatedForm
-      }))
-    },
-    [activeTabId]
-  )
-
   return (
     <Content
       size={ContentSize.SMALL}

packages/client/src/v2-events/features/events/Search/SearchResult.tsx

@@ -233,9 +233,9 @@ export const SearchResultComponent = ({
     )
   }
   const { getOutbox } = useEvents()
-  const { getAllRemoteDrafts } = useDrafts()
+  const { useRemoteDrafts } = useDrafts()
   const outbox = getOutbox()
-  const drafts = getAllRemoteDrafts()
+  const drafts = useRemoteDrafts()
 
   const [sortedCol, setSortedCol] = useState<
     (typeof COLUMNS)[keyof typeof COLUMNS]

packages/client/src/v2-events/features/events/Search/utils.ts

@@ -744,15 +744,18 @@ export function buildQuickSearchQuery(
 /**
  * @returns a boolean indicating whether the current user has the scope to search for an event
  */
-export function checkScopeForEventSearch(eventId: string) {
+export function useEventSearchScope() {
   const scopes = useSelector(getScope)
-  const searchScopes = findScope(scopes ?? [], 'search')
+  const checkScopeForEventSearch = (eventId: string) => {
+    const searchScopes = findScope(scopes ?? [], 'search')
 
-  const isEventSearchAllowed =
-    searchScopes &&
-    Object.keys(searchScopes.options).some((id) => eventId === id)
+    const isEventSearchAllowed =
+      searchScopes &&
+      Object.keys(searchScopes.options).some((id) => eventId === id)
 
-  return isEventSearchAllowed
+    return isEventSearchAllowed
+  }
+  return checkScopeForEventSearch
 }
 
 function serializeValue(value: unknown) {

packages/client/src/v2-events/features/events/actions/correct/request/Onboarding/Onboarding.tsx

@@ -46,7 +46,7 @@ export function Onboarding() {
   const annotation = useActionAnnotation((state) => state.getAnnotation())
   const setAnnotation = useActionAnnotation((state) => state.setAnnotation)
 
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const navigate = useNavigate()
   const intl = useIntl()

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

@@ -50,7 +50,7 @@ export function Pages() {
   const events = useEvents()
   const { modal } = useEventFormNavigation()
 
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type

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

@@ -44,7 +44,7 @@ export function Review() {
   const events = useEvents()
   const validatorContext = useValidatorContext()
 
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type

packages/client/src/v2-events/features/events/actions/correct/request/Summary/Summary.tsx

@@ -87,7 +87,7 @@ export function Summary() {
   const intl = useIntl()
 
   const events = useEvents()
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
   const { eventConfiguration } = useEventConfiguration(event.type)
   const eventIndex = getCurrentEventState(event, eventConfiguration)
   const togglePrompt = () => setShowPrompt(!showPrompt)

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

@@ -34,7 +34,7 @@ export function Review() {
   const events = useEvents()
 
   const validatorContext = useValidatorContext()
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type

packages/client/src/v2-events/features/events/actions/correct/review/ReviewCorrection.tsx

@@ -236,7 +236,7 @@ export function ReviewCorrection({
   )
 
   const events = useEvents()
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
   const { isActionAllowed } = useUserAllowedActions(event.type)
   const [modal, openModal] = useModal()
   const navigate = useNavigate()

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

@@ -40,7 +40,7 @@ export function Pages() {
   const { getFormValues, setFormValues } = useEventFormData()
   const formValues = getFormValues()
   const validatorContext = useValidatorContext()
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type

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

@@ -61,7 +61,7 @@ export function Review() {
   const { closeActionView } = useEventFormNavigation()
   const { saveAndExitModal, handleSaveAndExit } = useSaveAndExitModal()
 
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const { eventConfiguration: config } = useEventConfiguration(event.type)
 

packages/client/src/v2-events/features/events/actions/dedup/ReviewDuplicate.tsx

@@ -17,6 +17,7 @@ import styled from 'styled-components'
 import { useNavigate } from 'react-router-dom'
 import {
   ActionType,
+  EventDocument,
   EventIndex,
   getActionReview,
   getCurrentEventState,
@@ -123,33 +124,11 @@ const TopBar = styled.div`
   position: sticky;
   z-index: 1;
 `
-
-function ReviewDuplicate() {
-  const { eventId } = useTypedParams(ROUTES.V2.EVENTS.DECLARE.REVIEW)
-
-  const validatorContext = useValidatorContext()
-
+function ReviewDuplicateLoaded({ event }: { event: EventDocument }) {
   const intl = useIntl()
-  const navigate = useNavigate()
-  const events = useEvents()
-  const event = events.getEvent.findFromCache(eventId).data
-
-  useEffect(() => {
-    if (!event) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `Event with id ${eventId} not found in cache. Redirecting to overview.`
-      )
-      return navigate(ROUTES.V2.EVENTS.OVERVIEW.buildPath({ eventId }))
-    }
-  }, [event, eventId, navigate])
-
-  if (!event) {
-    return <div />
-  }
-
+  const validatorContext = useValidatorContext()
   const [selectedTab, selectTab] = useState<string>(event.trackingId)
-
+  const { formatMessage } = useIntlFormatMessageWithFlattenedParams()
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type
   )
@@ -183,8 +162,6 @@ function ReviewDuplicate() {
   ]
 
   const { title, fields } = getActionReview(configuration, ActionType.READ)
-  const { formatMessage } = useIntlFormatMessageWithFlattenedParams()
-
   const formConfig = getDeclaration(configuration)
 
   return (
@@ -232,4 +209,27 @@ function ReviewDuplicate() {
   )
 }
 
+function ReviewDuplicate() {
+  const navigate = useNavigate()
+  const events = useEvents()
+  const { eventId } = useTypedParams(ROUTES.V2.EVENTS.DECLARE.REVIEW)
+  const { data: event } = events.getEvent.useFindEventFromCache(eventId)
+
+  useEffect(() => {
+    if (!event) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Event with id ${eventId} not found in cache. Redirecting to overview.`
+      )
+      return navigate(ROUTES.V2.EVENTS.OVERVIEW.buildPath({ eventId }))
+    }
+  }, [event, eventId, navigate])
+
+  if (!event) {
+    return <div />
+  }
+
+  return <ReviewDuplicateLoaded event={event} />
+}
+
 export const ReviewDuplicateIndex = withSuspense(ReviewDuplicate)

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

@@ -45,7 +45,7 @@ export function Pages() {
   const { setAnnotation, getAnnotation } = useActionAnnotation()
   const annotation = getAnnotation()
   const events = useEvents()
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type
   )

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

@@ -162,7 +162,7 @@ export function Review() {
   const [modal, openModal] = useModal()
 
   const { getEvent, onlineActions } = useEvents()
-  const fullEvent = getEvent.getFromCache(eventId)
+  const fullEvent = getEvent.useGetEventFromCache(eventId)
 
   const actions = getAcceptedActions(fullEvent)
   const userIds = getUserIdsFromActions(actions, [SystemRole.enum.HEALTH])

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

@@ -42,7 +42,7 @@ export function Pages() {
   const validatorContext = useValidatorContext()
 
   const { modal, closeActionView } = useEventFormNavigation()
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type
   )

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

@@ -71,7 +71,7 @@ export function Review() {
 
   const registerMutation = events.actions.register
 
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
 
   const previousAnnotation = getActionAnnotation({
     event,

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

@@ -44,7 +44,7 @@ export function Pages() {
 
   const validatorContext = useValidatorContext()
 
-  const event = events.getEvent.getFromCache(eventId)
+  const event = events.getEvent.useGetEventFromCache(eventId)
   const { eventConfiguration: configuration } = useEventConfiguration(
     event.type
   )