app/routes/frame.tsx

Functions

Imports

It imports app/components/frame.tsx, app/lib/context.ts, app/lib/people.server.ts. No module of this repo imports it.

Source

1// The layout every page sits in: Capsomer's shell with Carrel's name, its projects and the views the
2// viewer may open. It reads who is signed in from the gate's context, so a person with no projects
3// still gets Home, and only the Owner is offered the Owner's views.
4
5import { isRouteErrorResponse, Outlet, useRouteError, useRouteLoaderData } from "react-router";
6import { Empty } from "capsomer/react/empty";
7
8import { Frame, type FrameData } from "~/components/frame";
9import { getEnv, getViewer } from "~/lib/context";
10import { visibleProjects } from "~/lib/people.server";
11
12import type { Route } from "./+types/frame";
13
14export async function loader({ context }: Route.LoaderArgs): Promise<FrameData> {
15  const viewer = getViewer(context);
16  const projects = await visibleProjects(getEnv(context).DB, viewer);
17  return {
18    name: viewer.name || viewer.email,
19    isOwner: viewer.isOwner,
20    projects: projects.map((p) => ({ slug: p.slug, name: p.name, kind: p.kind })),
21  };
22}
23
24export default function Layout({ loaderData }: Route.ComponentProps) {
25  return (
26    <Frame data={loaderData}>
27      <Outlet />
28    </Frame>
29  );
30}
31
32// A page that fails keeps the frame, so the way back is still in reach.
33export function ErrorBoundary() {
34  const error = useRouteError();
35  const data = useRouteLoaderData<typeof loader>("routes/frame") ?? null;
36  const status = isRouteErrorResponse(error) ? error.status : null;
37  const title = status === 404 ? "Not found" : status === 403 ? "You may not open this" : "Something went wrong";
38  const detail =
39    status === 404
40      ? "There is nothing at this address, or it is not shared with you."
41      : status === 403
42        ? "Your role on this project does not allow it."
43        : "Nothing you wrote is lost. Try again, or go back to Home.";
44  return (
45    <Frame data={data}>
46      <div className="app-page">
47        <Empty kind="failed" title={status ? `${status}: ${title}` : title} action={<a className="cap-btn" href="/">Go to Home</a>}>
48          {detail}
49        </Empty>
50      </div>
51    </Frame>
52  );
53}