Update status page to use URL, no longer shows create fallback

Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -9,17 +9,17 @@ import { useNavigate } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
 
-const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting }) => {
+const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting, url, type }) => {
 	const theme = useTheme();
 	const location = useLocation();
 	const currentPath = location.pathname;
 	const navigate = useNavigate();
 
-	if (currentPath === "/status/public") {
+	if (currentPath.startsWith("/status/uptime/public")) {
 		return null;
 	}
 
-	if (currentPath.startsWith("/distributed-uptime/status/public")) {
+	if (currentPath.startsWith("/status/distributed/public")) {
 		return null;
 	}
 
@@ -42,7 +42,13 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting }) => {
 				<Button
 					variant="contained"
 					color="secondary"
-					onClick={() => navigate(`/status/configure`)}
+					onClick={() => {
+						if (type === "uptime") {
+							navigate(`/status/uptime/configure/${url}`);
+						} else {
+							navigate(`/status/distributed/configure/${url}`);
+						}
+					}}
 					sx={{
 						px: theme.spacing(5),
 						"& svg": {
@@ -62,11 +68,19 @@ const Controls = ({ isDeleteOpen, setIsDeleteOpen, isDeleting }) => {
 
 Controls.propTypes = {
 	isDeleting: PropTypes.bool,
+	url: PropTypes.string,
 	isDeleteOpen: PropTypes.bool.isRequired,
 	setIsDeleteOpen: PropTypes.func.isRequired,
 };
 
-const ControlsHeader = ({ statusPage, isDeleting, isDeleteOpen, setIsDeleteOpen }) => {
+const ControlsHeader = ({
+	statusPage,
+	isDeleting,
+	isDeleteOpen,
+	setIsDeleteOpen,
+	url,
+	type = "uptime",
+}) => {
 	const theme = useTheme();
 
 	return (
@@ -95,16 +109,20 @@ const ControlsHeader = ({ statusPage, isDeleting, isDeleteOpen, setIsDeleteOpen
 				isDeleting={isDeleting}
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}
+				url={url}
+				type={type}
 			/>
 		</Stack>
 	);
 };
 
 ControlsHeader.propTypes = {
+	url: PropTypes.string,
 	statusPage: PropTypes.object,
 	isDeleting: PropTypes.bool,
 	isDeleteOpen: PropTypes.bool.isRequired,
 	setIsDeleteOpen: PropTypes.func.isRequired,
+	type: PropTypes.string,
 };
 
 export default ControlsHeader;

Client/src/Pages/StatusPage/Status/index.jsx

@@ -16,25 +16,29 @@ import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useLocation } from "react-router-dom";
 import { useStatusPageDelete } from "./Hooks/useStatusPageDelete";
 import { useState } from "react";
+import { useParams } from "react-router-dom";
 
 const PublicStatus = () => {
+	const { url } = useParams();
+
 	// Local state
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	// Utils
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
 	const [statusPage, monitors, isLoading, networkError, fetchStatusPage] =
-		useStatusPageFetch();
-	const [deleteStatusPage, isDeleting] = useStatusPageDelete(fetchStatusPage);
+		useStatusPageFetch(false, url);
+	const [deleteStatusPage, isDeleting] = useStatusPageDelete(fetchStatusPage, url);
 	const location = useLocation();
 
 	// Setup
 	const currentPath = location.pathname;
 	let sx = { paddingLeft: theme.spacing(20), paddingRight: theme.spacing(20) };
 	let link = undefined;
+	const isPublic = location.pathname.startsWith("/status/uptime/public");
 
 	// Public status page
-	if (currentPath === "/status/public") {
+	if (isPublic) {
 		sx = {
 			paddingTop: theme.spacing(20),
 			paddingLeft: "20vw",
@@ -65,11 +69,7 @@ const PublicStatus = () => {
 	}
 
 	// Public status page fallback
-	if (
-		!isLoading &&
-		typeof statusPage === "undefined" &&
-		currentPath === "/status/public"
-	) {
+	if (!isLoading && typeof statusPage === "undefined" && isPublic) {
 		return (
 			<Stack sx={sx}>
 				<GenericFallback>
@@ -87,11 +87,7 @@ const PublicStatus = () => {
 	}
 
 	// Finished loading, but status page is not public
-	if (
-		!isLoading &&
-		currentPath === "/status/public" &&
-		statusPage.isPublished === false
-	) {
+	if (!isLoading && isPublic && statusPage.isPublished === false) {
 		return (
 			<Stack sx={sx}>
 				<GenericFallback>
@@ -111,15 +107,16 @@ const PublicStatus = () => {
 	// Status page doesn't exist
 	if (!isLoading && typeof statusPage === "undefined") {
 		return (
-			<Fallback
-				title="status page"
-				checks={[
-					"Display a list of monitors to track",
-					"Share your monitors with the public",
-				]}
-				link="/status/create"
-				isAdmin={isAdmin}
-			/>
+			<GenericFallback>
+				<Typography
+					variant="h1"
+					marginY={theme.spacing(4)}
+					color={theme.palette.primary.contrastTextTertiary}
+				>
+					There's no status page here.
+				</Typography>
+				<Typography>Please contact to your administrator</Typography>
+			</GenericFallback>
 		);
 	}
 
@@ -134,6 +131,7 @@ const PublicStatus = () => {
 				isDeleting={isDeleting}
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}
+				url={url}
 			/>
 			<Typography variant="h2">Service status</Typography>
 			<StatusBar monitors={monitors} />