iniital commit

Client/src/App.jsx

@@ -16,13 +16,18 @@ import CheckEmail from "./Pages/CheckEmail";
 import SetNewPassword from "./Pages/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
 import ToastComponent from "./Components/Toast";
+import ProtectedRoute from "./Components/ProtectedRoute";
 
 function App() {
   return (
     <>
       <Routes>
         <Route exact path="/" element={<HomeLayout />}>
-          <Route path="monitors" element={<Monitors />} />
+          <Route
+            path="/monitors"
+            element={<ProtectedRoute Component={Monitors} />}
+          />
+
           <Route path="incidents" element={<Incidents />} />
           <Route path="status" element={<Status />} />
           <Route path="integrations" element={<Integrations />} />

Client/src/Components/ProtectedRoute/index.jsx

@@ -0,0 +1,27 @@
+import { Route, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+/**
+ * ProtectedRoute is a higher-order component that wraps the `Route` component from `react-router-dom`
+ * to create a protected route. It uses Redux to check if the user is authenticated. If the user is
+ * authenticated, it renders the component passed to it; otherwise, it redirects the user to the login page.
+ *
+ * @param {Object} props - The props passed to the ProtectedRoute component.
+ * @param {React.ComponentType} props.Component - The component to render if the user is authenticated.
+ * @param {Object} rest - The remaining props passed to the Route component.
+ * @returns {React.ReactElement} A Route component that conditionally renders the passed Component or redirects to the login page.
+ */
+
+const ProtectedRoute = ({ Component, ...rest }) => {
+  const authState = useSelector((state) => state.auth);
+  console.log(authState);
+
+  return true ? <Component {...rest} /> : <Navigate to="/login" replace />;
+};
+
+ProtectedRoute.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+};
+
+export default ProtectedRoute;

Client/src/Features/Monitors/monitorsSlice.js

@@ -46,7 +46,14 @@ export const getMonitorsByUserId = createAsyncThunk(
 const monitorsSlice = createSlice({
   name: "monitors",
   initialState,
-  reducers: {},
+  reducers: {
+    clearMonitorState: (state) => {
+      state.isLoading = false;
+      state.monitors = [];
+      state.success = null;
+      state.msg = null;
+    },
+  },
   extraReducers: (builder) => {
     builder
       // *****************************************************
@@ -79,6 +86,7 @@ const monitorsSlice = createSlice({
         state.monitors = action.payload.data;
       })
       .addCase(getMonitorsByUserId.rejected, (state, action) => {
+        console.log(action);
         state.isLoading = false;
         state.success = action.payload.success;
         state.msg = action.payload.msg;