Iniital commit

Client/src/Components/CurrentMonitors/index.jsx

@@ -10,7 +10,7 @@ const CurrentMonitors = ({ monitors }) => {
       <div className="current-monitors-bar">
         <div className="current-monitors-title-holder">
           <div className="current-monitors-title">Current monitors</div>
-          <div className="current-monitors-counter">5</div>
+          <div className="current-monitors-counter">{monitors.length}</div>
         </div>
         <div className="current-monitors-search-bar">
           <SearchTextField />

Client/src/Components/HostsTable/index.jsx

@@ -13,14 +13,21 @@ const HostsTable = ({ monitors }) => {
           </tr>
         </thead>
         <tbody>
-          {monitors.map((monitor, index) => (
-            <tr className="tbody-row" key={index}>
-              <td className="tbody-row-cell">{monitor.host}</td>
-              <td className="tbody-row-cell">{monitor.status}</td>
-              <td className="tbody-row-cell">{monitor.team}</td>
-              <td className="tbody-row-cell actions-cell">{monitor.actions}</td>
-            </tr>
-          ))}
+          {monitors.map((monitor, index) => {
+            console.log(monitor);
+            return (
+              <tr className="tbody-row" key={index}>
+                <td className="tbody-row-cell">{monitor.url}</td>
+                <td className="tbody-row-cell">
+                  {monitor.isActive ? "Active" : "Down"}
+                </td>
+                <td className="tbody-row-cell">{monitor.team}</td>
+                <td className="tbody-row-cell actions-cell">
+                  {monitor.actions}
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </div>

Client/src/Features/Monitors/monitorsSlice.js

@@ -1,5 +1,6 @@
 import axios from "axios";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { jwtDecode } from "jwt-decode";
 
 const initialState = {
   isLoading: false,
@@ -25,9 +26,17 @@ export const getMonitors = createAsyncThunk(
 export const getMonitorsByUserId = createAsyncThunk(
   "montiors/getMonitorsByUserId",
   async (token, thunkApi) => {
+    const user = jwtDecode(token);
     try {
-      // TODO get userId and make request
-      console.log(token);
+      const res = await axios.get(
+        import.meta.env.VITE_APP_API_BASE_URL + "/monitors/user/" + user._id,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+      return res.data;
     } catch (error) {
       return thunkApi.rejectWithValue(error.response.data);
     }
@@ -50,7 +59,6 @@ const monitorsSlice = createSlice({
         state.isLoading = false;
         state.success = action.payload.success;
         state.msg = action.payload.msg;
-        console.log(action.payload);
         state.monitors = action.payload.data;
       })
       .addCase(getMonitors.rejected, (state, action) => {
@@ -68,7 +76,6 @@ const monitorsSlice = createSlice({
       .addCase(getMonitorsByUserId.fulfilled, (state, action) => {
         state.isLoading = false;
         state.success = action.payload.msg;
-        console.log(action.payload);
         state.monitors = action.payload.data;
       })
       .addCase(getMonitorsByUserId.rejected, (state, action) => {

Client/src/Pages/Monitors/CurrentStats.jsx

@@ -8,40 +8,7 @@ import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import CurrentMonitors from "../../Components/CurrentMonitors";
 import MockData from "../../Mock/sample_data.json";
 
-const CurrentStats = (mockdata = true) => {
-  // The hardcoded part is passed as default value for the purpose of demonstration.
-  // Pass an empty array, [], before fetching the data
-  const [monitors, setMonitors] = useState([]);
-
-  useEffect(() => {
-    if (mockdata) {
-      console.log(MockData.data);
-      setMonitors(
-        MockData.data.map((item) => ({
-          host: Host(item.name, 100, "var(--env-var-color-17)", item.url),
-          status: HostStatus(
-            item.isActive
-              ? "var(--env-var-color-20)"
-              : "var(--env-var-color-21)",
-            item.isActive ? "Up" : "Down",
-            item.isActive
-              ? "var(--env-var-color-17)"
-              : "var(--env-var-color-19)"
-          ),
-          team: <BarChart checks={item.checks} />,
-          actions: HostActions(),
-        }))
-      );
-    }
-  }, [mockdata]);
-
-  // useEffect(() => {
-  //   fetch("API_URL")
-  //     .then((response) => response.json())
-  //     .then((data) => setMonitors(data))
-  //     .catch((error) => console.error(error));
-  // }, []);
-
+const CurrentStats = ({ monitors }) => {
   return (
     <div>
       <div className="monitors-gaps-medium"></div>

Client/src/Pages/Monitors/index.jsx

@@ -1,12 +1,23 @@
 // import CreateNewMonitor from "./CreateNewMonitor";
 import CurrentStats from "./CurrentStats";
 import "./index.css";
-import React from "react";
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
 
 const Monitors = () => {
+  const monitorState = useSelector((state) => state.monitors);
+  const authstate = useSelector((state) => state.auth);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getMonitorsByUserId(authstate.authToken));
+  }, []);
+
   return (
     <div className="monitors">
-      <CurrentStats />
+      <CurrentStats monitors={monitorState.monitors} />
       {/* <CreateNewMonitor /> */}
     </div>
   );