feat: replace href by navigate for SPA

aphp · May 25, 2023 · 3c1706b · 3c1706b
1 parent 8953b64
commit 3c1706b
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/MyProjects/ProjectTable/RequestRow/RequestRow.tsx b/src/components/MyProjects/ProjectTable/RequestRow/RequestRow.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import moment from 'moment'
 
 import { Checkbox, Collapse, IconButton, Link, Table, TableBody, TableCell, TableRow, Tooltip } from '@mui/material'
@@ -28,6 +29,7 @@ const RequestRow: React.FC<RequestRowProps> = ({ row, cohortsList, selectedReque
   const [open, setOpen] = React.useState(false)
   const classes = useStyles()
   const dispatch = useAppDispatch()
+  const navigate = useNavigate()
 
   const { meState } = useAppSelector<{
     meState: MeState
@@ -80,11 +82,11 @@ const RequestRow: React.FC<RequestRowProps> = ({ row, cohortsList, selectedReque
           </TableCell>
           <TableCell className={classes.tdName}>
             {row?.shared_by?.displayed_name ? (
-              <Link href={`/cohort/new/${row.uuid}`} underline="hover">
+              <Link onClick={() => navigate(`/cohort/new/${row.uuid}`)} underline="hover">
                 {`${row.name} - Envoyée par : ${row?.shared_by?.firstname} ${row?.shared_by?.lastname?.toUpperCase()}`}
               </Link>
             ) : (
-              <Link href={`/cohort/new/${row.uuid}`} underline="hover">
+              <Link onClick={() => navigate(`/cohort/new/${row.uuid}`)} underline="hover">
                 {row.name}
               </Link>
             )}

diff --git a/src/components/MyProjects/ProjectTable/VersionRow/VersionRow.tsx b/src/components/MyProjects/ProjectTable/VersionRow/VersionRow.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import moment from 'moment'
 
 import {
@@ -38,6 +39,8 @@ import { JobStatus } from '../../../../utils/constants'
 const VersionRow: React.FC<{ requestId: string; cohortsList: Cohort[] }> = ({ requestId, cohortsList }) => {
   const classes = useStyles()
   const dispatch = useAppDispatch()
+  const navigate = useNavigate()
+
   const [selectedExportableCohort, setSelectedExportableCohort] = React.useState<null | string>(null)
 
   const cohorts: Cohort[] =
@@ -120,7 +123,7 @@ const VersionRow: React.FC<{ requestId: string; cohortsList: Cohort[] }> = ({ re
                 <TableRow key={historyRow.uuid}>
                   <TableCell className={classes.tdName}>
                     {historyRow.fhir_group_id ? (
-                      <Link href={`/cohort/${historyRow.fhir_group_id}`} underline="hover">
+                      <Link onClick={() => navigate(`/cohort/${historyRow.fhir_group_id}`)} underline="hover">
                         {historyRow.name}
                       </Link>
                     ) : (
@@ -158,7 +161,7 @@ const VersionRow: React.FC<{ requestId: string; cohortsList: Cohort[] }> = ({ re
                   <TableCell align="center">
                     <Link
                       className={classes.versionLabel}
-                      href={`/cohort/new/${requestId}/${historyRow.request_query_snapshot}`}
+                      onClick={() => navigate(`/cohort/new/${requestId}/${historyRow.request_query_snapshot}`)}
                     >
                       {historyRow.request_query_snapshot?.split('-')[0]}
                     </Link>
@@ -193,7 +196,10 @@ const VersionRow: React.FC<{ requestId: string; cohortsList: Cohort[] }> = ({ re
                   Aucune cohorte n'est liée à cette requête
                   <br />
                   Veuillez vous rendre sur la page de création en{' '}
-                  <Link style={{ display: 'contents', fontWeight: 900 }} href={`/cohort/new/${requestId}`}>
+                  <Link
+                    style={{ display: 'contents', fontWeight: 900 }}
+                    onClick={() => navigate(`/cohort/new/${requestId}`)}
+                  >
                     cliquant ici
                   </Link>{' '}
                   et appuyer sur le bouton "Créer la cohorte"

diff --git a/src/components/Routes/LeftSideBar/LeftSideBar.tsx b/src/components/Routes/LeftSideBar/LeftSideBar.tsx
@@ -112,7 +112,7 @@ const LeftSideBar: React.FC<{ open?: boolean }> = (props) => {
           }}
         >
           <div className={classes.toolbar}>
-            <Link href="/home">
+            <Link onClick={() => navigate('/home')}>
               <img src={cohortLogo} alt="Cohort360 logo" className={open ? undefined : classes.hide} />
             </Link>
 
@@ -346,7 +346,7 @@ const LeftSideBar: React.FC<{ open?: boolean }> = (props) => {
                   <ListItem>
                     <Link
                       id="patientResearch-link"
-                      href="/patient-search"
+                      onClick={() => navigate('/patient-search')}
                       underline="hover"
                       className={classes.nestedTitle}
                     >
@@ -355,12 +355,22 @@ const LeftSideBar: React.FC<{ open?: boolean }> = (props) => {
                   </ListItem>
                 )}
                 <ListItem>
-                  <Link id="myPatient-link" href="/my-patients" underline="hover" className={classes.nestedTitle}>
+                  <Link
+                    id="myPatient-link"
+                    onClick={() => navigate('/my-patients')}
+                    underline="hover"
+                    className={classes.nestedTitle}
+                  >
                     Tous mes patients
                   </Link>
                 </ListItem>
                 <ListItem>
-                  <Link id="scoopeTree-link" href="/perimeter" underline="hover" className={classes.nestedTitle}>
+                  <Link
+                    id="scoopeTree-link"
+                    onClick={() => navigate('/perimeter')}
+                    underline="hover"
+                    className={classes.nestedTitle}
+                  >
                     Explorer un périmètre
                   </Link>
                 </ListItem>
@@ -387,12 +397,22 @@ const LeftSideBar: React.FC<{ open?: boolean }> = (props) => {
             >
               <List id="research-collapse">
                 <ListItem>
-                  <Link id="savedResearch-link" href="/my-cohorts" underline="hover" className={classes.nestedTitle}>
+                  <Link
+                    id="savedResearch-link"
+                    onClick={() => navigate('/my-cohorts')}
+                    underline="hover"
+                    className={classes.nestedTitle}
+                  >
                     Mes cohortes
                   </Link>
                 </ListItem>
                 <ListItem>
-                  <Link id="myProject-link" href="/my-requests" underline="hover" className={classes.nestedTitle}>
+                  <Link
+                    id="myProject-link"
+                    onClick={() => navigate('/my-requests')}
+                    underline="hover"
+                    className={classes.nestedTitle}
+                  >
                     Mes requêtes
                   </Link>
                 </ListItem>

diff --git a/src/components/Welcome/PatientsCard/PatientsCard.jsx b/src/components/Welcome/PatientsCard/PatientsCard.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router'
 
 import Button from '@mui/material/Button'
 import Divider from '@mui/material/Divider'
@@ -15,6 +16,7 @@ const PatientSearchCard = () => {
   const [patientNb, setPatientNb] = useState(0)
   const [loading, setLoading] = useState(true)
   const classes = useStyles()
+  const navigate = useNavigate()
 
   useEffect(() => {
     const _fetchPatientsCount = async () => {
@@ -46,7 +48,7 @@ const PatientSearchCard = () => {
       <Grid container direction="column" justifyContent="space-evenly" style={{ height: '100%', marginTop: 8 }}>
         <Button
           id="patients-research-button"
-          href="/my-patients"
+          onClick={() => navigate('/my-patients')}
           size="small"
           variant="contained"
           disableElevation
@@ -56,7 +58,7 @@ const PatientSearchCard = () => {
         </Button>
         <Button
           id="scope-research-button"
-          href="/perimeter"
+          onClick={() => navigate('/perimeter')}
           size="small"
           variant="contained"
           disableElevation

diff --git a/src/views/PageNotFound/PageNotFound.tsx b/src/views/PageNotFound/PageNotFound.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import { Button, Grid, Link, Typography } from '@mui/material'
 
@@ -11,10 +12,11 @@ import useStyles from './styles'
 
 const PageNotFound: React.FC = () => {
   const classes = useStyles()
+  const navigate = useNavigate()
 
   return (
     <>
-      <Link href="/home" className={classes.logo}>
+      <Link onClick={() => navigate('/home')} className={classes.logo}>
         <img src={cohortLogo} alt="Cohort360 logo" style={{ height: 50 }} />
       </Link>
       <Grid container direction="column" className={classes.megaContainer} alignItems="center">
@@ -29,7 +31,7 @@ const PageNotFound: React.FC = () => {
             Si vous pensez qu'il s'agit d'une erreur, vous pouvez contacter le support Cohort360 à l'adresse suivante :
             dsi-id-recherche-support-cohort360@aphp.fr.
           </Typography>
-          <Button href="/home" variant="contained" className={classes.button}>
+          <Button onClick={() => navigate('/home')} variant="contained" className={classes.button}>
             Accueil
           </Button>
         </Grid>