import type { MetaFunction, LoaderArgs, LinksFunction } from '@remix-run/node' import { json } from '@remix-run/node' import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch, useMatches, useTransition } from '@remix-run/react' import { useEffect } from 'react' import NProgress from 'nprogress' import nProgressStylesUrl from 'nprogress/nprogress.css' import { getUser } from './session.server' export const meta: MetaFunction = () => ({ charset: 'utf-8', title: 'New Remix App', viewport: 'width=device-width,initial-scale=1' }) export let links: LinksFunction = () => { return [{ rel: 'stylesheet', href: nProgressStylesUrl }] } export async function loader({ request }: LoaderArgs) { return json({ user: await getUser(request) }) } export default function App() { let transition = useTransition() useEffect(() => { if (transition.state === 'idle') NProgress.done() else NProgress.start() }, [transition.state]) return ( ) } function Document({ children, title }: { children: React.ReactNode; title?: string }) { return ( {title ? {title} : null} {children} {process.env.NODE_ENV === 'development' && } ) } export function CatchBoundary() { let caught = useCatch() let message switch (caught.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(caught.data || caught.statusText) } return (

{caught.status}: {caught.statusText}

{message}

 ) } function Layout({ children }: React.PropsWithChildren<{}>) { let version = useMatches().find((m) => m.id === 'root')?.data?.version return (
Timer
{children}
Version {version}
) } export function ErrorBoundary({ error }: { error: 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.

 ) }