Merge remote-tracking branch 'origin/dev' into renovate/react-toastify-10.x

.gitlab-ci.yml

@@ -16,7 +16,7 @@ stages:
 
 build-test:
   stage: build
-  image: node:18.17-alpine
+  image: node:18.20-alpine
   before_script:
     - apk add git
     - apk add bash

.node-version

-18.17
\ No newline at end of file
+18.20
\ No newline at end of file

package.json

@@ -31,11 +31,12 @@
     "@mui/lab": "^5.0.0-alpha.144",
     "@mui/material": "^5.14.9",
     "@mui/styles": "^5.14.9",
+    "@tanstack/react-query": "^5.29.2",
     "@types/draft-js": "^0.11.4",
     "@types/draftjs-to-html": "^0.8.1",
     "@types/html-to-draftjs": "^1.4.0",
     "@types/luxon": "^3.0.0",
-    "@types/react-draft-wysiwyg": "^1.13.4",
+    "@types/react-draft-wysiwyg": "^1.13.8",
     "@vitejs/plugin-react-swc": "^3.4.0",
     "ag-grid-community": "^30.0.0",
     "ag-grid-react": "^30.0.0",
@@ -46,23 +47,22 @@
     "draftjs-to-html": "^0.9.1",
     "html-to-draftjs": "^1.5.0",
     "luxon": "^3.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-draft-wysiwyg": "^1.15.0",
-    "react-query": "^3.39.3",
     "react-router-dom": "^6.0.0",
     "react-toastify": "^10.0.0",
     "sass": "^1.35.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9",
+    "vite": "^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "web-vitals": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.2.77",
+    "@types/react-dom": "^18.2.25",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",

src/API.ts

+import { useQuery } from '@tanstack/react-query'
 import axios, { AxiosRequestConfig } from 'axios'
-import { useQuery } from 'react-query'
 import { toast } from 'react-toastify'
 import { User } from './models/user.model'
 
 const fetchWhoAmI = async () => {
-  const { data } = await axios.get<User | null>('/api/common/WhoAmI')
-  return data
+  try {
+    const { data } = await axios.get<User | null>('/api/common/WhoAmI')
+    return data
+  } catch (error) {
+    console.error('error whoami', error)
+    toast.error('Accès refusé, veuillez vous connecter')
+  }
 }
 
 export const useWhoAmI = () => {
@@ -13,10 +18,7 @@ export const useWhoAmI = () => {
     queryKey: ['WhoAmI'],
     queryFn: fetchWhoAmI,
     retry: false,
-    onError: error => {
-      console.error('error whoami', error)
-      toast.error('Accès refusé, veuillez vous connecter')
-    },
+
     refetchOnMount: false,
   })
 }

src/App.tsx

 import { ThemeProvider } from '@mui/material'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { BrowserRouter } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'

src/components/Consents/Consents.tsx

@@ -66,7 +66,7 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => {
     },
     []
   )
-  const handleChangeRowsPerPage = useCallback(event => {
+  const handleChangeRowsPerPage = useCallback((event: any) => {
     setRowsPerPage(event.target.value)
     setPage(0)
   }, [])

src/components/ImagePicker/ImagePicker.tsx

 import { Button, Dialog, Pagination } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
 import React, { useState } from 'react'
-import { useQuery } from 'react-query'
 import { fetchEcogestureImages, useWhoAmI } from '../../API'
 import { getAxiosXSRFHeader } from '../../axios.config'
 import SingleImage from './SingleImage'

src/components/Popups/Popups.tsx

@@ -229,7 +229,7 @@ const Popups: React.FC = () => {
     }
     setCustomPopup(prev => ({
       ...prev,
-      endDate: newDate.toISO(),
+      endDate: newDate.toISO() || '',
     }))
   }, [popupDuration])
 

src/components/SideBar/SideBar.tsx

 import { Button } from '@mui/material'
+import { useMutation } from '@tanstack/react-query'
 import React from 'react'
-import { useMutation } from 'react-query'
 import { NavLink } from 'react-router-dom'
 import { fetchLogout, useWhoAmI } from '../../API'
 import logo from '../../assets/icons/ecolyo-logo.svg'

src/index.tsx

-import React from 'react'
-import ReactDOM from 'react-dom'
-import './styles/index.scss'
+import { createRoot } from 'react-dom/client'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
+import './styles/index.scss'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+const container = document.getElementById('root')
+const root = createRoot(container!)
+root.render(<App />)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

vite.config.ts

@@ -8,14 +8,12 @@ export default defineConfig({
   plugins: [react(), basicSsl()],
   preview: {
     port: 3000,
-    https: true,
     strictPort: true,
     host: true,
     open: 'https://localhost/',
   },
   server: {
     port: 3000,
-    https: true,
     strictPort: true,
     host: true,
     open: 'https://localhost/', // directly opens site through nginx