Merge pull request #1369 from bluewave-labs/refactor/routes

Refactor/routes

Client/src/App.jsx

@@ -1,56 +1,18 @@
 import { useEffect } from "react";
-import { Routes, Route, Navigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
-import NotFound from "./Pages/NotFound";
-import Login from "./Pages/Auth/Login";
-import Register from "./Pages/Auth/Register/Register";
-import Account from "./Pages/Account";
-import Uptime from "./Pages/Uptime/Home";
-import CreateMonitor from "./Pages/Uptime/CreateUptime";
-import CreateInfrastructureMonitor from "./Pages/Infrastructure/CreateMonitor";
-import Incidents from "./Pages/Incidents";
-import Status from "./Pages/Status";
-import Integrations from "./Pages/Integrations";
-import Settings from "./Pages/Settings";
-import ForgotPassword from "./Pages/Auth/ForgotPassword";
-import CheckEmail from "./Pages/Auth/CheckEmail";
-import SetNewPassword from "./Pages/Auth/SetNewPassword";
-import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed";
-import ProtectedRoute from "./Components/ProtectedRoute";
-import UptimeDetails from "./Pages/Uptime/Details";
-import AdvancedSettings from "./Pages/AdvancedSettings";
-import Maintenance from "./Pages/Maintenance";
-import Configure from "./Pages/Uptime/Configure";
-import PageSpeed from "./Pages/PageSpeed";
-import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
-import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenance";
-import PageSpeedDetails from "./Pages/PageSpeed/Details";
-import PageSpeedConfigure from "./Pages/PageSpeed/Configure";
-import HomeLayout from "./Components/Layouts/HomeLayout";
-import withAdminCheck from "./Components/HOC/withAdminCheck";
-import withAdminProp from "./Components/HOC/withAdminProp";
 import { ThemeProvider } from "@emotion/react";
 import lightTheme from "./Utils/Theme/lightTheme";
 import darkTheme from "./Utils/Theme/darkTheme";
 import { CssBaseline, GlobalStyles } from "@mui/material";
 import { getAppSettings } from "./Features/Settings/settingsSlice";
 import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
-import { Infrastructure } from "./Pages/Infrastructure";
-import InfrastructureDetails from "./Pages/Infrastructure/Details";
+import { Routes } from "./Routes";
+
 function App() {
-	const AdminCheckedRegister = withAdminCheck(Register);
-	const UptimeWithAdminProp = withAdminProp(Uptime);
-	const UptimeDetailsWithAdminProp = withAdminProp(UptimeDetails);
-	const PageSpeedWithAdminProp = withAdminProp(PageSpeed);
-	const PageSpeedDetailsWithAdminProp = withAdminProp(PageSpeedDetails);
-	const MaintenanceWithAdminProp = withAdminProp(Maintenance);
-	const SettingsWithAdminProp = withAdminProp(Settings);
-	const AdvancedSettingsWithAdminProp = withAdminProp(AdvancedSettings);
-	const InfrastructureDetailsWithAdminProp = withAdminProp(InfrastructureDetails);
 	const mode = useSelector((state) => state.ui.mode);
 	const { authToken } = useSelector((state) => state.auth);
 	const dispatch = useDispatch();
@@ -82,161 +44,7 @@ function App() {
 					};
 				}}
 			/>
