Merge pull request #689 from bluewave-labs/fix/fe/minor-bugfixes

Fix/fe/minor bugfixes

Client/src/Pages/Auth/CheckEmail.jsx

@@ -145,7 +145,7 @@ const CheckEmail = () => {
             }}
           />
           <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
-            Didn't receive the email?{" "}
+            Didn&apos;t receive the email?{" "}
             <Typography
               component="span"
               onClick={resendToken}

Client/src/Pages/Auth/ForgotPassword.jsx

@@ -131,7 +131,7 @@ const ForgotPassword = () => {
             <Key alt="password key icon" />
             <Typography component="h1">Forgot password?</Typography>
             <Typography>
-              No worries, we'll send you reset instructions.
+              No worries, we&apos;ll send you reset instructions.
             </Typography>
           </Box>
           <Box width="100%" textAlign="left">

Client/src/Pages/Auth/Login.jsx

@@ -427,7 +427,9 @@ const Login = () => {
         )}
       </Stack>
       <Box textAlign="center" p={theme.gap.large}>
-        <Typography display="inline-block">Don't have an account? —</Typography>
+        <Typography display="inline-block">
+          Don&apos;t have an account? —
+        </Typography>
         <Typography
           component="span"
           ml={theme.gap.xs}

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

@@ -69,6 +69,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
   );
 };
 
+LandingPage.propTypes = {
+  isAdmin: PropTypes.bool,
+  onSignup: PropTypes.func,
+};
+
 /**
  * Renders the first step of the sign up process.
  *
@@ -152,6 +157,14 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepOne.propTypes = {
+  form: PropTypes.object,
+  errors: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  onBack: PropTypes.func,
+};
+
 /**
  * Renders the second step of the sign up process.
  *
@@ -224,6 +237,14 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepTwo.propTypes = {
+  form: PropTypes.object,
+  errors: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  onBack: PropTypes.func,
+};
+
 /**
  * Renders the third step of the sign up process.
  *
@@ -369,6 +390,14 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepThree.propTypes = {
+  form: PropTypes.object,
+  errors: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  onBack: PropTypes.func,
+};
+
 const Register = ({ isAdmin }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -407,7 +436,7 @@ const Register = ({ isAdmin }) => {
       }
     };
     fetchInvite();
-  }, [token]);
+  }, [token, form]);
 
   /**
    * Validates the form data against the validation schema.

Client/src/Pages/Home/index.css

@@ -1 +0,0 @@
-/* Home Page Styles*/

Client/src/Pages/Home/index.jsx

@@ -1,16 +0,0 @@
-import DropdownTeamMember from "../../Components/DropdownTeamMember";
-import Search from "../../Components/Search";
-import "./index.css";
-import DashboardMenu from "../../Components/DashboardMenu";
-import Integrations from "../../Components/Integrations";
-
-const Home = () => {
-  const token = localStorage.getItem("token");
-  return (
-    <>
-      <div>Home</div>
-    </>
-  );
-};
-
-export default Home;

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

@@ -32,10 +32,10 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   });
 
   useEffect(() => {
-    setPaginationController({
-      ...paginationController,
+    setPaginationController((prevPaginationController) => ({
+      ...prevPaginationController,
       page: 0,
-    });
+    }));
   }, [filter, selectedMonitor]);
 
   useEffect(() => {

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx

@@ -1,6 +1,6 @@
 import { Box, Stack, Typography } from "@mui/material";
 import "./index.css";
-import React, { useState } from "react";
+import { useState } from "react";
 import Button from "../../../Components/Button";
 import Back from "../../../assets/icons/left-arrow-long.svg?react";
 import Select from "../../../Components/Inputs/Select";

Client/src/Pages/Maintenance/index.jsx

@@ -1,10 +1,7 @@
-import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";
 import "./index.css";
 
 const Maintenance = () => {
-  const theme = useTheme();
-
   return (
     <div className="maintenance">
       <Fallback

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

@@ -1,5 +1,5 @@
 import "./index.css";
-import React, { useState } from "react";
+import { useState } from "react";
 import RadioButton from "../../../Components/RadioButton";
 import Button from "../../../Components/Button";
 import { Box, ButtonGroup, Stack, Typography } from "@mui/material";

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

@@ -29,10 +29,10 @@ const PaginationTable = ({ monitorId, dateRange }) => {
   });
 
   useEffect(() => {
-    setPaginationController({
-      ...paginationController,
+    setPaginationController((prevPaginationController) => ({
+      ...prevPaginationController,
       page: 0,
-    });
+    }));
   }, [dateRange]);
 
   useEffect(() => {

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
@@ -144,15 +144,14 @@ const DetailsPage = () => {
   useEffect(() => {
     const fetchCertificate = async () => {
       try {
-      const res = await networkService.getCertificateExpiry(
-        authToken,
-        monitorId
-      );
-      setCertificateExpiry(res?.data?.data?.certificateDate ?? "N/A");
+        const res = await networkService.getCertificateExpiry(
+          authToken,
+          monitorId
+        );
+        setCertificateExpiry(res?.data?.data?.certificateDate ?? "N/A");
       } catch (error) {
         console.error(error);
       }
-
     };
     fetchCertificate();
   }, [authToken, monitorId]);

Client/src/Pages/Monitors/index.jsx

@@ -28,7 +28,6 @@ import {
 
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-import { logger } from "../../Utils/Logger";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);

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

@@ -99,7 +99,7 @@ const PageSpeedConfigure = () => {
     setMonitor({
       ...data,
     });
-  }, [monitorId]);
+  }, [monitorId, monitors, navigate]);
 
   const handleChange = (event, id) => {
     let { value } = event.target;

Client/src/Pages/PageSpeed/index.jsx

@@ -11,6 +11,7 @@ import "./index.css";
 import Button from "../../Components/Button";
 import { useNavigate } from "react-router";
 import { getLastChecked } from "../../Utils/monitorUtils";
+import PropTypes from "prop-types";
 
 const Card = ({ data }) => {
   const theme = useTheme();
@@ -57,6 +58,10 @@ const Card = ({ data }) => {
   );
 };
 
+Card.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
 /**
  * Renders a skeleton layout.
  *
@@ -129,7 +134,7 @@ const PageSpeed = () => {
   );
   useEffect(() => {
     dispatch(getPageSpeedByUserId(authToken));
-  }, []);
+  }, [authToken, dispatch]);
 
   // will show skeletons only on initial load
   // since monitor state is being added to redux persist, there's no reason to display skeletons on every render

Client/src/Pages/Status/index.jsx

@@ -1,9 +1,6 @@
 import Fallback from "../../Components/Fallback";
-import { useTheme } from "@emotion/react";
 
 const Status = () => {
-  const theme = useTheme();
-
   return (
     <div className="status">
       <Fallback

Client/src/Utils/NetworkService.js

@@ -1,7 +1,6 @@
 import axios from "axios";
-import { clearAuthState } from "../Features/Auth/authSlice";
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
-
+import { logger } from "./Logger";
 class NetworkService {
   constructor(store) {
     this.store = store;
@@ -9,10 +8,9 @@ class NetworkService {
     this.axiosInstance.interceptors.response.use(
       (response) => response,
       (error) => {
-        console.error(error);
+        logger.error(error);
         if (error.response && error.response.status === 401) {
-          console.log("Invalid token revoked");
-          networkService;
+          logger.error("Invalid token received");
         }
         return Promise.reject(error);
       }