From 66dc6dbc1a8a52ceb39f427bb05845cb40ba5c26 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 12 Dec 2024 00:09:41 -0500 Subject: [PATCH 1/7] refactor: extracting routes to own component --- Client/src/App.jsx | 199 +--------------------------------- Client/src/Routes/index.jsx | 209 ++++++++++++++++++++++++++++++++++++ 2 files changed, 213 insertions(+), 195 deletions(-) create mode 100644 Client/src/Routes/index.jsx diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 82c8203a8..b27373071 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,37 +1,9 @@ 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 Monitors from "./Pages/Monitors/Home"; -import CreateMonitor from "./Pages/Monitors/CreateMonitor"; -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/Monitors/Details"; -import AdvancedSettings from "./Pages/AdvancedSettings"; -import Maintenance from "./Pages/Maintenance"; -import Configure from "./Pages/Monitors/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 +11,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 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); const mode = useSelector((state) => state.ui.mode); const { authToken } = useSelector((state) => state.auth); const dispatch = useDispatch(); @@ -82,161 +45,7 @@ function App() { }; }} /> - {/* Extract Routes to Routes */} - - } - > - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - - } - /> - - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - - } - /> - - } - /> - - } - /> - - - } - /> - - } - /> - - } - /> - - } - /> - - } - /> - } - /> - } - /> - } - /> - + ); diff --git a/Client/src/Routes/index.jsx b/Client/src/Routes/index.jsx new file mode 100644 index 000000000..8397729ca --- /dev/null +++ b/Client/src/Routes/index.jsx @@ -0,0 +1,209 @@ +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/Monitors/Home"; +import CreateMonitor from "../Pages/Monitors/CreateMonitor"; +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/Monitors/Details"; +import AdvancedSettings from "../Pages/AdvancedSettings"; +import Maintenance from "../Pages/Maintenance"; +import Configure from "../Pages/Monitors/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"; +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 ( + + } + > + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + + } + /> + + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + + } + /> + + } + /> + + } + /> + + + } + /> + + } + /> + + } + /> + + } + /> + + } + /> + } + /> + } + /> + } + /> + + ); +}; + +export { Routes }; + +/* import { createBrowserRouter } from "react-router-dom"; + +const router = createBrowserRouter({ + { + path: "/", + } +}); + +export { router }; */ From a70e96f1f3f32513ca0829c504f146d392e19693 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 12 Dec 2024 08:24:10 -0500 Subject: [PATCH 2/7] refactor: avoid repetition of the protected routes component --- .../src/Components/ProtectedRoute/index.jsx | 2 +- Client/src/Pages/Auth/Login.jsx | 1 + Client/src/Routes/index.jsx | 55 ++++++++----------- 3 files changed, 26 insertions(+), 32 deletions(-) diff --git a/Client/src/Components/ProtectedRoute/index.jsx b/Client/src/Components/ProtectedRoute/index.jsx index 5b1032ab8..c10ebba7f 100644 --- a/Client/src/Components/ProtectedRoute/index.jsx +++ b/Client/src/Components/ProtectedRoute/index.jsx @@ -15,7 +15,7 @@ import PropTypes from "prop-types"; const ProtectedRoute = ({ Component, ...rest }) => { const authState = useSelector((state) => state.auth); - + console.log("Protected"); return authState.authToken ? ( ) : ( diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index 6329835ef..89992b109 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -367,6 +367,7 @@ StepTwo.propTypes = { }; const Login = () => { + console.log("login"); const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); diff --git a/Client/src/Routes/index.jsx b/Client/src/Routes/index.jsx index 8397729ca..76c90784e 100644 --- a/Client/src/Routes/index.jsx +++ b/Client/src/Routes/index.jsx @@ -44,7 +44,7 @@ const Routes = () => { } + element={} > { /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> } + element={} /> { /> } + element={} /> } + element={} /> - } + element={} /> { } /> } /> @@ -171,11 +164,6 @@ const Routes = () => { element={} /> - } - /> - } @@ -192,6 +180,11 @@ const Routes = () => { path="/new-password-confirmed" element={} /> + + } + /> ); }; From 910080820bf339290dcc7c9c43cdb0c7e38cb840 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 12 Dec 2024 09:07:11 -0500 Subject: [PATCH 3/7] refactor: removed withAdminProps HOC and changed for custom hook reducing component wrapping --- Client/src/Components/HOC/withAdminProp.jsx | 25 ---------- .../src/Components/ProtectedRoute/index.jsx | 1 - Client/src/Pages/AdvancedSettings/index.jsx | 5 +- Client/src/Pages/Maintenance/index.jsx | 7 +-- Client/src/Pages/Monitors/Details/index.jsx | 4 +- Client/src/Pages/Monitors/Home/index.jsx | 4 +- Client/src/Pages/PageSpeed/Details/index.jsx | 4 +- Client/src/Pages/PageSpeed/index.jsx | 5 +- Client/src/Pages/Settings/index.jsx | 4 +- Client/src/Routes/index.jsx | 50 ++++--------------- 10 files changed, 32 insertions(+), 77 deletions(-) delete mode 100644 Client/src/Components/HOC/withAdminProp.jsx 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 c10ebba7f..1a8cf9aa0 100644 --- a/Client/src/Components/ProtectedRoute/index.jsx +++ b/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 ? ( ) : ( diff --git a/Client/src/Pages/AdvancedSettings/index.jsx b/Client/src/Pages/AdvancedSettings/index.jsx index 90bcf21d6..14ecb6f8f 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/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index ebb664b79..68d21903c 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/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); diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index 167fd1e67..15dc814df 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/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({}); diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index ca852e124..d25848ff2 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 "../../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({}); 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/Routes/index.jsx b/Client/src/Routes/index.jsx index 76c90784e..d3e14a02d 100644 --- a/Client/src/Routes/index.jsx +++ b/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 ( { /> } + element={} /> { /> } + element={
} /> { /> } + element={} /> { /> } + element={} /> { /> } + element={} /> - } @@ -110,7 +100,7 @@ const Routes = () => { /> } + element={} /> { /> } + element={} /> } + element={} /> { /> - } + element={} /> - } + element={} /> @@ -190,13 +170,3 @@ const Routes = () => { }; export { Routes }; - -/* import { createBrowserRouter } from "react-router-dom"; - -const router = createBrowserRouter({ - { - path: "/", - } -}); - -export { router }; */ From cce1ed610c92b1b1ec4c09c14f92166d7da4ef6e Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 12 Dec 2024 09:11:08 -0500 Subject: [PATCH 4/7] chore: delete console --- Client/src/Pages/Auth/Login.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx index 89992b109..6329835ef 100644 --- a/Client/src/Pages/Auth/Login.jsx +++ b/Client/src/Pages/Auth/Login.jsx @@ -367,7 +367,6 @@ StepTwo.propTypes = { }; const Login = () => { - console.log("login"); const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); From ee4ef158748aacd62738cfa4f5f3155fc75cff42 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 12 Dec 2024 09:20:24 -0500 Subject: [PATCH 5/7] resolving conflicts --- .../Infrastructure/CreateMonitor/index.jsx | 1 - .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 2 +- Client/src/Routes/index.jsx | 18 +++++++++--------- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx index df7829930..56162d2a5 100644 --- a/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx +++ b/Client/src/Pages/Infrastructure/CreateMonitor/index.jsx @@ -397,7 +397,6 @@ const CreateInfrastructureMonitor = () => { label="Check frequency" value={infrastructureMonitor.interval || 15} onChange={handleChange} - onBlur={} items={SELECT_VALUES} /> diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index ccab3442f..30592e2eb 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -20,7 +20,7 @@ import LoadingButton from "@mui/lab/LoadingButton"; import Breadcrumbs from "../../../Components/Breadcrumbs"; import TextInput from "../../../Components/Inputs/TextInput"; import { HttpAdornment } from "../../../Components/Inputs/TextInput/Adornments"; -import { ConfigBox } from "../../Monitors/styled"; +import { ConfigBox } from "../../Uptime/styled"; import { createToast } from "../../../Utils/toastUtils"; import Radio from "../../../Components/Inputs/Radio"; diff --git a/Client/src/Routes/index.jsx b/Client/src/Routes/index.jsx index d3e14a02d..ba7822fa7 100644 --- a/Client/src/Routes/index.jsx +++ b/Client/src/Routes/index.jsx @@ -6,8 +6,8 @@ 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/Monitors/Home"; -import CreateMonitor from "../Pages/Monitors/CreateMonitor"; +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"; @@ -18,10 +18,10 @@ 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/Monitors/Details"; +import Details from "../Pages/Uptime/Details"; import AdvancedSettings from "../Pages/AdvancedSettings"; import Maintenance from "../Pages/Maintenance"; -import Configure from "../Pages/Monitors/Configure"; +import Configure from "../Pages/Uptime/Configure"; import PageSpeed from "../Pages/PageSpeed"; import CreatePageSpeed from "../Pages/PageSpeed/CreatePageSpeed"; import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance"; @@ -39,22 +39,22 @@ const Routes = () => { > } + element={} /> } /> } /> } /> } /> Date: Thu, 12 Dec 2024 14:43:57 -0500 Subject: [PATCH 6/7] refactor: simplify protected route component --- Client/src/Components/ProtectedRoute/index.jsx | 18 +++++++++--------- Client/src/Routes/index.jsx | 6 +++++- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/Client/src/Components/ProtectedRoute/index.jsx b/Client/src/Components/ProtectedRoute/index.jsx index 1a8cf9aa0..7a71aef7e 100644 --- a/Client/src/Components/ProtectedRoute/index.jsx +++ b/Client/src/Components/ProtectedRoute/index.jsx @@ -3,20 +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/Routes/index.jsx b/Client/src/Routes/index.jsx index ba7822fa7..5fc764b6a 100644 --- a/Client/src/Routes/index.jsx +++ b/Client/src/Routes/index.jsx @@ -35,7 +35,11 @@ const Routes = () => { } + element={ + + + + } > Date: Fri, 13 Dec 2024 17:56:37 -0500 Subject: [PATCH 7/7] fix: function not called --- Client/src/Pages/AdvancedSettings/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/AdvancedSettings/index.jsx b/Client/src/Pages/AdvancedSettings/index.jsx index 14ecb6f8f..433829f28 100644 --- a/Client/src/Pages/AdvancedSettings/index.jsx +++ b/Client/src/Pages/AdvancedSettings/index.jsx @@ -18,7 +18,7 @@ import { useIsAdmin } from "../../Hooks/useIsAdmin"; const AdvancedSettings = () => { const navigate = useNavigate(); - const isAdmin = useIsAdmin; + const isAdmin = useIsAdmin(); useEffect(() => { if (!isAdmin) { navigate("/");