useData

aphp · Dec 19, 2024 · 9daf672 · 9daf672
1 parent 0e61f84
commit 9daf672
Show file tree

Hide file tree

Showing 14 changed files with 176 additions and 96 deletions.
diff --git a/src/components/PatientsBoard/SavedFiltersSection/EditSavedFilter.tsx b/src/components/PatientsBoard/SavedFiltersSection/EditSavedFilter.tsx
@@ -8,7 +8,8 @@ import {
   vitalStatusesOptions,
   SearchCriterias,
   searchByListPatients,
-  SearchByTypes
+  SearchByTypes,
+  Filters
 } from 'types/searchCriterias'
 import { SelectedFilter } from 'hooks/filters/useSavedFilters'
 import Select from 'components/ui/Searchbar/Select'
@@ -19,18 +20,12 @@ type EditSavedFilterProps = {
   deidentified: boolean
   readonly?: boolean
   open: boolean
-  criteria: SelectedFilter<DynamicFilters>
+  criteria: SelectedFilter<Filters>
   disabled?: boolean
-  onEdit: (name: string, newSearchCriterias: SearchCriterias<DynamicFilters>, deidentified: boolean) => void
+  onEdit: (name: string, newSearchCriterias: SearchCriterias<Filters>, deidentified: boolean) => void
   onClose: () => void
 }
 
