refactor: removed withAdminProps HOC and changed for custom hook reducing component wrapping

Client/src/Components/HOC/withAdminProp.jsx

@@ -1,25 +0,0 @@
-import { useSelector } from "react-redux";
-
-const withAdminProp = (WrappedComponent) => {
-	const WithAdminProp = (props) => {
-		const { user } = useSelector((state) => state.auth);
-		const isAdmin =
-			(user?.role?.includes("admin") ?? false) ||
-			(user?.role?.includes("superadmin") ?? false);
-
-		return (
-			<WrappedComponent
-				{...props}
-				isAdmin={isAdmin}
-			/>
-		);
-	};
-
-	const wrappedComponentName =
-		WrappedComponent.displayName || WrappedComponent.name || "Component";
-	WithAdminProp.displayName = `WithAdminProp(${wrappedComponentName})`;
-
-	return WithAdminProp;
-};
-
-export default withAdminProp;

Client/src/Components/ProtectedRoute/index.jsx

@@ -15,7 +15,6 @@ import PropTypes from "prop-types";
 
 const ProtectedRoute = ({ Component, ...rest }) => {
 	const authState = useSelector((state) => state.auth);
-	console.log("Protected");
 	return authState.authToken ? (
 		<Component {...rest} />
 	) : (

Client/src/Pages/AdvancedSettings/index.jsx

@@ -14,10 +14,11 @@ import { useState, useEffect } from "react";
 import Select from "../../Components/Inputs/Select";
 import { advancedSettingsValidation } from "../../Validation/validation";
 import { buildErrors, hasValidationErrors } from "../../Validation/error";
+import { useIsAdmin } from "../../Hooks/useIsAdmin";
 
-const AdvancedSettings = ({ isAdmin }) => {
+const AdvancedSettings = () => {
 	const navigate = useNavigate();
-
+	const isAdmin = useIsAdmin;
 	useEffect(() => {
 		if (!isAdmin) {
 			navigate("/");

Client/src/Pages/Maintenance/index.jsx

@@ -8,13 +8,14 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../main";
 import Breadcrumbs from "../../Components/Breadcrumbs";
 import { useNavigate } from "react-router-dom";
+import { useIsAdmin } from "../../Hooks/useIsAdmin";
 
-const Maintenance = ({ isAdmin }) => {
+const Maintenance = () => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const { authToken } = useSelector((state) => state.auth);
 	const { rowsPerPage } = useSelector((state) => state.ui.maintenance);
-
+	const isAdmin = useIsAdmin();
 	const [maintenanceWindows, setMaintenanceWindows] = useState([]);
 	const [maintenanceWindowCount, setMaintenanceWindowCount] = useState(0);
 	const [page, setPage] = useState(0);
@@ -99,7 +100,7 @@ const Maintenance = ({ isAdmin }) => {
 						"Stop sending alerts in maintenance windows",
 					]}
 					link="/maintenance/create"
-					isAdmin={true}
+					isAdmin={isAdmin}
 				/>
 			)}
 		</Box>

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

@@ -32,14 +32,16 @@ import SkeletonLayout from "./skeleton";
 import "./index.css";
 import useUtils from "../utils";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
+import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 
 /**
  * Details page component displaying monitor details and related information.
  * @component
  */
-const DetailsPage = ({ isAdmin }) => {
+const DetailsPage = () => {
 	const theme = useTheme();
 	const { statusColor, statusStyles, statusMsg, determineState } = useUtils();
+	const isAdmin = useIsAdmin();
 	const [monitor, setMonitor] = useState({});
 	const { monitorId } = useParams();
 	const { authToken } = useSelector((state) => state.auth);

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

@@ -12,10 +12,12 @@ import StatusBox from "./StatusBox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import Greeting from "../../../Utils/greeting";
 import { CurrentMonitoring } from "./CurrentMonitoring";
+import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 
-const Monitors = ({ isAdmin }) => {
+const Monitors = () => {
 	const theme = useTheme();
 	const navigate = useNavigate();
+	const isAdmin = useIsAdmin();
 	const monitorState = useSelector((state) => state.uptimeMonitors);
 	const authState = useSelector((state) => state.auth);
 	const dispatch = useDispatch({});

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

@@ -21,10 +21,12 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import PieChart from "./Charts/PieChart";
 import useUtils from "../../Monitors/utils";
 import "./index.css";
+import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 
-const PageSpeedDetails = ({ isAdmin }) => {
+const PageSpeedDetails = () => {
 	const theme = useTheme();
 	const navigate = useNavigate();
+	const isAdmin = useIsAdmin();
 	const { statusColor, pagespeedStatusMsg, determineState } = useUtils();
 	const [monitor, setMonitor] = useState({});
 	const [audits, setAudits] = useState({});

Client/src/Pages/PageSpeed/index.jsx

@@ -12,11 +12,12 @@ import SkeletonLayout from "./skeleton";
 import Card from "./card";
 import { networkService } from "../../main";
 import { Heading } from "../../Components/Heading";
-const PageSpeed = ({ isAdmin }) => {
+import { useIsAdmin } from "../../Hooks/useIsAdmin";
+const PageSpeed = () => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
 	const navigate = useNavigate();
-
+	const isAdmin = useIsAdmin();
 	const { user, authToken } = useSelector((state) => state.auth);
 	const [isLoading, setIsLoading] = useState(true);
 	const [monitors, setMonitors] = useState([]);

Client/src/Pages/Settings/index.jsx

@@ -23,11 +23,13 @@ import { networkService } from "../../main";
 import { settingsValidation } from "../../Validation/validation";
 import { useNavigate } from "react-router";
 import Dialog from "../../Components/Dialog";
+import { useIsAdmin } from "../../Hooks/useIsAdmin";
 
 const SECONDS_PER_DAY = 86400;
 
-const Settings = ({ isAdmin }) => {
+const Settings = () => {
 	const theme = useTheme();
+	const isAdmin = useIsAdmin();
 	const { user, authToken } = useSelector((state) => state.auth);
 	const { checkTTL } = user;
 	const { isLoading } = useSelector((state) => state.uptimeMonitors);

Client/src/Routes/index.jsx

@@ -28,18 +28,9 @@ import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance";
 import PageSpeedDetails from "../Pages/PageSpeed/Details";
 import PageSpeedConfigure from "../Pages/PageSpeed/Configure";
 import withAdminCheck from "../Components/HOC/withAdminCheck";
-import withAdminProp from "../Components/HOC/withAdminProp";
 
 const Routes = () => {
 	const AdminCheckedRegister = withAdminCheck(Register);
-	const MonitorsWithAdminProp = withAdminProp(Monitors);
-	const MonitorDetailsWithAdminProp = withAdminProp(Details);
-	const PageSpeedWithAdminProp = withAdminProp(PageSpeed);
-	const PageSpeedDetailsWithAdminProp = withAdminProp(PageSpeedDetails);
-	const MaintenanceWithAdminProp = withAdminProp(Maintenance);
-	const SettingsWithAdminProp = withAdminProp(Settings);
-	const AdvancedSettingsWithAdminProp = withAdminProp(AdvancedSettings);
-	const InfrastructureDetailsWithAdminProp = withAdminProp(InfrastructureDetails);
 	return (
 		<LibRoutes>
 			<Route
@@ -52,7 +43,7 @@ const Routes = () => {
 				/>
 				<Route
 					path="/monitors"
-					element={<MonitorsWithAdminProp />}
+					element={<Monitors />}
 				/>
 				<Route
 					path="/monitors/create/:monitorId?"
@@ -60,7 +51,7 @@ const Routes = () => {
 				/>
 				<Route
 					path="/monitors/:monitorId/"
-					element={<MonitorDetailsWithAdminProp />}
+					element={<Details />}
 				/>
 				<Route
 					path="/monitors/configure/:monitorId/"
@@ -68,7 +59,7 @@ const Routes = () => {
 				/>
 				<Route
 					path="pagespeed"
-					element={<PageSpeedWithAdminProp />}
+					element={<PageSpeed />}
 				/>
 				<Route
 					path="pagespeed/create"
@@ -76,7 +67,7 @@ const Routes = () => {
 				/>
 				<Route
 					path="pagespeed/:monitorId"
-					element={<PageSpeedDetailsWithAdminProp />}
+					element={<PageSpeedDetails />}
 				/>
 				<Route
 					path="pagespeed/configure/:monitorId"
@@ -92,9 +83,8 @@ const Routes = () => {
 				/>
 				<Route
 					path="infrastructure/:monitorId"
-					element={<InfrastructureDetailsWithAdminProp />}
+					element={<InfrastructureDetails />}
 				/>
-
 				<Route
 					path="incidents/:monitorId?"
 					element={<Incidents />}
@@ -110,7 +100,7 @@ const Routes = () => {
 				/>
 				<Route
 					path="maintenance"
-					element={<MaintenanceWithAdminProp />}
+					element={<Maintenance />}
 				/>
 				<Route
 					path="/maintenance/create/:maintenanceWindowId?"
@@ -118,11 +108,11 @@ const Routes = () => {
 				/>
 				<Route
 					path="settings"
-					element={<SettingsWithAdminProp />}
+					element={<Settings />}
 				/>
 				<Route
 					path="advanced-settings"
-					element={<AdvancedSettingsWithAdminProp />}
+					element={<AdvancedSettings />}
 				/>
 				<Route
 					path="account/profile"
@@ -130,21 +120,11 @@ const Routes = () => {
 				/>
 				<Route
 					path="account/password"
-					element={
-						<ProtectedRoute
-							Component={Account}
-							open="password"
-						/>
-					}
+					element={<Account open={"password"} />}
 				/>
 				<Route
 					path="account/team"
-					element={
-						<ProtectedRoute
-							Component={Account}
-							open="team"
-						/>
-					}
+					element={<Account open={"team"} />}
 				/>
 			</Route>
 
@@ -190,13 +170,3 @@ const Routes = () => {
 };
 
 export { Routes };
-
-/* import { createBrowserRouter } from "react-router-dom";
-
-const router = createBrowserRouter({
-  {
-    path: "/",
-  }
-});
-
-export { router }; */