Merge pull request #1663 from bluewave-labs/fix/fe/consistent-initial-state

Fix/fe/consistent initial state

Client/src/Components/Fallback/index.css

@@ -19,6 +19,22 @@
 	font-size: var(--env-var-font-size-medium);
 }
 
+[class*="fallback__"] .background-pattern-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 0;
+
+	width: 100%;
+	max-width: 800px;
+	height: 100%;
+	max-height: 800px;
+
+	background-position: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+}
 .fallback__status > .MuiStack-root {
 	margin-left: var(--env-var-spacing-2);
 }

Client/src/Components/Layouts/HomeLayout/index.css

@@ -26,20 +26,3 @@
 	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
 	flex: 1;
 }
-
-.home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
-	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 0;
-
-	width: 100%;
-	max-width: 800px;
-	height: 100%;
-	max-height: 800px;
-
-	background-position: center;
-	background-size: cover;
-	background-repeat: no-repeat;
-}

Client/src/Components/MonitorStatusHeader/index.jsx

@@ -8,7 +8,7 @@ import ConfigButton from "./ConfigButton";
 import SkeletonLayout from "./skeleton";
 import PropTypes from "prop-types";
 
-const MonitorHeader = ({ shouldRender = true, isAdmin, monitor }) => {
+const MonitorStatusHeader = ({ shouldRender = true, isAdmin, monitor }) => {
 	const theme = useTheme();
 	const { statusColor, statusMsg, determineState } = useUtils();
 	if (!shouldRender) {
@@ -21,7 +21,7 @@ const MonitorHeader = ({ shouldRender = true, isAdmin, monitor }) => {
 			justifyContent="space-between"
 		>
 			<Stack>
-				<Typography variant="h1">{monitor.name}</Typography>
+				<Typography variant="h1">{monitor?.name}</Typography>
 				<Stack
 					direction="row"
 					alignItems={"center"}
@@ -39,16 +39,16 @@ const MonitorHeader = ({ shouldRender = true, isAdmin, monitor }) => {
 			</Stack>
 			<ConfigButton
 				shouldRender={isAdmin}
-				monitorId={monitor._id}
+				monitorId={monitor?._id}
 			/>
 		</Stack>
 	);
 };
 
-MonitorHeader.propTypes = {
+MonitorStatusHeader.propTypes = {
 	shouldRender: PropTypes.bool,
 	isAdmin: PropTypes.bool,
 	monitor: PropTypes.object,
 };
 
-export default MonitorHeader;
+export default MonitorStatusHeader;

Client/src/Components/NetworkErrorFallback/index.jsx

@@ -0,0 +1,85 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import Skeleton from "../../assets/Images/create-placeholder.svg?react";
+import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
+import Background from "../../assets/Images/background-grid.svg?react";
+import { useSelector } from "react-redux";
+
+/**
+ * Fallback component to display a fallback UI for network errors
+ *
+ * @returns {JSX.Element} The rendered fallback UI.
+ */
+
+const NetworkErrorFallback = () => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+
+	return (
+		<Box
+			className="page-speed"
+			position="relative"
+			border={1}
+			borderColor={theme.palette.primary.lowContrast}
+			borderRadius={theme.shape.borderRadius}
+			backgroundColor={theme.palette.primary.main}
+			overflow="hidden"
+			sx={{
+				borderStyle: "dashed",
+			}}
+		>
+			<Stack
+				alignItems="center"
+				gap={theme.spacing(20)}
+				sx={{
+					width: "fit-content",
+					margin: "auto",
+					marginTop: "100px",
+				}}
+			>
+				{mode === "light" ? (
+					<Skeleton style={{ zIndex: 1 }} />
+				) : (
+					<SkeletonDark style={{ zIndex: 1 }} />
+				)}
+				<Box
+					sx={{
+						"& svg g g:last-of-type path": {
+							stroke: theme.palette.primary.lowContrast,
+						},
+						position: "absolute",
+						top: "0",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+						width: "100%",
+						maxWidth: "800px",
+						height: "100%",
+						maxHeight: "800px",
+						backgroundPosition: "center",
+						backgroundSize: "cover",
+						backgroundRepeat: "no-repeat",
+					}}
+				>
+					<Background style={{ width: "100%" }} />
+				</Box>
+				<Stack
+					gap={theme.spacing(4)}
+					alignItems="center"
+					maxWidth={"300px"}
+					zIndex={1}
+				>
+					<Typography
+						variant="h1"
+						marginY={theme.spacing(4)}
+						color={theme.palette.primary.contrastTextTertiary}
+					>
+						Network error
+					</Typography>
+					<Typography>Please check your connection</Typography>
+				</Stack>
+			</Stack>
+		</Box>
+	);
+};
+
+export default NetworkErrorFallback;

Client/src/Components/Table/TablePagination/index.jsx

@@ -6,8 +6,8 @@ import SelectorVertical from "../../../assets/icons/selector-vertical.svg?react"
 
 Pagination.propTypes = {
 	paginationLabel: PropTypes.string, // Label for the pagination.
-	itemCount: PropTypes.number.isRequired, // Total number of items for pagination.
-	page: PropTypes.number.isRequired, // Current page index.
+	itemCount: PropTypes.number, // Total number of items for pagination.
+	page: PropTypes.number, // Current page index.
 	rowsPerPage: PropTypes.number.isRequired, // Number of rows displayed per page.
 	handleChangePage: PropTypes.func.isRequired, // Function to handle page changes.
 	handleChangeRowsPerPage: PropTypes.func, // Function to handle changes in rows per page.
@@ -29,9 +29,9 @@ const ROWS_PER_PAGE_OPTIONS = [5, 10, 15, 25];
  */
 function Pagination({
 	paginationLabel,
-	itemCount,
-	page,
-	rowsPerPage,
+	itemCount = 0,
+	page = 0,
+	rowsPerPage = 5,
 	handleChangePage,
 	handleChangeRowsPerPage,
 }) {

Client/src/Components/Table/index.jsx

@@ -32,7 +32,14 @@ import { useTheme } from "@emotion/react";
  * @returns {JSX.Element} The rendered table component.
  */
 
-const DataTable = ({ headers, data, config = { emptyView: "No data" } }) => {
+const DataTable = ({
+	headers = [],
+	data = [],
+	config = {
+		emptyView: "No data",
+		onRowClick: () => {},
+	},
+}) => {
 	const theme = useTheme();
 	if ((headers?.length ?? 0) === 0) {
 		return "No data";
@@ -117,9 +124,9 @@ DataTable.propTypes = {
 			render: PropTypes.func.isRequired,
 		})
 	).isRequired,
-	data: PropTypes.array.isRequired,
+	data: PropTypes.array,
 	config: PropTypes.shape({
-		onRowClick: PropTypes.func.isRequired,
+		onRowClick: PropTypes.func,
 		rowSX: PropTypes.object,
 		emptyView: PropTypes.node,
 	}),