chore(npm): remplace fetch-intercept par un middleware de rtk query (#627)

Author: vmaubert

frontend/package.json

@@ -47,7 +47,6 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-storybook": "^10.2.14",
-    "fetch-intercept": "^2.4.0",
     "i18next": "^25.8.13",
     "maestro-shared": "^0.0.1",
     "maplibre-gl": "^5.19.0",
@@ -63,8 +62,7 @@
     "storybook": "^10.2.14",
     "vite": "^7.1.12",
     "vite-plugin-pwa": "^1.0.3",
-    "vite-tsconfig-paths": "^5.1.4",
-    "whatwg-fetch": "^3.6.20"
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "overrides": {
     "vite": "$vite"

frontend/src/App.tsx

@@ -6,7 +6,6 @@ import { AppRouteKeys } from 'maestro-shared/schema/AppRouteLinks/AppRouteLinks'
 import React, { ReactElement } from 'react';
 import { Provider } from 'react-redux';
 import { Link, Route, Routes } from 'react-router';
-import FetchInterceptor from 'src/components/FetchInterceptor/FetchInterceptor';
 import Footer from 'src/components/Footer/Footer';
 import Header from 'src/components/Header/Header';
 import ScrollToTop from 'src/components/ScrollToTop/ScrollToTop';
@@ -58,8 +57,6 @@ function App() {
   );
   const { isOnline } = useOnLine();
 
-  FetchInterceptor();
-
   return (
     <React.Suspense fallback={<></>}>
       <MascaradeNotice />

frontend/src/components/FetchInterceptor/FetchInterceptor.tsx

@@ -1,9 +1,21 @@
-import { configureStore } from '@reduxjs/toolkit';
+import type { Middleware } from '@reduxjs/toolkit';
+import { configureStore, isRejectedWithValue } from '@reduxjs/toolkit';
 import { api, tagTypes } from 'src/services/api.service';
 import prescriptionsSlice from 'src/store/reducers/prescriptionsSlice';
 import samplesSlice from 'src/store/reducers/samplesSlice';
 import authSlice from './reducers/authSlice';
 
+const unauthorizedMiddleware: Middleware = () => (next) => (action) => {
+  if (
+    isRejectedWithValue(action) &&
+    (action.payload as { status?: number })?.status === 401
+  ) {
+    localStorage.removeItem('authUser');
+    window.location.replace('/');
+  }
+  return next(action);
+};
+
 export const applicationReducer = {
   [authSlice.name]: authSlice.reducer,
   [prescriptionsSlice.name]: prescriptionsSlice.reducer,
@@ -16,7 +28,7 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false
-    }).concat(api.middleware)
+    }).concat(api.middleware, unauthorizedMiddleware)
 });
 
 export type AppState = ReturnType<typeof store.getState>;

frontend/src/store/store.tsx

@@ -23,9 +23,7 @@ export default {
     frontend: {
       ignoreDependencies: [
         'geojson',
-        '@vitest/coverage-v8',
-        //Utilisé de façon indirecte par fetch-intercept
-        'whatwg-fetch'
+        '@vitest/coverage-v8'
       ],
       ignore: ['src/serviceWorker.js']
     },