Refactor network service, clear auth and monitor state on bad token

Client/src/Utils/NetworkService.js

@@ -1,10 +1,14 @@
 import axios from "axios";
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 const FALLBACK_BASE_URL = "http://localhost:5000/api/v1";
+import { clearAuthState } from "../Features/Auth/authSlice";
+import { clearUptimeMonitorState } from "../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { logger } from "./Logger";
 class NetworkService {
-  constructor(store) {
+  constructor(store, dispatch, navigate) {
     this.store = store;
+    this.dispatch = dispatch;
+    this.navigate = navigate;
     let baseURL = BASE_URL;
     this.axiosInstance = axios.create();
     this.setBaseUrl(baseURL);
@@ -22,9 +26,10 @@ class NetworkService {
     this.axiosInstance.interceptors.response.use(
       (response) => response,
       (error) => {
-        logger.error(error);
         if (error.response && error.response.status === 401) {
-          logger.error("Invalid token received");
+          dispatch(clearAuthState());
+          dispatch(clearUptimeMonitorState());
+          navigate("/login");
         }
         return Promise.reject(error);
       }
@@ -688,3 +693,10 @@ class NetworkService {
 }
 
 export default NetworkService;
+
+let networkService;
+
+export const setNetworkService = (service) => {
+  networkService = service;
+};
+export { networkService };

Client/src/Utils/NetworkServiceProvider.jsx

@@ -0,0 +1,15 @@
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router";
+import { setNetworkService } from "./NetworkService";
+import NetworkService from "./NetworkService";
+import { store } from "../store";
+
+const NetworkServiceProvider = ({ children }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const networkService = new NetworkService(store, dispatch, navigate);
+  setNetworkService(networkService);
+  return children;
+};
+
+export default NetworkServiceProvider;

Client/src/main.jsx

@@ -1,18 +1,21 @@
-import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
-import { BrowserRouter as Router, HashRouter } from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import { Provider } from "react-redux";
 import { persistor, store } from "./store";
 import { PersistGate } from "redux-persist/integration/react";
-import NetworkService from "./Utils/NetworkService.js";
-export const networkService = new NetworkService(store);
+import NetworkServiceProvider from "./Utils/NetworkServiceProvider.jsx";
+import { networkService } from "./Utils/NetworkService";
+export { networkService };
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <Router>
-        <App />
+        <NetworkServiceProvider>
+          <App />
+        </NetworkServiceProvider>
       </Router>
     </PersistGate>
   </Provider>