diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 5e7ab4e97..3b28e285a 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,37 +1,8 @@ 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"; @@ -39,18 +10,9 @@ 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 */} - - } - > - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - - } - /> - - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - - } - /> - - } - /> - - } - /> - - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - } - /> - } - /> - } - /> - + ); diff --git a/Client/src/Components/HOC/withAdminProp.jsx b/Client/src/Components/HOC/withAdminProp.jsx deleted file mode 100644 index b55893119..000000000 --- a/Client/src/Components/HOC/withAdminProp.jsx +++ /dev/null @@ -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 ( - - ); - }; - - const wrappedComponentName = - WrappedComponent.displayName || WrappedComponent.name || "Component"; - WithAdminProp.displayName = `WithAdminProp(${wrappedComponentName})`; - - return WithAdminProp; -}; - -export default withAdminProp; diff --git a/Client/src/Components/ProtectedRoute/index.jsx b/Client/src/Components/ProtectedRoute/index.jsx index 5b1032ab8..7a71aef7e 100644 --- a/Client/src/Components/ProtectedRoute/index.jsx +++ b/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 ? ( - + children ) : ( { }; ProtectedRoute.propTypes = { - Component: PropTypes.elementType.isRequired, + children: PropTypes.elementType.isRequired, }; export default ProtectedRoute; diff --git a/Client/src/Pages/AdvancedSettings/index.jsx b/Client/src/Pages/AdvancedSettings/index.jsx index 90bcf21d6..433829f28 100644 --- a/Client/src/Pages/AdvancedSettings/index.jsx +++ b/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("/"); diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx index fd0d7edc3..5c2930294 100644 --- a/Client/src/Pages/Maintenance/index.jsx +++ b/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} /> )} diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 946a0283b..b0db13432 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/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({}); diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 9b84b0286..b18148aa8 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/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([]); diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx index 8a5e73bc3..aab9fa537 100644 --- a/Client/src/Pages/Settings/index.jsx +++ b/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); diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx index ac89041ec..43dd86ca4 100644 --- a/Client/src/Pages/Uptime/Details/index.jsx +++ b/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); diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index 178f3dc90..cf6ff715e 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -12,12 +12,14 @@ import StatusBox from "./StatusBox"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import Greeting from "../../../Utils/greeting"; import { CurrentMonitoring } from "./CurrentMonitoring"; +import { useIsAdmin } from "../../../Hooks/useIsAdmin"; const BREADCRUMBS = [{ name: `Uptime`, path: "/uptime" }]; -const UptimeMonitors = ({ isAdmin }) => { +const UptimeMonitors = () => { const theme = useTheme(); const navigate = useNavigate(); + const isAdmin = useIsAdmin(); const uptimeMonitorsState = useSelector((state) => state.uptimeMonitors); const authState = useSelector((state) => state.auth); const dispatch = useDispatch({}); diff --git a/Client/src/Routes/index.jsx b/Client/src/Routes/index.jsx new file mode 100644 index 000000000..5fc764b6a --- /dev/null +++ b/Client/src/Routes/index.jsx @@ -0,0 +1,176 @@ +import { Navigate, Route, Routes as LibRoutes } from "react-router"; +import HomeLayout from "../Components/Layouts/HomeLayout"; +import { Infrastructure } from "../Pages/Infrastructure"; +import InfrastructureDetails from "../Pages/Infrastructure/Details"; +import NotFound from "../Pages/NotFound"; +import Login from "../Pages/Auth/Login"; +import Register from "../Pages/Auth/Register/Register"; +import Account from "../Pages/Account"; +import Monitors 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 Details 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 withAdminCheck from "../Components/HOC/withAdminCheck"; + +const Routes = () => { + const AdminCheckedRegister = withAdminCheck(Register); + return ( + + + + + } + > + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + + + } + /> + + } + /> + + } + /> + + } + /> + } + /> + } + /> + } + /> + + } + /> + + ); +}; + +export { Routes };