Upgrade react-router

client/.storybook/preview.jsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { addons } from '@storybook/preview-api';
 import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 import { MantineProvider, useMantineColorScheme } from '@mantine/core';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { theme } from '../src/theme';
 import { ContextProvider } from '../src/Context';

client/package.json

@@ -29,7 +29,7 @@
     "react-dom": "^18.3.1",
     "react-imask": "^7.6.1",
     "react-qrcode-logo": "^3.0.0",
-    "react-router-dom": "^6.28.0"
+    "react-router": "^7.0.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",

client/src/App.jsx

@@ -1,11 +1,5 @@
 import React, { useContext, useEffect } from 'react';
-import {
-  Outlet,
-  Routes,
-  Route,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
+import { Outlet, Routes, Route, useLocation, useNavigate } from 'react-router';
 import { Loader } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import PropTypes from 'prop-types';

client/src/components/Sidebar/SidebarNavSection.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import PropTypes from 'prop-types';
 import { Group, Box, Text, UnstyledButton, Collapse } from '@mantine/core';
 

client/src/hooks/useAuthorization.jsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import Context from '../Context';
 

client/src/main.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';

client/src/pages/admin/pending-users/AdminPendingUsers.jsx

@@ -9,7 +9,7 @@ import {
 import React, { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { IconChevronLeft } from '@tabler/icons-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import classes from './adminPendingUsers.module.css';
 import { UserDataTable } from '../../../components/UsersDataTable/UsersDataTable';

client/src/pages/admin/users/AdminUsers.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { IconSearch } from '@tabler/icons-react';
 import {
   Badge,

client/src/pages/auth/login/LoginForm.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import PropTypes from 'prop-types';
 import {
   TextInput,

client/src/pages/auth/login/login.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { StatusCodes } from 'http-status-codes';
 
 import { useAuthorization } from '../../../hooks/useAuthorization';

client/src/pages/auth/password-reset/passwordReset.jsx

@@ -2,7 +2,7 @@ import { Flex, LoadingOverlay } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
 import React, { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 
 import classes from '../form.module.css';
 import { PasswordResetForm } from './passwordResetForm';

client/src/pages/auth/register/register.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { Flex, Text, Title } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 

client/src/pages/home.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import {
   Box,
   Button,

client/src/pages/notFound/NotFound.jsx

@@ -1,6 +1,6 @@
 import { Container } from '@mantine/core';
-import { useLocation } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router';
 
 /**
  * Patient not found page component

client/src/pages/patients/PatientTableRow.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { Table, Menu, ActionIcon } from '@mantine/core';
 import {

client/src/pages/patients/patient-details/PatientDetails.jsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { StatusCodes } from 'http-status-codes';
 import { humanize } from 'inflection';

client/src/pages/patients/register/PatientRegistration.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { StatusCodes } from 'http-status-codes';
 import { Flex, Button, Modal, Text, Container } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useForm, isNotEmpty } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import LifelineAPI from '../LifelineAPI.js';
 import PatientRegistrationAccordion from './PatientRegistrationAccordion';

client/src/pages/verify/verify.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LoadingOverlay } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { notifications } from '@mantine/notifications';
 /**
  * Email Verification

client/src/stories/AuthLayout/AuthLayout.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import { Image, Text, Title } from '@mantine/core';
 
 import classes from './AuthLayout.module.css';

client/src/stories/Layout/Layout.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { Header } from '../Header/Header';
 import { Sidebar } from '../../components/Sidebar/Sidebar.jsx';