From 111501156feaa7c8f89ba63454bf1f7825a16658 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Thu, 29 Aug 2024 02:19:19 -0400
Subject: [PATCH] Fixed pages rerendering on sidebar state change

---
 Client/src/App.jsx                          | 2 +-
 Client/src/Components/Sidebar/index.jsx     | 3 +--
 Client/src/Features/UI/uiSlice.js           | 5 ++++-
 Client/src/Pages/Monitors/Details/index.jsx | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 69ce98c4c..7eab04f22 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -39,7 +39,7 @@ function App() {
   const PageSpeedWithAdminProp = withAdminProp(PageSpeed);
   const MaintenanceWithAdminProp = withAdminProp(Maintenance);
 
-  const { mode } = useSelector((state) => state.ui);
+  const mode = useSelector((state) => state.ui.mode);
 
   return (
     <ThemeProvider theme={mode === "light" ? theme : darkTheme}>
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 7dc3618a3..2730441b6 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -86,8 +86,7 @@ function Sidebar() {
   const location = useLocation();
   const dispatch = useDispatch();
   const authState = useSelector((state) => state.auth);
-  const { sidebar } = useSelector((state) => state.ui);
-  let collapsed = sidebar.collapsed;
+  const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
   const [anchorEl, setAnchorEl] = useState(null);
   const [popup, setPopup] = useState();
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index addc4e845..84efe58fc 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -20,7 +20,10 @@ const uiSlice = createSlice({
   initialState,
   reducers: {
     setRowsPerPage: (state, action) => {
-      state[action.payload.table].rowsPerPage = action.payload.value;
+      const { table, value } = action.payload;
+      if (state[table]) {
+        state[table].rowsPerPage = value;
+      }
     },
     toggleSidebar: (state) => {
       state.sidebar.collapsed = !state.sidebar.collapsed;
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index ba59fdf52..e44e7f6c9 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -140,6 +140,7 @@ const SkeletonLayout = () => {
  * @component
  */
 const DetailsPage = ({ isAdmin }) => {
+  const theme = useTheme();
   const [monitor, setMonitor] = useState({});
   const { monitorId } = useParams();
   const { authToken } = useSelector((state) => state.auth);
@@ -184,7 +185,6 @@ const DetailsPage = ({ isAdmin }) => {
     fetchCertificate();
   }, [authToken, monitorId]);
 
-  const theme = useTheme();
   let loading = Object.keys(monitor).length === 0;
   return (
     <Box className="monitor-details">