Refactored axios util into a service

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import { createToast } from "../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
@@ -52,7 +52,7 @@ const TeamPanel = () => {
   useEffect(() => {
     const fetchTeam = async () => {
       try {
-        const response = await axiosInstance.getAllUsers(authToken);
+        const response = await networkService.getAllUsers(authToken);
         setMembers(response.data.data);
       } catch (error) {
         createToast({
@@ -176,7 +176,7 @@ const TeamPanel = () => {
       setErrors((prev) => ({ ...prev, email: error.details[0].message }));
     } else
       try {
-        await axiosInstance.requestInvitationToken(
+        await networkService.requestInvitationToken(
           authToken,
           toInvite.email,
           toInvite.role

Client/src/Features/Auth/authSlice.js

@@ -1,4 +1,4 @@
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
 
@@ -14,7 +14,7 @@ export const register = createAsyncThunk(
   "auth/register",
   async (form, thunkApi) => {
     try {
-      const res = await axiosInstance.registerUser(form);
+      const res = await networkService.registerUser(form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
@@ -31,7 +31,7 @@ export const register = createAsyncThunk(
 
 export const login = createAsyncThunk("auth/login", async (form, thunkApi) => {
   try {
-    const res = await axiosInstance.loginUser(form);
+    const res = await networkService.loginUser(form);
     return res.data;
   } catch (error) {
     if (error.response && error.response.data) {
@@ -57,7 +57,7 @@ export const update = createAsyncThunk(
       form.password && fd.append("password", form.password);
       form.newPassword && fd.append("newPassword", form.newPassword);
       if (form.file && form.file !== "") {
-        const imageResult = await axiosInstance.get(form.file, {
+        const imageResult = await networkService.get(form.file, {
           responseType: "blob",
           baseURL: "",
         });
@@ -66,7 +66,7 @@ export const update = createAsyncThunk(
       form.deleteProfileImage &&
         fd.append("deleteProfileImage", form.deleteProfileImage);
 
-      const res = await axiosInstance.updateUser(token, user._id, fd);
+      const res = await networkService.updateUser(token, user._id, fd);
 
       return res.data;
     } catch (error) {
@@ -88,7 +88,7 @@ export const deleteUser = createAsyncThunk(
     const user = jwtDecode(data);
 
     try {
-      const res = await axiosInstance.deleteUser(data, user._id);
+      const res = await networkService.deleteUser(data, user._id);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -107,7 +107,7 @@ export const forgotPassword = createAsyncThunk(
   "auth/forgotPassword",
   async (form, thunkApi) => {
     try {
-      const res = await axiosInstance.forgotPassword(form);
+      const res = await networkService.forgotPassword(form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
@@ -127,8 +127,8 @@ export const setNewPassword = createAsyncThunk(
   async (data, thunkApi) => {
     const { token, form } = data;
     try {
-      await axiosInstance.validateRecoveryToken(token);
-      const res = await axiosInstance.setNewPassword(token, form);
+      await networkService.validateRecoveryToken(token);
+      const res = await networkService.setNewPassword(token, form);
       return res.data;
     } catch (error) {
       if (error.response.data) {

Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js

@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 const initialState = {
   isLoading: false,
   monitors: [],
@@ -13,7 +13,7 @@ export const createPageSpeed = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.createMonitor(authToken, monitor);
+      const res = await networkService.createMonitor(authToken, monitor);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -33,7 +33,7 @@ export const getPageSpeedByUserId = createAsyncThunk(
   async (token, thunkApi) => {
     const user = jwtDecode(token);
     try {
-      const res = await axiosInstance.getMonitorsByUserId(
+      const res = await networkService.getMonitorsByUserId(
         token,
         user._id,
         25,
@@ -68,7 +68,7 @@ export const updatePageSpeed = createAsyncThunk(
         interval: monitor.interval,
         // notifications: monitor.notifications,
       };
-      const res = await axiosInstance.updateMonitor(
+      const res = await networkService.updateMonitor(
         authToken,
         monitor._id,
         updatedFields
@@ -92,7 +92,10 @@ export const deletePageSpeed = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.deleteMonitorById(authToken, monitor._id);
+      const res = await networkService.deleteMonitorById(
+        authToken,
+        monitor._id
+      );
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 const initialState = {
   isLoading: false,
   monitors: [],
@@ -13,7 +13,7 @@ export const createUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.createMonitor(authToken, monitor);
+      const res = await networkService.createMonitor(authToken, monitor);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -33,7 +33,7 @@ export const getUptimeMonitorsByUserId = createAsyncThunk(
   async (token, thunkApi) => {
     const user = jwtDecode(token);
     try {
-      const res = await axiosInstance.getMonitorsByUserId(
+      const res = await networkService.getMonitorsByUserId(
         token,
         user._id,
         25,
@@ -67,7 +67,7 @@ export const updateUptimeMonitor = createAsyncThunk(
         interval: monitor.interval,
         notifications: monitor.notifications,
       };
-      const res = await axiosInstance.updateMonitor(
+      const res = await networkService.updateMonitor(
         authToken,
         monitor._id,
         updatedFields
@@ -91,7 +91,10 @@ export const deleteUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.deleteMonitorById(authToken, monitor._id);
+      const res = await networkService.deleteMonitorById(
+        authToken,
+        monitor._id
+      );
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {

Client/src/HOC/withAdminCheck.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import axiosInstance from "../Utils/NetworkService";
+import { networkService } from "../main";
 
 const withAdminCheck = (WrappedComponent) => {
   const WithAdminCheck = (props) => {
     const navigate = useNavigate();
 
     useEffect(() => {
-      axiosInstance
+      networkService
         .doesAdminExist()
         .then((response) => {
           if (response.data.data === true) {

Client/src/Pages/Auth/Login.jsx

@@ -7,7 +7,7 @@ import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import Button from "../../Components/Button";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 import Field from "../../Components/Inputs/Field";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
@@ -248,7 +248,7 @@ const Login = () => {
   const [step, setStep] = useState(0);
 
   useEffect(() => {
-    axiosInstance
+    networkService
       .doesAdminExist()
       .then((response) => {
         if (response.data.data === false) {

Client/src/Pages/Auth/Register/Register.jsx

@@ -15,7 +15,7 @@ import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import Check from "../../../Components/Check/Check";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import "../index.css";
 
 /**
@@ -397,7 +397,7 @@ const Register = ({ isAdmin }) => {
     const fetchInvite = async () => {
       if (token !== undefined) {
         try {
-          const res = await axiosInstance.verifyInvitationToken(token);
+          const res = await networkService.verifyInvitationToken(token);
           const { role, email } = res.data.data;
           console.log(role);
           setForm({ ...form, email, role });

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -18,7 +18,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import { StatusLabel } from "../../../Components/Label";
 
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
@@ -45,7 +45,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
       try {
         let res;
         if (selectedMonitor === "0") {
-          res = await axiosInstance.getChecksByUser(
+          res = await networkService.getChecksByUser(
             authToken,
             user._id,
             "desc",
@@ -56,7 +56,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
             paginationController.rowsPerPage
           );
         } else {
-          res = await axiosInstance.getChecksByMonitor(
+          res = await networkService.getChecksByMonitor(
             authToken,
             selectedMonitor,
             "desc",

Client/src/Pages/Incidents/index.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { ButtonGroup, Stack, Skeleton, Typography } from "@mui/material";
 import Button from "../../Components/Button";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 import { useTheme } from "@emotion/react";
 import Select from "../../Components/Inputs/Select";
 import IncidentTable from "./IncidentTable";
@@ -48,7 +48,7 @@ const Incidents = () => {
   useEffect(() => {
     const fetchMonitors = async () => {
       setLoading(true);
-      const res = await axiosInstance.getMonitorsByUserId(
+      const res = await networkService.getMonitorsByUserId(
         authState.authToken,
         authState.user._id,
         1,

Client/src/Pages/Monitors/Details/PaginationTable/index.jsx

@@ -13,7 +13,7 @@ import {
 
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../../../Utils/NetworkService";
+import { networkService } from "../../../../main";
 import { StatusLabel } from "../../../../Components/Label";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
@@ -37,7 +37,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
   useEffect(() => {
     const fetchPage = async () => {
       try {
-        const res = await axiosInstance.getChecksByMonitor(
+        const res = await networkService.getChecksByMonitor(
           authToken,
           monitorId,
           "desc",

Client/src/Pages/Monitors/Details/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
@@ -121,7 +121,7 @@ const DetailsPage = () => {
 
   const fetchMonitor = useCallback(async () => {
     try {
-      const res = await axiosInstance.getStatsByMonitorId(
+      const res = await networkService.getStatsByMonitorId(
         authToken,
         monitorId,
         null,
@@ -144,7 +144,7 @@ const DetailsPage = () => {
 
   useEffect(() => {
     const fetchCertificate = async () => {
-      const res = await axiosInstance.getCertificateExpiry(
+      const res = await networkService.getCertificateExpiry(
         authToken,
         monitorId
       );

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -9,7 +9,7 @@ import {
   formatDuration,
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
@@ -186,7 +186,7 @@ const PageSpeedDetails = () => {
   useEffect(() => {
     const fetchMonitor = async () => {
       try {
-        const res = await axiosInstance.getStatsByMonitorId(
+        const res = await networkService.getStatsByMonitorId(
           authToken,
           monitorId,
           "desc",

Client/src/Utils/NetworkService.js

@@ -2,273 +2,273 @@ import axios from "axios";
 import { clearAuthState } from "../Features/Auth/authSlice";
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
-let store;
-
-export const injectStore = (s) => {
-  store = s;
-};
-
-const axiosInstance = axios.create({
-  baseURL: BASE_URL,
-});
-
-axiosInstance.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    console.error(error);
-    if (error.response && error.response.status === 401) {
-      console.log("Invalid token revoked");
-      store.dispatch(clearAuthState());
-    }
-    return Promise.reject(error);
+class NetworkService {
+  constructor(store) {
+    this.store = store;
+    this.axiosInstance = axios.create({ baseURL: BASE_URL });
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        console.error(error);
+        if (error.response && error.response.status === 401) {
+          console.log("Invalid token revoked");
+          networkService;
+        }
+        return Promise.reject(error);
+      }
+    );
   }
-);
 
-// **********************************
-// Create a new monitor
-// **********************************
-axiosInstance.createMonitor = async (authToken, monitor) => {
-  return axiosInstance.post(`/monitors`, monitor, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
-
-// **********************************
-// Get all uptime monitors for a user
-// **********************************
-axiosInstance.getMonitorsByUserId = async (
-  authToken,
-  userId,
-  limit,
-  types,
-  status,
-  sortOrder,
-  normalize
-) => {
-  const params = new URLSearchParams();
-
-  if (limit) params.append("limit", limit);
-  if (types) {
-    types.forEach((type) => {
-      params.append("type", type);
+  // **********************************
+  // Create a new monitor
+  // **********************************
+  async createMonitor(authToken, monitor) {
+    return this.axiosInstance.post(`/monitors`, monitor, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
     });
   }
-  if (status) params.append("status", status);
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (normalize) params.append("normalize", normalize);
 
-  return axiosInstance.get(`/monitors/user/${userId}?${params.toString()}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Get all uptime monitors for a user
+  // **********************************
+  async getMonitorsByUserId(
+    authToken,
+    userId,
+    limit,
+    types,
+    status,
+    sortOrder,
+    normalize
+  ) {
+    const params = new URLSearchParams();
 
-// **********************************
-// Get stats for a monitor
-// **********************************
-axiosInstance.getStatsByMonitorId = async (
-  authToken,
-  monitorId,
-  sortOrder,
-  limit,
-  dateRange,
-  numToDisplay,
-  normalize
-) => {
-  const params = new URLSearchParams();
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (limit) params.append("limit", limit);
-  if (dateRange) params.append("dateRange", dateRange);
-  if (numToDisplay) params.append("numToDisplay", numToDisplay);
-  if (normalize) params.append("normalize", normalize);
+    if (limit) params.append("limit", limit);
+    if (types) {
+      types.forEach((type) => {
+        params.append("type", type);
+      });
+    }
+    if (status) params.append("status", status);
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (normalize) params.append("normalize", normalize);
 
-  return axiosInstance.get(
-    `/monitors/stats/${monitorId}?${params.toString()}`,
-    {
+    return this.axiosInstance.get(
+      `/monitors/user/${userId}?${params.toString()}`,
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  // **********************************
+  // Get stats for a monitor
+  // **********************************
+  async getStatsByMonitorId(
+    authToken,
+    monitorId,
+    sortOrder,
+    limit,
+    dateRange,
+    numToDisplay,
+    normalize
+  ) {
+    const params = new URLSearchParams();
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (limit) params.append("limit", limit);
+    if (dateRange) params.append("dateRange", dateRange);
+    if (numToDisplay) params.append("numToDisplay", numToDisplay);
+    if (normalize) params.append("normalize", normalize);
+
+    return this.axiosInstance.get(
+      `/monitors/stats/${monitorId}?${params.toString()}`,
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      }
+    );
+  }
+
+  // **********************************
+  // Updates a single monitor
+  // **********************************
+  async updateMonitor(authToken, monitorId, updatedFields) {
+    return this.axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
+  // **********************************
+  // Deletes a single monitor
+  // **********************************
+  async deleteMonitorById(authToken, monitorId) {
+    return this.axiosInstance.delete(`/monitors/${monitorId}`, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
+  // **********************************
+  // Get certificate
+  // **********************************
+  async getCertificateExpiry(authToken, monitorId) {
+    return this.axiosInstance.get(`/monitors/certificate/${monitorId}`, {
       headers: {
         Authorization: `Bearer ${authToken}`,
       },
-    }
-  );
-};
+    });
+  }
 
-// **********************************
-// Updates a single monitor
-// **********************************
-axiosInstance.updateMonitor = async (authToken, monitorId, updatedFields) => {
-  return axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Register a new user
+  // **********************************
+  async registerUser(form) {
+    return this.axiosInstance.post(`/auth/register`, form);
+  }
 
-// **********************************
-// Deletes a single monitor
-// **********************************
-axiosInstance.deleteMonitorById = async (authToken, monitorId) => {
-  return axiosInstance.delete(`/monitors/${monitorId}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Log in an exisiting user
+  // **********************************
+  async loginUser(form) {
+    return this.axiosInstance.post(`/auth/login`, form);
+  }
 
-// **********************************
-// Get certificate
-// **********************************
-axiosInstance.getCertificateExpiry = async (authToken, monitorId) => {
-  return axiosInstance.get(`/monitors/certificate/${monitorId}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-    },
-  });
-};
+  // **********************************
+  // Update in an exisiting user
+  // **********************************
+  async updateUser(authToken, userId, form) {
+    return this.axiosInstance.put(`/auth/user/${userId}`, form, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
 
-// **********************************
-// Register a new user
-// **********************************
-axiosInstance.registerUser = async (form) => {
-  return axiosInstance.post(`/auth/register`, form);
-};
+  // **********************************
+  // Forgot password request
+  // **********************************
+  async forgotPassword(form) {
+    return this.axiosInstance.post(`/auth/recovery/request`, form);
+  }
 
-// **********************************
-// Log in an exisiting user
-// **********************************
-axiosInstance.loginUser = async (form) => {
-  return axiosInstance.post(`/auth/login`, form);
-};
+  async validateRecoveryToken(recoveryToken) {
+    return this.axiosInstance.post("/auth/recovery/validate", {
+      recoveryToken,
+    });
+  }
 
-// **********************************
-// Update in an exisiting user
-// **********************************
-axiosInstance.updateUser = async (authToken, userId, form) => {
-  return axiosInstance.put(`/auth/user/${userId}`, form, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Set new password request
+  // **********************************
+  async setNewPassword(recoveryToken, form) {
+    return this.axiosInstance.post("/auth/recovery/reset", {
+      ...form,
+      recoveryToken,
+    });
+  }
 
-// **********************************
-// Forgot password request
-// **********************************
-axiosInstance.forgotPassword = async (form) => {
-  return axiosInstance.post(`/auth/recovery/request`, form);
-};
+  // **********************************
+  // Check for admin user
+  // **********************************
+  async doesAdminExist() {
+    return this.axiosInstance.get("/auth/users/admin");
+  }
 
-axiosInstance.validateRecoveryToken = async (recoveryToken) => {
-  return axiosInstance.post("/auth/recovery/validate", {
-    recoveryToken,
-  });
-};
-
-// **********************************
-// Set new password request
-// **********************************
-axiosInstance.setNewPassword = async (recoveryToken, form) => {
-  return axiosInstance.post("/auth/recovery/reset", {
-    ...form,
-    recoveryToken,
-  });
-};
-
-// **********************************
-// Check for admin user
-// **********************************
-axiosInstance.doesAdminExist = async () => {
-  return axiosInstance.get("/auth/users/admin");
-};
-
-// **********************************
-// Get all users
-// **********************************
-axiosInstance.getAllUsers = async (authToken) => {
-  return axiosInstance.get("/auth/users", {
-    headers: { Authorization: `Bearer ${authToken}` },
-  });
-};
-
-// **********************************
-// Request Invitation Token
-// **********************************
-axiosInstance.requestInvitationToken = async (authToken, email, role) => {
-  return axiosInstance.post(
-    `/auth/invite`,
-    { email, role },
-    {
+  // **********************************
+  // Get all users
+  // **********************************
+  async getAllUsers(authToken) {
+    return this.axiosInstance.get("/auth/users", {
       headers: { Authorization: `Bearer ${authToken}` },
-    }
-  );
-};
+    });
+  }
 
-// **********************************
-// Verify Invitation Token
-// **********************************
-axiosInstance.verifyInvitationToken = async (token) => {
-  return axiosInstance.post(`/auth/invite/verify`, {
-    token,
-  });
-};
+  // **********************************
+  // Request Invitation Token
+  // **********************************
+  async requestInvitationToken(authToken, email, role) {
+    return this.axiosInstance.post(
+      `/auth/invite`,
+      { email, role },
+      {
+        headers: { Authorization: `Bearer ${authToken}` },
+      }
+    );
+  }
 
-// **********************************
-// Get all checks for a given monitor
-// **********************************
+  // **********************************
+  // Verify Invitation Token
+  // **********************************
+  async verifyInvitationToken(token) {
+    return this.axiosInstance.post(`/auth/invite/verify`, {
+      token,
+    });
+  }
 
-axiosInstance.getChecksByMonitor = async (
-  authToken,
-  monitorId,
-  sortOrder,
-  limit,
-  dateRange,
-  filter,
-  page,
-  rowsPerPage
-) => {
-  const params = new URLSearchParams();
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (limit) params.append("limit", limit);
-  if (dateRange) params.append("dateRange", dateRange);
-  if (filter) params.append("filter", filter);
-  if (page) params.append("page", page);
-  if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+  // **********************************
+  // Get all checks for a given monitor
+  // **********************************
 
-  return axiosInstance.get(`/checks/${monitorId}?${params.toString()}`, {
-    headers: { Authorization: `Bearer ${authToken}` },
-  });
-};
+  async getChecksByMonitor(
+    authToken,
+    monitorId,
+    sortOrder,
+    limit,
+    dateRange,
+    filter,
+    page,
+    rowsPerPage
+  ) {
+    const params = new URLSearchParams();
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (limit) params.append("limit", limit);
+    if (dateRange) params.append("dateRange", dateRange);
+    if (filter) params.append("filter", filter);
+    if (page) params.append("page", page);
+    if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
 
-// **********************************
-// Get all checks for a given user
-// **********************************
-axiosInstance.getChecksByUser = async (
-  authToken,
-  userId,
-  sortOrder,
-  limit,
-  dateRange,
-  filter,
-  page,
-  rowsPerPage
-) => {
-  const params = new URLSearchParams();
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (limit) params.append("limit", limit);
-  if (dateRange) params.append("dateRange", dateRange);
-  if (filter) params.append("filter", filter);
-  if (page) params.append("page", page);
-  if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
-  return axiosInstance.get(`/checks/user/${userId}?${params.toString()}`, {
-    headers: { Authorization: `Bearer ${authToken}` },
-  });
-};
+    return this.axiosInstance.get(`/checks/${monitorId}?${params.toString()}`, {
+      headers: { Authorization: `Bearer ${authToken}` },
+    });
+  }
 
-export default axiosInstance;
+  // **********************************
+  // Get all checks for a given user
+  // **********************************
+  async getChecksByUser(
+    authToken,
+    userId,
+    sortOrder,
+    limit,
+    dateRange,
+    filter,
+    page,
+    rowsPerPage
+  ) {
+    const params = new URLSearchParams();
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (limit) params.append("limit", limit);
+    if (dateRange) params.append("dateRange", dateRange);
+    if (filter) params.append("filter", filter);
+    if (page) params.append("page", page);
+    if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+    return this.axiosInstance.get(
+      `/checks/user/${userId}?${params.toString()}`,
+      {
+        headers: { Authorization: `Bearer ${authToken}` },
+      }
+    );
+  }
+}
+
+export default NetworkService;

Client/src/main.jsx

@@ -8,10 +8,8 @@ import { ThemeProvider } from "@mui/material";
 import { Provider } from "react-redux";
 import { persistor, store } from "./store";
 import { PersistGate } from "redux-persist/integration/react";
-import { injectStore } from "./Utils/NetworkService.js";
-
-injectStore(store);
-
+import NetworkService from "./Utils/NetworkService.js";
+export const networkService = new NetworkService(store);
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>