feat: added tabs to url - Ref gestion-de-projet#2766

src/__tests__/utilsFunction/paginationUtils.test.ts

@@ -1,4 +1,4 @@
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
+import { checkIfPageAvailable, cleanSearchParams, getCleanGroupId, handlePageError } from 'utils/paginationUtils'
 import { vi } from 'vitest'
 
 describe('checkIfPageAvailable', () => {
@@ -45,3 +45,63 @@ describe('handlePageError', () => {
     expect(dispatch).toHaveBeenCalled()
   })
 })
+
+describe('test of getCleanGroupId function', () => {
+  it('should return no groupId if perimeter is empty or null', () => {
+    const groupId = ''
+    expect(getCleanGroupId(groupId)).toBeUndefined()
+
+    const groupId2 = null
+    expect(getCleanGroupId(groupId2)).toBeUndefined()
+  })
+  it('should return no groupId if perimeter ids make no sense', () => {
+    const groupId = ',,,,'
+    expect(getCleanGroupId(groupId)).toBeUndefined()
+
+    const groupId2 = ';;;;'
+    expect(getCleanGroupId(groupId2)).toBeUndefined()
+
+    const groupId3 = '-,--'
+    expect(getCleanGroupId(groupId3)).toBeUndefined()
+  })
+  it('should only return numbers separated by commas if groupId is a mess', () => {
+    const groupId = '12345,,nimp,;,8zhbea,,'
+    expect(getCleanGroupId(groupId)).toBe('12345')
+  })
+  it('should return the right ids separated by commas', () => {
+    const groupId = '123,456'
+    expect(getCleanGroupId(groupId)).toBe('123,456')
+  })
+  it('should not return commas that are at the beginning or at the end', () => {
+    const groupId = ',123,456,'
+    expect(getCleanGroupId(groupId)).toBe('123,456')
+  })
+})
+
+describe('test of cleanSearchParams function', () => {
+  it('should return the right url params', () => {
+    const page = '3'
+    const tabId = 'MedicationRequest'
+    const groupId = '123456'
+
+    expect(cleanSearchParams({ page, tabId, groupId })).toStrictEqual({
+      groupId: '123456',
+      page: '3',
+      tabId: 'MedicationRequest'
+    })
+  })
+  it('should not return groupId in the params if groupId makes no sense or is undefined', () => {
+    const page = '1'
+    const groupId2 = 'rijfn236e53:;a'
+    const groupId3 = ',,,'
+
+    expect(cleanSearchParams({ page })).toStrictEqual({ page: '1' })
+    expect(cleanSearchParams({ page, groupId: groupId2 })).toStrictEqual({ page: '1' })
+    expect(cleanSearchParams({ page, groupId: groupId3 })).toStrictEqual({ page: '1' })
+  })
+  it('should not return tabId in the params if tabId is undefined', () => {
+    const page = '1'
+
+    expect(cleanSearchParams({ page })).toStrictEqual({ page: '1' })
+  })
+})

src/__tests__/utilsFunction/tabsUtils.test.ts

@@ -0,0 +1,51 @@
+import { PMSILabel } from 'types/patient'
+import { MedicationLabel, ResourceType } from 'types/requestCriterias'
+import { getMedicationTab, getPMSITab } from 'utils/tabsUtils'
+
+const pmsiDefaultTab = { label: PMSILabel.DIAGNOSTIC, id: ResourceType.CONDITION }
+
+describe('test of getPMSITab', () => {
+  it('should return default tabId is empty', () => {
+    const tabId = ''
+    expect(getPMSITab(tabId)).toStrictEqual(pmsiDefaultTab)
+  })
+  it('should return default tabId doesnt exist in PMSITabs', () => {
+    const tabId = 'whatever'
+    expect(getPMSITab(tabId)).toStrictEqual(pmsiDefaultTab)
+  })
+  it('should return the tab matching to the id given', () => {
+    const tabId = ResourceType.PROCEDURE
+    expect(getPMSITab(tabId)).toStrictEqual({ label: PMSILabel.CCAM, id: ResourceType.PROCEDURE })
+  })
+  it('should return the tab matching to the id given even if the casing is wrong', () => {
+    const tabId = ResourceType.PROCEDURE.toLocaleUpperCase()
+    expect(getPMSITab(tabId)).toStrictEqual({ label: PMSILabel.CCAM, id: ResourceType.PROCEDURE })
+  })
+})
+
+const medicationDefaultTab = { label: MedicationLabel.PRESCRIPTION, id: ResourceType.MEDICATION_REQUEST }
+
+describe('test of getMedicationTab', () => {
+  it('should return default tabId is empty', () => {
+    const tabId = ''
+    expect(getMedicationTab(tabId)).toStrictEqual(medicationDefaultTab)
+  })
+  it('should return default tabId doesnt exist in MedicationTabs', () => {
+    const tabId = 'test'
+    expect(getMedicationTab(tabId)).toStrictEqual(medicationDefaultTab)
+  })
+  it('should return the tab matching to the id given', () => {
+    const tabId = ResourceType.MEDICATION_ADMINISTRATION
+    expect(getMedicationTab(tabId)).toStrictEqual({
+      label: MedicationLabel.ADMINISTRATION,
+      id: ResourceType.MEDICATION_ADMINISTRATION
+    })
+  })
+  it('should return the tab matching to the id given even if the casing is wrong', () => {
+    const tabId = ResourceType.MEDICATION_ADMINISTRATION.toLocaleUpperCase()
+    expect(getMedicationTab(tabId)).toStrictEqual({
+      label: MedicationLabel.ADMINISTRATION,
+      id: ResourceType.MEDICATION_ADMINISTRATION
+    })
+  })
+})

