Files
app
routes
styles
context.tsx
createEmotionCache.ts
entry.client.tsx
entry.server.tsx
root.tsx
components
data
functions
public
.gitignore
.node-version
.prettierignore
OFL.txt
README.md
emotion-server.js
index.css
index.d.ts
package-lock.json
package.json
remix.config.js
server.ts
theme.ts
tsconfig.json
car-crushers-portal/app/root.tsx

215 lines
6.0 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
ChakraProvider,
Container,
cookieStorageManagerSSR,
Heading,
Link,
Text,
} from "@chakra-ui/react";
import { ClientStyleContext, ServerStyleContext } from "./context.js";
import fontStyle from "@fontsource/plus-jakarta-sans/index.css";
import Forbidden from "../components/Forbidden.js";
import globalStyles from "../index.css";
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
useLoaderData,
useRouteError,
} from "@remix-run/react";
import { type ErrorResponse } from "@remix-run/router";
import { LinksFunction } from "@remix-run/cloudflare";
import Login from "../components/Login.js";
import Navigation from "../components/Navigation.js";
import { type ReactNode, StrictMode, useContext, useEffect } from "react";
import theme from "../theme.js";
import { withEmotionCache } from "@emotion/react";
export function ErrorBoundary() {
const error = useRouteError() as ErrorResponse;
if (!isRouteErrorResponse(error))
return getMarkup(
{ hide: true },
<Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">???</Heading>
<br />
<Text fontSize="xl">Something bad happened!</Text>
<br />
<br />
<br />
<Text>Details: {error}</Text>
<br />
<br />
<Link color="#646cff" onClick={() => location.reload()}>
Refresh
</Link>
</Container>,
);
const { status } = error;
switch (status) {
case 303:
return "";
case 401:
return getMarkup({ hide: true }, <Login />);
case 403:
return getMarkup({ hide: true }, <Forbidden />);
case 404:
return getMarkup(
{ hide: true },
<Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">404</Heading>
<br />
<Text fontSize="xl">There is nothing to find here.</Text>
<br />
<br />
<br />
<Link color="#646cff" onClick={() => history.go(-1)}>
Go back
</Link>
</Container>,
);
default:
return getMarkup(
{ hide: true },
<Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">500</Heading>
<br />
<Text fontSize="xl">S̶̡͈̠̗̠͖͙̭o̶̶͕͚̥͍̪̤m̸̨͏͈͔̖͚̖̰̱͞e҉̵͖͚͇̀t̕͟͠͏͎̺̯̲̱̣̤̠̟͙̠̙̫̬ḩ̸̭͓̬͎̙̀į̞̮͉͖̰̥̹͚̫̙̪̗̜̳̕ͅn҉͔̯̪̗̝̝͖̲͇͍͎̲̲̤̖̫͈̪͡g̴̰̻̙̝͉̭͇̖̰̝̙͕̼͙͘͜ ̵̶̫̥̳̲̘̻̗͈͕̭̲͇̘̜̺̟̥̖̥b̴̙̭̹͕̞͠r̞͎̠̩͈̖̰̞̯̯͢͢͠ͅo̝̯̗̹̳͍̰͉͕̘̰̠̺̥̰͔̕ͅk̵̸̻̠͕̺̦̦͖̲̺̦̞̝̞͞͡e̶͏̤̼̼͔̘̰̰̭͈̀͞͡</Text>
<br />
<br />
<br />
<Link color="#646cff" onClick={() => location.reload()}>
Reload
</Link>
</Container>,
);
}
}
export const links: LinksFunction = () => {
return [
{ href: "/favicon.ico", rel: "icon" },
{ href: "/files/logo192.png", rel: "apple-touch-icon", type: "image/png" },
{ href: fontStyle, rel: "stylesheet" },
{ href: globalStyles, rel: "stylesheet" },
];
};
export async function loader({
context,
}: {
context: RequestContext;
}): Promise<{ [k: string]: any }> {
let data: { [k: string]: string } = {};
if (context.data.current_user) data = { ...context.data.current_user };
if (context.env.DSN) data.dsn = context.env.DSN;
if (context.data.nonce) data.nonce = context.data.nonce;
if (context.data.theme) data.theme = context.data.theme;
return data;
}
export function meta() {
return [{ title: "Car Crushers" }];
}
function getMarkup(
loaderData: { [k: string]: any },
child: ReactNode,
): JSX.Element {
const Document = withEmotionCache(
({ children }: { children: ReactNode }, emotionCache) => {
const serverStyleData = useContext(ServerStyleContext);
const clientStyleData = useContext(ClientStyleContext);
useEffect(() => {
emotionCache.sheet.container = document.head;
const tags = emotionCache.sheet.tags;
emotionCache.sheet.flush();
tags.forEach((tag) => {
(emotionCache.sheet as any)._insertTag(tag);
});
clientStyleData?.reset();
}, []);
const body = (
<StrictMode>
<ChakraProvider
colorModeManager={cookieStorageManagerSSR(
typeof document === "undefined"
? `chakra-ui-color-mode=${loaderData.theme}`
: document.cookie,
)}
theme={theme}
>
<div className="App">
<Navigation {...loaderData} />
{children}
<Scripts />
</div>
</ChakraProvider>
</StrictMode>
);
return (
<html data-theme={loaderData.theme} lang="en-US">
<head>
<Links />
<style>
{`
:root {
color-scheme: ${loaderData.theme};
}
`}
</style>
{serverStyleData?.map(({ key, ids, css }) => (
<style
key={key}
data-emotion={`${key} ${ids.join(" ")}`}
dangerouslySetInnerHTML={{ __html: css }}
/>
))}
<meta charSet="UTF-8" />
{loaderData.dsn ? (
<meta name="dsn" content={loaderData.dsn} />
) : null}
<meta name="theme-color" content="#00a8f8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<Meta />
</head>
<body
{...(loaderData.theme && {
className: `chakra-ui-${loaderData.theme}`,
})}
>
{body}
</body>
</html>
);
},
);
return <Document>{child}</Document>;
}
export default function () {
const loaderData = useLoaderData<typeof loader>();
return getMarkup(loaderData, <Outlet />);
}