Fixed pages rerendering on sidebar state change

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}>

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();

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;

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">