123 lines
2.8 KiB
TypeScript
123 lines
2.8 KiB
TypeScript
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
|
|
import {
|
|
Links,
|
|
Scripts,
|
|
Outlet,
|
|
useRouteError,
|
|
isRouteErrorResponse,
|
|
json,
|
|
redirect,
|
|
useLoaderData
|
|
} from "@remix-run/react";
|
|
import type { PropsWithChildren } from "react";
|
|
|
|
import stylesheet from "bootstrap/dist/css/bootstrap.min.css?url";
|
|
|
|
export const links: LinksFunction = () => [
|
|
{ rel: "stylesheet", href: stylesheet },
|
|
];
|
|
|
|
import Header, { HeaderData } from "~/components/header";
|
|
import { Col, Container, Row } from "react-bootstrap";
|
|
import { getSession } from "./auth/session";
|
|
import { head } from "lodash";
|
|
import { User } from "@zenstackhq/runtime/models";
|
|
|
|
export async function loader({
|
|
request,
|
|
}: LoaderFunctionArgs) {
|
|
const session = await getSession(
|
|
request.headers.get("Cookie")
|
|
);
|
|
|
|
let data : HeaderData = {loggedin: false};
|
|
|
|
if(session.has("user_id")){
|
|
data.user = session.get("user");
|
|
data.loggedin = true;
|
|
}
|
|
|
|
return json({data});
|
|
}
|
|
|
|
function Document({
|
|
children,
|
|
headerData,
|
|
title = "K-FRIDGE",
|
|
}: PropsWithChildren<{ title?: string, headerData: HeaderData }>) {
|
|
return (
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1"
|
|
/>
|
|
<title>{title}</title>
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<Header data={headerData}></Header>
|
|
</header>
|
|
<main>
|
|
{children}
|
|
</main>
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
const data = useLoaderData<typeof loader>();
|
|
|
|
return (
|
|
<Document headerData={data.data}>
|
|
<Outlet />
|
|
</Document>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary() {
|
|
const error = useRouteError();
|
|
const data = useLoaderData<typeof loader>();
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
return (
|
|
<Document headerData={data.data}
|
|
title={`${error.status} ${error.statusText}`}
|
|
>
|
|
<Container>
|
|
<Row className="align-items-md-stretch">
|
|
<Col md={12}>
|
|
<div className="h-100 p-5 text-bg-dark rounded-3">
|
|
<h1>{error.status}</h1>
|
|
{error.statusText}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</Document>
|
|
);
|
|
}
|
|
|
|
const errorMessage =
|
|
error instanceof Error
|
|
? error.message
|
|
: "Unknown error";
|
|
return (
|
|
<Document title="Uh-oh!" headerData={data.data}>
|
|
<Container>
|
|
<Row className="align-items-md-stretch">
|
|
<Col md={12}>
|
|
<div className="h-100 p-5 text-bg-dark rounded-3">
|
|
<h1>App Error</h1>
|
|
{errorMessage}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</Document>
|
|
);
|
|
} |