-type DynamicFilters = {
-  [key: string]: string[]
-}
-
-export type DynamicSelectedFilter = SelectedFilter<DynamicFilters>
-
 const EditSavedFilter = <T,>({
   deidentified,
   criteria,
@@ -44,15 +39,15 @@ const EditSavedFilter = <T,>({
     handleSubmit,
     reset,
     formState: { isDirty, errors, isValid }
-  } = useForm<DynamicSelectedFilter>({
+  } = useForm<SelectedFilter<Filters>>({
     defaultValues: criteria,
     mode: 'onChange',
     reValidateMode: 'onChange'
   })
 
   useEffect(() => {
     reset(criteria)
-  }, [criteria, reset])
+  }, [criteria])
 
   return (
     <Modal

diff --git a/src/components/PatientsBoard/SavedFiltersSection/SaveFilterAction.tsx b/src/components/PatientsBoard/SavedFiltersSection/SaveFilterAction.tsx
@@ -11,7 +11,7 @@ type SaveFilterActionProps = {
   onSubmit: (name: string) => void
 }
 
-const SaveFilterAction = ({ disabled = false, error, onSubmit }: SaveFilterActionProps) => {
+const SaveFilterAction = ({ disabled = false, onSubmit }: SaveFilterActionProps) => {
   const [toggleModal, setToggleModal] = useState(false)
   const {
     control,
@@ -27,10 +27,6 @@ const SaveFilterAction = ({ disabled = false, error, onSubmit }: SaveFilterActio
     reset({ name: '' })
   }, [toggleModal])
 
-  useEffect(() => {
-    console.log('test save name', errors.name, isValid, errors)
-  }, [isValid])
-
   return (
     <>
       <Tooltip title="" /*title={maintenanceIsActive ? "Ce bouton est desactivé en fonction d'une maintenance." : ''}*/>
@@ -81,7 +77,7 @@ const SaveFilterAction = ({ disabled = false, error, onSubmit }: SaveFilterActio
               {...field}
               label="Nom :"
               placeholder="Choisir un nom compris entre 2 et 50 caractères"
-              errorMessage={isDirty && errors.name?.message}
+              errorMessage={isDirty ? errors.name?.message : ''}
             />
           )}
         />

diff --git a/src/components/PatientsBoard/SavedFiltersSection/SavedFilters.tsx b/src/components/PatientsBoard/SavedFiltersSection/SavedFilters.tsx
@@ -6,7 +6,7 @@ import { Item } from 'components/ui/List/ListItem'
 import { DeleteOutline, Edit, SavedSearch, Visibility } from '@mui/icons-material'
 import { SelectedFilter } from 'hooks/filters/useSavedFilters'
 import { Filters, SearchCriterias } from 'types/searchCriterias'
-import EditSavedFilter, { DynamicSelectedFilter } from './EditSavedFilter'
+import EditSavedFilter from './EditSavedFilter'
 
 type SavedFiltersProps = {
   deidentified: boolean
@@ -105,7 +105,10 @@ const SavedFilters = ({
         width="250px"
         open={toggleDeleteModal}
         onClose={() => setToggleDeleteModal(false)}
-        onSubmit={() => onDelete(selectedItems)}
+        onSubmit={() => {
+          onDelete(selectedItems)
+          setToggleDeleteModal(false)
+        }}
       >
         <Typography sx={{ color: '#00000099' }} fontWeight={600} fontSize={14}>
           Êtes-vous sur de vouloir supprimer les éléments sélectionnés ?
@@ -116,7 +119,7 @@ const SavedFilters = ({
         <EditSavedFilter
           open={toggleDisplayModal}
           readonly={disabled}
-          criteria={selectedFilter! as DynamicSelectedFilter}
+          criteria={selectedFilter!}
           onEdit={(name, filters, deidentified) => {
             onEdit(name, filters, deidentified)
             setToggleDisplayModal(false)

diff --git a/src/components/PatientsBoard/SavedFiltersSection/index.tsx b/src/components/PatientsBoard/SavedFiltersSection/index.tsx
@@ -5,6 +5,7 @@ import { Filters, PatientsFilters, SearchCriterias } from 'types/searchCriterias
 import { ResourceType } from 'types/requestCriterias'
 import { useSavedFilters } from 'hooks/filters/useSavedFilters'
 import SavedFilters from './SavedFilters'
+import { FetchStatus } from 'types'
 
 type SavedFiltersSectionProps = {
   deidentified: boolean
@@ -16,9 +17,9 @@ type SavedFiltersSectionProps = {
 const SavedFiltersSection = ({ deidentified, criterias, canSave, onSelect }: SavedFiltersSectionProps) => {
   const {
     allSavedFilters,
-    savedFiltersErrors,
+    fetchStatus,
     selectedSavedFilter,
-    methods: { next, postSavedFilter, deleteSavedFilters, patchSavedFilter, selectFilter, resetSavedFilterError }
+    methods: { next, postSavedFilter, deleteSavedFilters, patchSavedFilter, selectFilter, resetFetchStatus }
   } = useSavedFilters<PatientsFilters>(ResourceType.PATIENT)
 
   const asListItems = useMemo(
@@ -38,14 +39,18 @@ const SavedFiltersSection = ({ deidentified, criterias, canSave, onSelect }: Sav
           />
         </Grid>
       )}
-      <Snackbar
-        open={savedFiltersErrors.isError}
-        onClose={() => resetSavedFilterError()}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        autoHideDuration={6000}
-      >
-        <Alert severity="error">{savedFiltersErrors.errorMessage}</Alert>
-      </Snackbar>
+      {fetchStatus && (
+        <Snackbar
+          open={fetchStatus !== null}
+          onClose={() => resetFetchStatus()}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          autoHideDuration={6000}
+        >
+          <Alert severity={fetchStatus?.status === FetchStatus.SUCCESS ? 'success' : 'error'}>
+            {fetchStatus?.message}
+          </Alert>
+        </Snackbar>
+      )}
       <Grid item xs={3}>
         {asListItems.length > 0 && (
           <SavedFilters

diff --git a/src/components/PatientsBoard/SearchSection/FilterAction.tsx b/src/components/PatientsBoard/SearchSection/FilterAction.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import CheckboxGroup from 'components/ui/Inputs/CheckboxGroup'
 import DurationRange from 'components/ui/Inputs/DurationRange'
 import Modal from 'components/ui/Modal'
 import { FilterKeys, Filters, genderOptions, vitalStatusesOptions } from 'types/searchCriterias'
 import FilterList from 'assets/icones/filter.svg?react'
 import { Button } from '@mui/material'
+import { Controller, useForm } from 'react-hook-form'
 
 type FilterActionProps = {
   filters: Filters
@@ -13,15 +14,22 @@ type FilterActionProps = {
 }
 
 const FilterAction = ({ filters, deidentified, onSubmit }: FilterActionProps) => {
-  /*const {
-    inputs,
-    inputs: { genders, vitalStatuses, birthdatesRanges },
-    changeFormError,
-    changeInput,
-    hasErrors
-  } = useForm(filters)*/
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isDirty, errors, isValid }
+  } = useForm<Filters>({
+    defaultValues: filters,
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
   const [toggleModal, setToggleModal] = useState(false)
 
+  useEffect(() => {
+    reset(filters)
+  }, [filters])
+
   return (
     <>
       <Button
@@ -33,37 +41,40 @@ const FilterAction = ({ filters, deidentified, onSubmit }: FilterActionProps) =>
       >
         Filtrer
       </Button>
-      {/*<Modal
+      <Modal
         title="Filtrer par :"
         open={toggleModal}
+        readonly={!isDirty}
         color="secondary"
-        isError={hasErrors}
+        isError={!isValid}
         onClose={() => setToggleModal(false)}
-        onSubmit={() => {
-          onSubmit(inputs)
+        onSubmit={handleSubmit((data) => {
+          onSubmit(data)
           setToggleModal(false)
-        }}
+        })}
       >
-        <CheckboxGroup
-          value={genders}
-          label="Genre :"
-          options={genderOptions}
-          onChange={(value) => changeInput(FilterKeys.GENDERS, value)}
-        />
-        <CheckboxGroup
-          value={vitalStatuses}
-          label="Statut vital :"
-          options={vitalStatusesOptions}
-          onChange={(value) => changeInput(FilterKeys.VITAL_STATUSES, value)}
-        />
-        <DurationRange
+        {FilterKeys.GENDERS in filters && (
+          <Controller
+            name={FilterKeys.GENDERS}
+            control={control}
+            render={({ field }) => <CheckboxGroup {...field} label="Genre :" options={genderOptions} />}
+          />
+        )}
+        {FilterKeys.VITAL_STATUSES in filters && (
+          <Controller
+            name={FilterKeys.VITAL_STATUSES}
+            control={control}
+            render={({ field }) => <CheckboxGroup {...field} label="Statut vital :" options={vitalStatusesOptions} />}
+          />
+        )}
+        {/*<DurationRange
           value={birthdatesRanges}
           label="Âge :"
           deidentified={deidentified ?? false}
           onChange={(value) => changeInput(FilterKeys.BIRTHDATES, value)}
           onError={changeFormError}
-        />
-      </Modal>*/}
+      />*/}
+      </Modal>
     </>
   )
 }

diff --git a/src/components/PatientsBoard/SearchSection/index.tsx b/src/components/PatientsBoard/SearchSection/index.tsx
@@ -11,7 +11,6 @@ type SearchSectionProps = {
 }
 
 const SearchSection = ({ deidentified, criterias, onSearch }: SearchSectionProps) => {
-
   return (
     <Grid container justifyContent="space-between">
       <Grid container item xs={8}>

diff --git a/src/components/PatientsBoard/index.tsx b/src/components/PatientsBoard/index.tsx
@@ -3,13 +3,16 @@ import SearchSection from './SearchSection'
 import SavedFiltersSection from './SavedFiltersSection'
 import CriteriasSection from './CriteriasSection'
 import { usePatientBoard } from './usePatientsBoard'
+import { useData } from './useData'
+import { ResourceType } from 'types/requestCriterias'
 
 type PatientsBoardProps = {
   deidentified: boolean | null
 }
 
 const PatientsBoard = ({ deidentified }: PatientsBoardProps) => {
   const { criterias, searchCriterias, onSaveSearchCriterias, removeFilter } = usePatientBoard()
+  const { data, loadingStatus } = useData(ResourceType.PATIENT, searchCriterias, 0)
 
   return (
     <Grid container gap="25px">

diff --git a/src/components/PatientsBoard/useData.ts b/src/components/PatientsBoard/useData.ts
@@ -0,0 +1,36 @@
+import { CanceledError } from 'axios'
+import { useEffect, useState } from 'react'
+import servicesCohorts from 'services/aphp/serviceCohorts'
+import { LoadingStatus } from 'types'
+import { ResourceType } from 'types/requestCriterias'
+import { Filters, SearchCriterias } from 'types/searchCriterias'
+
+export const useData = (type: ResourceType, searchCriterias: SearchCriterias<Filters>, page: number) => {
+  const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.IDDLE)
+  const [data, setData] = useState<any | null>(null)
+
+  const fetchData = async (searchCriterias: SearchCriterias<Filters>, page: number) => {
+    try {
+      setLoadingStatus(LoadingStatus.FETCHING)
+      const fetcher = servicesCohorts.getPatientBoardFetcher(type)
+      const results = await fetcher({ page, searchCriterias })
+      setData(results)
+      setLoadingStatus(LoadingStatus.SUCCESS)
+    } catch (error) {
+      if (error instanceof CanceledError) {
+        setLoadingStatus(LoadingStatus.FETCHING)
+      }
+      setLoadingStatus(LoadingStatus.SUCCESS)
+    }
+  }
+
+  useEffect(() => {
+    const fetch = async () => await fetchData(searchCriterias, page)
+     fetch()
+  }, [searchCriterias, page])
+
+  return {
+    data,
+    loadingStatus
+  }
+}
diff --git a/src/components/PatientsBoard/usePatientsBoard.ts b/src/components/PatientsBoard/usePatientsBoard.ts
@@ -11,14 +11,19 @@ export const usePatientBoard = () => {
     return filters ? selectFiltersAsArray(filters) : []
   }, [filters])
 
+  const searchCriterias = useMemo(
+    () => ({ orderBy, searchBy, searchInput, filters }),
+    [orderBy, searchBy, searchInput, filters]
+  )
+
   const onSaveSearchCriterias = ({ searchBy, searchInput, filters }: SearchCriterias<Filters>) => {
     if (searchBy) changeSearchBy(searchBy)
     if (searchInput !== undefined) changeSearchInput(searchInput)
     if (filters) addFilters(filters)
   }
 
   return {
-    searchCriterias: { orderBy, searchBy, searchInput, filters },
+    searchCriterias,
     criterias,
     onSaveSearchCriterias,
     removeFilter