81 lines
1.6 KiB
TypeScript
81 lines
1.6 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import { ErrorFallback, EmptyFallback } from "./Fallback";
|
|
|
|
import type { StackProps } from "@mui/material/Stack";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { useTranslation } from "react-i18next";
|
|
interface BasePageProps extends StackProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const BasePage: React.FC<BasePageProps> = ({
|
|
children,
|
|
...props
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
spacing={theme.spacing(10)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
interface BasePageWithStatesProps extends StackProps {
|
|
loading: boolean;
|
|
error: any;
|
|
items: any[];
|
|
page: string;
|
|
actionLink?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const isEmpty = (items: any[]) => {
|
|
if (!items) return true;
|
|
if (Array.isArray(items) && items.length === 0) return true;
|
|
return false;
|
|
};
|
|
|
|
export const BasePageWithStates: React.FC<BasePageWithStatesProps> = ({
|
|
loading,
|
|
error,
|
|
items,
|
|
page,
|
|
actionLink,
|
|
children,
|
|
...props
|
|
}: BasePageWithStatesProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
if (loading) {
|
|
return null;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<ErrorFallback
|
|
title="Something went wrong..."
|
|
subtitle="Please try again later"
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (isEmpty(items)) {
|
|
return (
|
|
<EmptyFallback
|
|
page={page}
|
|
title={t(`${page}Monitor.fallback.title`)}
|
|
bullets={t(`${page}Monitor.fallback.checks`, { returnObjects: true })}
|
|
actionButtonText={t(`${page}Monitor.fallback.actionButton`)}
|
|
actionLink={actionLink || ""}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <BasePage {...props}>{children}</BasePage>;
|
|
};
|