import * as React from 'react';
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteError,
isRouteErrorResponse,
} from '@remix-run/react';
import { withEmotionCache } from '@emotion/react';
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material';
import theme from './src/theme';
import ClientStyleContext from './src/ClientStyleContext';
import Layout from './src/Layout';
interface DocumentProps {
children: React.ReactNode;
title?: string;
}
const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCache) => {
const clientStyleData = React.useContext(ClientStyleContext);
// Only executed on client
useEnhancedEffect(() => {
// re-link sheet container
emotionCache.sheet.container = document.head;
// re-inject tags
const tags = emotionCache.sheet.tags;
emotionCache.sheet.flush();
tags.forEach((tag) => {
// eslint-disable-next-line no-underscore-dangle
(emotionCache.sheet as any)._insertTag(tag);
});
// reset cache to reapply global styles
clientStyleData.reset();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
{title ? {title} : null}
{children}
);
});
// https://remix.run/docs/en/main/route/component
// https://remix.run/docs/en/main/file-conventions/routes
export default function App() {
return (
);
}
// https://remix.run/docs/en/main/route/error-boundary
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
let message;
switch (error.status) {
case 401:
message = Oops! Looks like you tried to visit a page that you do not have access to.
;
break;
case 404:
message = Oops! Looks like you tried to visit a page that does not exist.
;
break;
default:
throw new Error(error.data || error.statusText);
}
return (
{error.status}: {error.statusText}
{message}
);
}
if (error instanceof Error) {
console.error(error);
return (
There was an error
{error.message}
Hey, developer, you should replace this with what you want your users to see.
);
}
return Unknown Error
;
}