added react-hook rules to eslint

Author: tareq89

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

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

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

@@ -135,6 +135,7 @@ export const FormFieldGenerator: React.FC<FormFieldGeneratorProps> = React.memo(
         {(formikProps) => {
           const { touched } = formikProps
 
+          // 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

@@ -182,7 +182,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 +238,12 @@ export function useDrafts() {
         status: localDraft.action.status
       })
     },
-    getAllRemoteDrafts,
+    useRemoteDrafts,
     getRemoteDraftByEventId: function useDraftList(
       eventId: string,
       additionalOptions: QueryOptions<typeof trpc.event.draft.list> = {}
     ): Draft | undefined {
-      const eventDrafts = getAllRemoteDrafts(additionalOptions).filter(
+      const eventDrafts = useRemoteDrafts(additionalOptions).filter(
         (draft) => draft.eventId === eventId
       )
 

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/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.findFromCache(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/validate/Review.tsx

@@ -22,7 +22,8 @@ import {
   getActionAnnotation,
   getDeclaration,
   getActionReview,
-  InherentFlags
+  InherentFlags,
+  EventDocument
 } from '@opencrvs/commons/client'
 import { ROUTES } from '@client/v2-events/routes'
 import { useEvents } from '@client/v2-events/features/events/useEvents/useEvents'
@@ -48,57 +49,38 @@ import { useReviewActionConfig } from './useReviewActionConfig'
  *
  * Preview of event to be validated.
  */
-export function Review() {
+function ReviewContent({ event }: { event: EventDocument }) {
+  const navigate = useNavigate()
+  const events = useEvents()
+  const drafts = useDrafts()
   const { eventId } = useTypedParams(ROUTES.V2.EVENTS.VALIDATE)
   const [{ workqueue: slug }] = useTypedSearchParams(
     ROUTES.V2.EVENTS.VALIDATE.REVIEW
   )
-  const events = useEvents()
-  const drafts = useDrafts()
   const [modal, openModal] = useModal()
-  const navigate = useNavigate()
   const { closeActionView } = useEventFormNavigation()
-  const validatorContext = useValidatorContext()
-
-  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 { setAnnotation, getAnnotation } = useActionAnnotation()
 
   const { saveAndExitModal, handleSaveAndExit } = useSaveAndExitModal()
+  const { formatMessage } = useIntlFormatMessageWithFlattenedParams()
+  const getFormValues = useEventFormData((state) => state.getFormValues)
 
   const previousAnnotation = getActionAnnotation({
     event,
     actionType: ActionType.VALIDATE
   })
 
-  const annotation = getAnnotation(previousAnnotation)
-
   const { eventConfiguration: config } = useEventConfiguration(event.type)
 
   const formConfig = getDeclaration(config)
+  const form = getFormValues()
+  const annotation = getAnnotation(previousAnnotation)
   const reviewConfig = getActionReview(config, ActionType.VALIDATE)
-  const { formatMessage } = useIntlFormatMessageWithFlattenedParams()
-
-  const getFormValues = useEventFormData((state) => state.getFormValues)
-
   const currentEventState = getCurrentEventState(event, config)
-  const previousFormValues = currentEventState.declaration
-  const form = getFormValues()
+  const validatorContext = useValidatorContext()
 
+  const previousFormValues = currentEventState.declaration
   const reviewActionConfiguration = useReviewActionConfig({
     formConfig,
     declaration: form,
@@ -245,3 +227,24 @@ export function Review() {
     </FormLayout>
   )
 }
+export function Review() {
+  const navigate = useNavigate()
+  const events = useEvents()
+  const { eventId } = useTypedParams(ROUTES.V2.EVENTS.VALIDATE)
+  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 />
+  }
+
+  return <ReviewContent event={event} />
+}

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

@@ -119,6 +119,13 @@ export const SearchToolbar = () => {
 
   const scopes = useSelector(getScope) ?? []
 
+  useEffect(() => {
+    // Clear the search term when navigating away from the search results page
+    if (location.pathname !== ROUTES.V2.SEARCH.buildPath({})) {
+      setSearchTerm(undefined)
+    }
+  }, [location.pathname])
+
   const hasSearchScope = scopes.some((scope) => scope.startsWith('search'))
   if (!hasSearchScope) {
     return null
@@ -145,13 +152,6 @@ export const SearchToolbar = () => {
     navigate(`${searchUrl}?${serializedParams}`)
   }
 
-  useEffect(() => {
-    // Clear the search term when navigating away from the search results page
-    if (location.pathname !== ROUTES.V2.SEARCH.buildPath({})) {
-      setSearchTerm(undefined)
-    }
-  }, [location.pathname])
-
   return (
     <SearchBox className={'search-tool'}>
       <Wrapper onSubmit={onSearch}>