-			{/* Extract Routes to Routes */}
-			<Routes>
-				<Route
-					exact
-					path="/"
-					element={<HomeLayout />}
-				>
-					<Route
-						exact
-						path="/"
-						element={<Navigate to="/uptime" />}
-					/>
-					<Route
-						path="/uptime"
-						element={<ProtectedRoute Component={UptimeWithAdminProp} />}
-					/>
-					<Route
-						path="/uptime/create/:monitorId?"
-						element={<ProtectedRoute Component={CreateMonitor} />}
-					/>
-					<Route
-						path="/uptime/:monitorId/"
-						element={<ProtectedRoute Component={UptimeDetailsWithAdminProp} />}
-					/>
-					<Route
-						path="/uptime/configure/:monitorId/"
-						element={<ProtectedRoute Component={Configure} />}
-					/>
-					<Route
-						path="pagespeed"
-						element={<ProtectedRoute Component={PageSpeedWithAdminProp} />}
-					/>
-					<Route
-						path="pagespeed/create"
-						element={<ProtectedRoute Component={CreatePageSpeed} />}
-					/>
-					<Route
-						path="pagespeed/:monitorId"
-						element={<ProtectedRoute Component={PageSpeedDetailsWithAdminProp} />}
-					/>
-					<Route
-						path="pagespeed/configure/:monitorId"
-						element={<ProtectedRoute Component={PageSpeedConfigure} />}
-					/>
-					<Route
-						path="infrastructure"
-						element={<ProtectedRoute Component={Infrastructure} />}
-					/>
-					<Route
-						path="infrastructure/create"
-						element={<ProtectedRoute Component={CreateInfrastructureMonitor} />}
-					/>
-					<Route
-						path="infrastructure/:monitorId"
-						element={<ProtectedRoute Component={InfrastructureDetailsWithAdminProp} />}
-					/>
-
-					<Route
-						path="incidents/:monitorId?"
-						element={<ProtectedRoute Component={Incidents} />}
-					/>
-
-					<Route
-						path="status"
-						element={<ProtectedRoute Component={Status} />}
-					/>
-					<Route
-						path="integrations"
-						element={<ProtectedRoute Component={Integrations} />}
-					/>
-					<Route
-						path="maintenance"
-						element={<ProtectedRoute Component={MaintenanceWithAdminProp} />}
-					/>
-					<Route
-						path="/maintenance/create/:maintenanceWindowId?"
-						element={<CreateNewMaintenanceWindow />}
-					/>
-					<Route
-						path="settings"
-						element={<ProtectedRoute Component={SettingsWithAdminProp} />}
-					/>
-					<Route
-						path="advanced-settings"
-						element={<ProtectedRoute Component={AdvancedSettingsWithAdminProp} />}
-					/>
-					<Route
-						path="account/profile"
-						element={
-							<ProtectedRoute
-								Component={Account}
-								open="profile"
-							/>
-						}
-					/>
-					<Route
-						path="account/password"
-						element={
-							<ProtectedRoute
-								Component={Account}
-								open="password"
-							/>
-						}
-					/>
-					<Route
-						path="account/team"
-						element={
-							<ProtectedRoute
-								Component={Account}
-								open="team"
-							/>
-						}
-					/>
-				</Route>
-
-				<Route
-					exact
-					path="/login"
-					element={<Login />}
-				/>
-
-				<Route
-					exact
-					path="/register"
-					element={<AdminCheckedRegister />}
-				/>
-
-				<Route
-					exact
-					path="/register/:token"
-					element={<Register />}
-				/>
-
-				<Route
-					path="*"
-					element={<NotFound />}
-				/>
-
-				<Route
-					path="/forgot-password"
-					element={<ForgotPassword />}
-				/>
-				<Route
-					path="/check-email"
-					element={<CheckEmail />}
-				/>
-				<Route
-					path="/set-new-password/:token"
-					element={<SetNewPassword />}
-				/>
-				<Route
-					path="/new-password-confirmed"
-					element={<NewPasswordConfirmed />}
-				/>
-			</Routes>
+			<Routes />
 			<ToastContainer />
 		</ThemeProvider>
 	);

Client/src/Components/ProtectedRoute/index.jsx

@@ -3,21 +3,20 @@ 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.
+ * ProtectedRoute is a wrapper component that ensures only authenticated users
+ * can access the wrapped content. It checks authentication status (e.g., from Redux or Context).
+ * If the user is authenticated, it renders the children; otherwise, it redirects 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.
+ * @param {React.ReactNode} props.children - The children to render if the user is authenticated.
+ * @returns {React.ReactElement} The children wrapped in a protected route or a redirect to the login page.
  */
 
-const ProtectedRoute = ({ Component, ...rest }) => {
+const ProtectedRoute = ({ children }) => {
 	const authState = useSelector((state) => state.auth);
 
 	return authState.authToken ? (
-		<Component {...rest} />
+		children
 	) : (
 		<Navigate
 			to="/login"
@@ -27,7 +26,7 @@ const ProtectedRoute = ({ Component, ...rest }) => {
 };
 
 ProtectedRoute.propTypes = {
-	Component: PropTypes.elementType.isRequired,
+	children: PropTypes.elementType.isRequired,
 };
 
 export default ProtectedRoute;

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/PageSpeed/Details/index.jsx

@@ -21,10 +21,12 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import PieChart from "./Charts/PieChart";
 import useUtils from "../../Uptime/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/Pages/Uptime/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);