import { cssBundleHref } from "@remix-run/css-bundle"; import type { LinksFunction, LoaderArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { isRouteErrorResponse, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useRouteError } from "@remix-run/react"; import type { ReactNode } from "react"; import { PageLayout } from "~/components/page-layout"; import { getTags, TagWithStations } from "~/models/tag.server"; import { getUser } from "~/session.server"; import stylesheet from "~/tailwind.css"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []) ]; export async function loader({ request }: LoaderArgs) { const tags: TagWithStations[] = await getTags(); const user = await getUser(request); return json({ user, tags }); }; export type DocumentProps = { children: ReactNode; title?: string; } export function Document({ title, children }: DocumentProps) { return ( {title ? {title} : null} {children} ); } export default function App() { const { tags, user } = useLoaderData(); return ( ); } export function ErrorBoundary() { const error = useRouteError(); console.error(error); if (isRouteErrorResponse(error)) { const title = `${error.status} - ${error.statusText}`; return (

{title}

); } if (error instanceof Error) { return (

Yikes!

{error.message}

Stack Trace

{error.stack}

); } return (

Sorry, something went wrong...

); }