fix errors due to mui v7 and react-router v7

Author: jonasrenault

frontend/src/components/LoginForm.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { HttpResponse, http } from 'msw'
 import { setupServer } from 'msw/node'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router'
 import { afterAll, afterEach, beforeAll, expect, it } from 'vitest'
 import { AuthProvider } from '../contexts/auth'
 import { SnackBarProvider } from '../contexts/snackbar'

frontend/src/components/LoginForm.tsx

@@ -10,11 +10,11 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import { AxiosError } from 'axios'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import { Link as RouterLink, useNavigate } from 'react-router-dom'
+import { Link as RouterLink, useNavigate } from 'react-router'
 import { useAuth } from '../contexts/auth'
 import { useSnackBar } from '../contexts/snackbar'
 import { User } from '../models/user'

frontend/src/components/RegisterForm.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { HttpResponse, http } from 'msw'
 import { setupServer } from 'msw/node'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router'
 import { afterAll, afterEach, beforeAll, expect, it } from 'vitest'
 import { AuthProvider } from '../contexts/auth'
 import { SnackBarProvider } from '../contexts/snackbar'

frontend/src/components/RegisterForm.tsx

@@ -1,10 +1,10 @@
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
 import { Avatar, Box, Button, Collapse, Link, TextField, Typography } from '@mui/material'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import { AxiosError } from 'axios'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import { Link as RouterLink, useNavigate } from 'react-router-dom'
+import { Link as RouterLink, useNavigate } from 'react-router'
 import { useSnackBar } from '../contexts/snackbar'
 import { User } from '../models/user'
 import authService from '../services/auth.service'

frontend/src/components/TopMenuBar.test.tsx

@@ -2,7 +2,7 @@ import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { HttpResponse, http } from 'msw'
 import { setupServer } from 'msw/node'
-import { RouterProvider, createMemoryRouter } from 'react-router-dom'
+import { RouterProvider, createMemoryRouter } from 'react-router'
 import { afterAll, afterEach, beforeAll, expect, it } from 'vitest'
 import { AuthProvider } from '../contexts/auth'
 import { SnackBarProvider } from '../contexts/snackbar'

frontend/src/components/TopMenuBar.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
 } from '@mui/material'
 import * as React from 'react'
-import { NavLink, useNavigate } from 'react-router-dom'
+import { NavLink, useNavigate } from 'react-router'
 import { useAuth } from '../contexts/auth'
 
 export default function TopMenuBar() {

frontend/src/components/UserProfile.test.tsx

@@ -2,7 +2,7 @@ import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { HttpResponse, http } from 'msw'
 import { setupServer } from 'msw/node'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter } from 'react-router'
 import { afterAll, afterEach, beforeAll, expect, it, vi } from 'vitest'
 import { AuthProvider } from '../contexts/auth'
 import { SnackBarProvider } from '../contexts/snackbar'

frontend/src/components/UserProfile.tsx

@@ -11,11 +11,11 @@ import {
   IconButton,
   TextField,
 } from '@mui/material'
-import Grid from '@mui/material/Grid2'
+import Grid from '@mui/material/Grid'
 import { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 import { useAuth } from '../contexts/auth'
 import { useSnackBar } from '../contexts/snackbar'
 import { User } from '../models/user'

frontend/src/error-page.tsx

@@ -1,6 +1,6 @@
 import { Button, Card, CardActions, CardContent, Typography } from '@mui/material'
-import Grid from '@mui/material/Grid2'
-import { isRouteErrorResponse, Link as RouterLink, useRouteError } from 'react-router-dom'
+import Grid from '@mui/material/Grid'
+import { isRouteErrorResponse, Link as RouterLink, useRouteError } from 'react-router'
 
 interface Error {
   status: number

frontend/src/main.tsx

@@ -1,7 +1,7 @@
 import './axios'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { RouterProvider } from 'react-router-dom'
+import { RouterProvider } from 'react-router'
 import ReactGA from 'react-ga4'
 import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider } from '@mui/material/styles'