src/components/CohortsTable/index.tsx

@@ -106,7 +106,12 @@ const ResearchTable: React.FC<ResearchTableProps> = ({
       row.request_job_status === CohortJobStatus.FAILED
     )
       return
-    navigate(`/cohort/${row.group_id}`)
+
+    const searchParams = new URLSearchParams()
+    if (row.group_id) {
+      searchParams.set('groupId', row.group_id)
+    }
+    navigate(`/cohort?${searchParams.toString()}`)
   }
 
   const handleClickOpenDialog = () => {

src/components/Dashboard/BiologyList/index.tsx

@@ -36,19 +36,19 @@ import {
   fetchLoincCodes as fetchLoincCodesApi,
   fetchAnabioCodes as fetchAnabioCodesApi
 } from 'services/aphp/serviceBiology'
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
+import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
 
 type BiologyListProps = {
-  groupId?: string
   deidentified?: boolean
 }
 
-const BiologyList = ({ groupId, deidentified }: BiologyListProps) => {
+const BiologyList = ({ deidentified }: BiologyListProps) => {
   const theme = useTheme()
   const isMd = useMediaQuery(theme.breakpoints.down('lg'))
   const dispatch = useAppDispatch()
   const [searchParams, setSearchParams] = useSearchParams()
   const getPageParam = searchParams.get('page')
+  const groupId = searchParams.get('groupId') ?? undefined
 
   const [toggleFilterByModal, setToggleFilterByModal] = useState(false)
   const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false)
@@ -203,7 +203,8 @@ const BiologyList = ({ groupId, deidentified }: BiologyListProps) => {
   ])
 
   useEffect(() => {
-    setSearchParams({ page: page.toString() })
+    setSearchParams(cleanSearchParams({ page: page.toString(), groupId: groupId }))
+
     handlePageError(page, setPage, dispatch, setLoadingStatus)
   }, [page])
 

src/components/Dashboard/Documents/Documents.tsx

@@ -43,19 +43,19 @@ import EncounterStatusFilter from 'components/Filters/EncounterStatusFilter'
 import { SourceType } from 'types/scope'
 import { Hierarchy } from 'types/hierarchy'
 import { useSearchParams } from 'react-router-dom'
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
+import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
 import { CanceledError } from 'axios'
 import { DocumentReference } from 'fhir/r4'
 
 type DocumentsProps = {
-  groupId?: string
   deidentified: boolean
 }
 
-const Documents: React.FC<DocumentsProps> = ({ groupId, deidentified }) => {
+const Documents: React.FC<DocumentsProps> = ({ deidentified }) => {
   const dispatch = useAppDispatch()
   const [searchParams, setSearchParams] = useSearchParams()
   const getPageParam = searchParams.get('page')
+  const groupId = searchParams.get('groupId') ?? undefined
 
   const [toggleFilterByModal, setToggleFilterByModal] = useState(false)
   const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false)
@@ -234,7 +234,7 @@ const Documents: React.FC<DocumentsProps> = ({ groupId, deidentified }) => {
   ])
 
   useEffect(() => {
-    setSearchParams({ page: page.toString() })
+    setSearchParams(cleanSearchParams({ page: page.toString(), groupId: groupId }))
 
     handlePageError(page, setPage, dispatch, setLoadingStatus)
   }, [page])

src/components/Dashboard/FormsList/index.tsx

@@ -22,19 +22,17 @@ import { Questionnaire } from 'fhir/r4'
 import MaternityFormFilter from 'components/Filters/MaternityFormFilter'
 import DataTableForms from 'components/DataTable/DataTableForms'
 import { useSearchParams } from 'react-router-dom'
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
+import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
 import Chip from 'components/ui/Chip'
 
-type FormsListProps = {
-  groupId?: string
-}
-
-const FormsList = ({ groupId }: FormsListProps) => {
+const FormsList = () => {
   const theme = useTheme()
   const isSm = useMediaQuery(theme.breakpoints.down('md'))
   const dispatch = useAppDispatch()
   const [searchParams, setSearchParams] = useSearchParams()
   const pageParam = searchParams.get('page')
+  const groupId = searchParams.get('groupId') ?? undefined
+
   const [toggleFilterByModal, setToggleFilterByModal] = useState(false)
   const [encounterStatusList, setEncounterStatusList] = useState<Hierarchy<any, any>[]>([])
   const [questionnaires, setQuestionnaires] = useState<Questionnaire[]>([])
@@ -142,7 +140,8 @@ const FormsList = ({ groupId }: FormsListProps) => {
   }, [orderBy, formName, startDate, endDate, executiveUnits, encounterStatus, ipp, groupId])
 
   useEffect(() => {
-    setSearchParams({ page: page.toString() })
+    setSearchParams(cleanSearchParams({ page: page.toString(), groupId: groupId }))
+
     handlePageError(page, setPage, dispatch, setLoadingStatus)
   }, [page])
 

src/components/Dashboard/ImagingList/index.tsx

@@ -36,18 +36,18 @@ import { SourceType } from 'types/scope'
 import { Hierarchy } from 'types/hierarchy'
 import { AppConfig } from 'config'
 import { useSearchParams } from 'react-router-dom'
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
+import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
 
 type ImagingListProps = {
-  groupId?: string
   deidentified?: boolean
 }
 
-const ImagingList = ({ groupId, deidentified }: ImagingListProps) => {
+const ImagingList = ({ deidentified }: ImagingListProps) => {
   const appConfig = useContext(AppConfig)
   const dispatch = useAppDispatch()
   const [searchParams, setSearchParams] = useSearchParams()
   const getPageParam = searchParams.get('page')
+  const groupId = searchParams.get('groupId') ?? undefined
 
   const [searchResults, setSearchResults] = useState<ResultsType>({ nb: 0, total: 0, label: 'résultats' })
   const [patientsResult, setPatientsResult] = useState<ResultsType>({ nb: 0, total: 0, label: 'patient(s)' })
@@ -184,7 +184,7 @@ const ImagingList = ({ groupId, deidentified }: ImagingListProps) => {
   }, [ipp, nda, startDate, endDate, orderBy, searchInput, executiveUnits, modality, groupId, encounterStatus])
 
   useEffect(() => {
-    setSearchParams({ page: page.toString() })
+    setSearchParams(cleanSearchParams({ page: page.toString(), groupId: groupId }))
 
     handlePageError(page, setPage, dispatch, setLoadingStatus)
   }, [page])

src/components/Dashboard/MedicationList/index.tsx

@@ -34,15 +34,15 @@ import useSearchCriterias, { initMedSearchCriterias } from 'reducers/searchCrite
 import { cancelPendingRequest } from 'utils/abortController'
 import { selectFiltersAsArray } from 'utils/filters'
 import { mapToLabel } from 'mappers/pmsi'
+import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
+import { getMedicationTab } from 'utils/tabsUtils'
 import { useSearchParams } from 'react-router-dom'
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
 
 type MedicationListProps = {
-  groupId?: string
   deidentified?: boolean
 }
 
-const MedicationList = ({ groupId, deidentified }: MedicationListProps) => {
+const MedicationList = ({ deidentified }: MedicationListProps) => {
   const theme = useTheme()
   const isSm = useMediaQuery(theme.breakpoints.down('md'))
   const [toggleFilterByModal, setToggleFilterByModal] = useState(false)
@@ -55,11 +55,11 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => {
   const dispatch = useAppDispatch()
   const [searchParams, setSearchParams] = useSearchParams()
   const getPageParam = searchParams.get('page')
+  const groupId = searchParams.get('groupId') ?? undefined
+  const tabId = searchParams.get('tabId') ?? undefined
+  const existingParams = Object.fromEntries(searchParams.entries())
 
-  const [selectedTab, setSelectedTab] = useState<MedicationTab>({
-    id: ResourceType.MEDICATION_REQUEST,
-    label: MedicationLabel.PRESCRIPTION
-  })
+  const [selectedTab, setSelectedTab] = useState<MedicationTab>(getMedicationTab(tabId))
 
   const [page, setPage] = useState(getPageParam ? parseInt(getPageParam, 10) : 1)
   const {
@@ -228,11 +228,9 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => {
   ])
 
   useEffect(() => {
-    handlePageError(page, setPage, dispatch, setLoadingStatus)
+    setSearchParams(cleanSearchParams({ page: page.toString(), tabId: selectedTab.id, groupId: groupId }))
 
-    const updatedSearchParams = new URLSearchParams(searchParams)
-    updatedSearchParams.set('page', page.toString())
-    setSearchParams(updatedSearchParams)
+    handlePageError(page, setPage, dispatch, setLoadingStatus)
   }, [page])
 
   useEffect(() => {
@@ -300,6 +298,7 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => {
               value: TabType<ResourceType.MEDICATION_ADMINISTRATION | ResourceType.MEDICATION_REQUEST, MedicationLabel>
             ) => {
               setSelectedTab(value)
+              setSearchParams({ ...existingParams, tabId: value.id })
             }}
           />
         </Grid>

src/components/Dashboard/PMSIList/index.tsx

@@ -39,14 +39,14 @@ import { cancelPendingRequest } from 'utils/abortController'
 import { selectFiltersAsArray } from 'utils/filters'
 import { mapToLabel, mapToSourceType } from 'mappers/pmsi'
 import { useSearchParams } from 'react-router-dom'
-import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils'
+import { checkIfPageAvailable, cleanSearchParams, handlePageError } from 'utils/paginationUtils'
+import { getPMSITab } from 'utils/tabsUtils'
 
 type PMSIListProps = {
-  groupId?: string
   deidentified?: boolean
 }
 
-const PMSIList = ({ groupId, deidentified }: PMSIListProps) => {
+const PMSIList = ({ deidentified }: PMSIListProps) => {
   const [toggleFilterByModal, setToggleFilterByModal] = useState(false)
   const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false)
   const [toggleSavedFiltersModal, setToggleSavedFiltersModal] = useState(false)
@@ -57,11 +57,11 @@ const PMSIList = ({ groupId, deidentified }: PMSIListProps) => {
   const dispatch = useAppDispatch()
   const [searchParams, setSearchParams] = useSearchParams()
   const getPageParam = searchParams.get('page')
+  const groupId = searchParams.get('groupId') ?? undefined
+  const tabId = searchParams.get('tabId') ?? undefined
+  const existingParams = Object.fromEntries(searchParams.entries())
 
-  const [selectedTab, setSelectedTab] = useState<PmsiTab>({
-    id: ResourceType.CONDITION,
-    label: PMSILabel.DIAGNOSTIC
-  })
+  const [selectedTab, setSelectedTab] = useState<PmsiTab>(getPMSITab(tabId))
   const sourceType = mapToSourceType(selectedTab.id)
 
   const [page, setPage] = useState(getPageParam ? parseInt(getPageParam, 10) : 1)
@@ -215,9 +215,7 @@ const PMSIList = ({ groupId, deidentified }: PMSIListProps) => {
   ])
 
   useEffect(() => {
-    const updatedSearchParams = new URLSearchParams(searchParams)
-    updatedSearchParams.set('page', page.toString())
-    setSearchParams(updatedSearchParams)
+    setSearchParams(cleanSearchParams({ page: page.toString(), tabId: selectedTab.id, groupId: groupId }))
 
     handlePageError(page, setPage, dispatch, setLoadingStatus)
   }, [page])
@@ -308,6 +306,7 @@ const PMSIList = ({ groupId, deidentified }: PMSIListProps) => {
                 active={selectedTab}
                 onchange={(value: PmsiTab) => {
                   setSelectedTab(value)
+                  setSearchParams({ ...existingParams, tabId: value.id })
                 }}
               />
             </Grid>