From a20fdb423a8158d4ce4c13d7631e1bbe1bcc8bff Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 9 Feb 2026 23:51:18 +0000 Subject: [PATCH] remove unused --- client/index.html | 2 +- client/src/{App.jsx => App.tsx} | 16 ++- client/src/Components/v1/StatBox/index.jsx | 149 --------------------- client/src/Hooks/useIsAdmin.js | 17 --- client/src/Hooks/useIsAdmin.ts | 18 +++ client/src/Hooks/useMonitorUtils.js | 72 ---------- client/src/{main.jsx => main.tsx} | 8 +- 7 files changed, 33 insertions(+), 249 deletions(-) rename client/src/{App.jsx => App.tsx} (74%) delete mode 100644 client/src/Components/v1/StatBox/index.jsx delete mode 100644 client/src/Hooks/useIsAdmin.js create mode 100644 client/src/Hooks/useIsAdmin.ts delete mode 100644 client/src/Hooks/useMonitorUtils.js rename client/src/{main.jsx => main.tsx} (66%) diff --git a/client/index.html b/client/index.html index 0b0f675b4..4f949edbb 100644 --- a/client/index.html +++ b/client/index.html @@ -18,7 +18,7 @@
diff --git a/client/src/App.jsx b/client/src/App.tsx similarity index 74% rename from client/src/App.jsx rename to client/src/App.tsx index 194a5bf5b..ef3625cad 100644 --- a/client/src/App.jsx +++ b/client/src/App.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, type CSSProperties } from "react"; import { useSelector } from "react-redux"; import "react-toastify/dist/ReactToastify.css"; import { ToastContainer } from "react-toastify"; @@ -9,9 +9,10 @@ import { CssBaseline, GlobalStyles } from "@mui/material"; import { logger } from "./Utils/Logger"; // Import the logger import { Routes } from "./Routes"; import AppLayout from "@/Components/v1/Layouts/AppLayout"; +import type { RootState } from "@/Types/state"; function App() { - const mode = useSelector((state) => state.ui.mode); + const mode = useSelector((state: RootState) => state.ui.mode); // Cleanup useEffect(() => { @@ -28,6 +29,7 @@ function App() { ); diff --git a/client/src/Components/v1/StatBox/index.jsx b/client/src/Components/v1/StatBox/index.jsx deleted file mode 100644 index e72f947b3..000000000 --- a/client/src/Components/v1/StatBox/index.jsx +++ /dev/null @@ -1,149 +0,0 @@ -import { Stack, Typography } from "@mui/material"; -import Image from "../Image/index.jsx"; -import { useTheme } from "@mui/material/styles"; -import PropTypes from "prop-types"; -import { useMonitorUtils } from "../../../Hooks/useMonitorUtils.js"; - -/** - * StatBox Component - * - * A reusable component that displays a statistic with a heading and subheading - * in a styled box with a gradient background. - * - * @component - * @param {Object} props - The component props - * @param {string} props.heading - The primary heading/title of the statistic - * @param {string|React.ReactNode} props.subHeading - The value or description of the statistic - * @param {boolean} [props.gradient=false] - Determines if the box should have a gradient background - * @param {string} [props.status] - The status of the statistic - * @param {Object} [props.sx] - Additional custom styling to be applied to the box - * - * @example - * return ( - * - * ) - * - * @returns {React.ReactElement} A styled box containing the statistic - */ - -const StatBox = ({ - img, - icon: Icon, - alt, - heading, - subHeading, - gradient = false, - status = "", - sx, -}) => { - const theme = useTheme(); - const { statusToTheme } = useMonitorUtils(); - const themeColor = statusToTheme[status]; - - const statusBoxStyles = gradient - ? { - background: `linear-gradient(to bottom right, ${theme.palette[themeColor].main} 30%, ${theme.palette[themeColor].lowContrast} 70%)`, - borderColor: theme.palette[themeColor].lowContrast, - } - : { - background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`, - borderColor: theme.palette.primary.lowContrast, - }; - - const headingStyles = gradient - ? { - color: theme.palette[themeColor].contrastText, - } - : { - color: theme.palette.primary.contrastTextSecondary, - }; - - const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600 }; - const detailTextStyles = gradient - ? { - color: theme.palette[themeColor].contrastText, - "& span": { - color: theme.palette[themeColor].contrastText, - ...spanFixedStyles, - }, - } - : { - color: theme.palette.primary.contrastText, - "& span": { - color: theme.palette.primary.contrastTextTertiary, - ...spanFixedStyles, - }, - }; - - const responsiveWidths = { - default: `calc(25% - (3 * ${theme.spacing(8)} / 4))`, - md: `calc(50% - (1 * ${theme.spacing(8)} / 2))`, - }; - - return ( - - {img && ( - {alt} - )} - {Icon && ( - - )} - - {heading} - {subHeading} - - - ); -}; - -StatBox.propTypes = { - heading: PropTypes.string, - subHeading: PropTypes.node, - gradient: PropTypes.bool, - status: PropTypes.string, - sx: PropTypes.object, - icon: PropTypes.elementType, - img: PropTypes.node, - alt: PropTypes.string, -}; - -export default StatBox; diff --git a/client/src/Hooks/useIsAdmin.js b/client/src/Hooks/useIsAdmin.js deleted file mode 100644 index 8abf78ac9..000000000 --- a/client/src/Hooks/useIsAdmin.js +++ /dev/null @@ -1,17 +0,0 @@ -import { useSelector } from "react-redux"; - -const useIsAdmin = () => { - const { user } = useSelector((state) => state.auth); - const isAdmin = - (user?.role?.includes("admin") ?? false) || - (user?.role?.includes("superadmin") ?? false); - return isAdmin; -}; - -const useIsSuperAdmin = () => { - const { user } = useSelector((state) => state.auth); - const isSuperAdmin = user?.role?.includes("superadmin"); - return isSuperAdmin; -}; - -export { useIsAdmin, useIsSuperAdmin }; diff --git a/client/src/Hooks/useIsAdmin.ts b/client/src/Hooks/useIsAdmin.ts new file mode 100644 index 000000000..3c94cca46 --- /dev/null +++ b/client/src/Hooks/useIsAdmin.ts @@ -0,0 +1,18 @@ +import type { RootState } from "@/Types/state"; +import { useSelector } from "react-redux"; + +const useIsAdmin = (): boolean => { + const { user } = useSelector((state: RootState) => state.auth); + const isAdmin = + (user?.role?.includes("admin") ?? false) || + (user?.role?.includes("superadmin") ?? false); + return isAdmin; +}; + +const useIsSuperAdmin = (): boolean => { + const { user } = useSelector((state: RootState) => state.auth); + const isSuperAdmin = user?.role?.includes("superadmin") ?? false; + return isSuperAdmin; +}; + +export { useIsAdmin, useIsSuperAdmin }; diff --git a/client/src/Hooks/useMonitorUtils.js b/client/src/Hooks/useMonitorUtils.js deleted file mode 100644 index b57c11a12..000000000 --- a/client/src/Hooks/useMonitorUtils.js +++ /dev/null @@ -1,72 +0,0 @@ -import { useCallback } from "react"; -import { useTheme } from "@mui/material"; - -const useMonitorUtils = () => { - const getMonitorWithPercentage = useCallback((monitor, theme) => { - let uptimePercentage = ""; - let percentageColor = ""; - - if (monitor?.uptimePercentage !== undefined) { - uptimePercentage = - monitor?.uptimePercentage === 0 - ? "0" - : (monitor?.uptimePercentage * 100).toFixed(2); - - percentageColor = - monitor?.uptimePercentage < 0.25 - ? theme.palette.error.main - : monitor?.uptimePercentage < 0.5 - ? theme.palette.warning.main - : monitor?.uptimePercentage < 0.75 - ? theme.palette.success.main - : theme.palette.success.main; - } - - return { - ...monitor, - percentage: uptimePercentage, - percentageColor, - monitor: monitor, - }; - }, []); - - const determineState = useCallback((monitor) => { - if (typeof monitor === "undefined") return "pending"; - if (monitor?.isActive === false) return "paused"; - if (monitor?.status === undefined) return "pending"; - return monitor?.status == true ? "up" : "down"; - }, []); - - const theme = useTheme(); - - const statusColor = { - up: theme.palette.success.lowContrast, - down: theme.palette.error.lowContrast, - paused: theme.palette.warning.lowContrast, - pending: theme.palette.warning.lowContrast, - }; - - const statusToTheme = { - up: "success", - down: "error", - paused: "warning", - pending: "secondary", - "cannot resolve": "tertiary", - }; - - const pagespeedStatusMsg = { - up: "Live (collecting data)", - down: "Inactive", - paused: "Paused", - }; - - return { - getMonitorWithPercentage, - determineState, - statusColor, - statusToTheme, - pagespeedStatusMsg, - }; -}; - -export { useMonitorUtils }; diff --git a/client/src/main.jsx b/client/src/main.tsx similarity index 66% rename from client/src/main.jsx rename to client/src/main.tsx index ad35d0303..813a839bd 100644 --- a/client/src/main.jsx +++ b/client/src/main.tsx @@ -3,14 +3,14 @@ import App from "./App.jsx"; import "./index.css"; import { BrowserRouter as Router } from "react-router-dom"; import { Provider } from "react-redux"; -import { persistor, store } from "./store"; +import { persistor, store } from "./store.js"; import { PersistGate } from "redux-persist/integration/react"; -import I18nLoader from "./Components/v1/I18nLoader"; -import { initApiClient } from "./Utils/ApiClient"; +import I18nLoader from "./Components/v1/I18nLoader/index.jsx"; +import { initApiClient } from "./Utils/ApiClient.js"; initApiClient(store); -ReactDOM.createRoot(document.getElementById("root")).render( +ReactDOM.createRoot(document.getElementById("root")!).render(