Skip to content
Sign up

flagon-io/g1t

public
0
134 linesCodeBlameRaw
1import { Box, CircleAlert, MailOpen } from "lucide-react";
2import { Form, data, redirect } from "react-router";
3
4import { REPO_ROLE_LABELS, REPO_ROLE_SUMMARIES } from "@g1t/contracts";
5
6import type { Route } from "./+types/invitations";
7import { ButtonLink, ErrorText, SubmitButton, usePending } from "../../components/ui";
8import { Avatar } from "../../components/ui/avatar";
9import { page } from "../../lib/meta";
10import { identity } from "../../lib/services.server";
11import { assertSameOrigin, requireUser } from "../../lib/session.server";
12
13export function meta({ params, ...args }: Route.MetaArgs) {
14 return page(args, { title: `Invitation · ${params.owner}/${params.repo} · g1t` });
15}
16
17/** The viewer's pending invitation to this repository, if they have one. */
18async function invitationTo(user: Parameters<typeof identity.myRepoInvitations>[0], owner: string, repo: string) {
19 const full = `${owner}/${repo}`.toLowerCase();
20 const mine = await identity.myRepoInvitations(user);
21 return mine.find((invitation) => invitation.repo.toLowerCase() === full && invitation.status === "pending") ?? null;
22}
23
24export async function loader({ params, context, request }: Route.LoaderArgs) {
25 // Someone invited usually cannot see the repository yet, so this reads
26 // their own invitations, not the repository.
27 const user = requireUser(context, request);
28 const invitation = await invitationTo(user, params.owner, params.repo);
29 return { invitation, viewer: { username: user.username, avatar: user.avatar ?? null } };
30}
31
32export async function action({ params, context, request }: Route.ActionArgs) {
33 assertSameOrigin(request);
34 const user = requireUser(context, request);
35 const form = await request.formData();
36 const accept = form.get("intent") === "accept";
37 const invitation = await invitationTo(user, params.owner, params.repo);
38 // Refusals are said with a 200, so the page loads again and shows the
39 // invitation as it now stands beside the reason: after a 4xx answer
40 // React Router keeps the page's data as it was.
41 if (!invitation) return { error: "This invitation is no longer open." };
42 const answered = await identity.respondRepoInvitation(user, invitation.id, accept);
43 if (!answered.ok) return { error: answered.error.message };
44 // The role is theirs from the next request on: straight to the repository.
45 throw redirect(accept ? `/${invitation.repo}` : "/");
46}
47
48const LONG_DATE = new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });
49
50export default function RepoInvitation({ loaderData, actionData, params }: Route.ComponentProps) {
51 const { invitation, viewer } = loaderData;
52 // Either answer: the other button waits for it.
53 const answering = usePending();
54 const full = `${params.owner}/${params.repo}`;
55 if (!invitation) {
56 return (
57 <div className="mx-auto max-w-lg px-4 py-16">
58 <h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
59 <CircleAlert size={22} className="text-warn" />
60 No open invitation
61 </h1>
62 <p className="mt-3 text-sm leading-6 text-muted">
63 There is no invitation to <span className="font-mono text-fg">{full}</span> waiting for{" "}
64 <span className="font-mono text-fg">{viewer.username}</span>. It may have been accepted, declined, revoked, or
65 it expired; an invitation lasts 7 days. Ask whoever invited you to send another.
66 </p>
67 <div className="mt-8 flex flex-wrap gap-3">
68 <ButtonLink to={`/${full}`} variant="outline">
69 Go to {full}
70 </ButtonLink>
71 <ButtonLink to="/" variant="outline">
72 Mission control
73 </ButtonLink>
74 </div>
75 </div>
76 );
77 }
78 return (
79 <div className="mx-auto max-w-lg px-4 py-16">
80 <div className="flex items-center gap-3">
81 {invitation.invited_by ? (
82 <Avatar name={invitation.invited_by} image={invitation.inviter_avatar} size={44} />
83 ) : (
84 <span className="inline-flex size-11 shrink-0 items-center justify-center rounded-full bg-accent/15 text-accent">
85 <MailOpen size={20} />
86 </span>
87 )}
88 <span className="text-faint">→</span>
89 <span className="inline-flex size-11 shrink-0 items-center justify-center rounded-lg bg-raised text-muted ring-1 ring-line">
90 <Box size={18} />
91 </span>
92 </div>
93 <h1 className="mt-6 text-2xl font-semibold tracking-tight text-balance">
94 {invitation.invited_by ?? "Someone"} invited you to <span className="font-mono break-all">{invitation.repo}</span>
95 </h1>
96 <p className="mt-2 text-sm leading-6 text-muted">
97 Accepting gives you the <span className="text-fg">{REPO_ROLE_LABELS[invitation.role]}</span> role on this
98 repository: {REPO_ROLE_SUMMARIES[invitation.role].replace(/^./, (c) => c.toLowerCase())} You see this repository
99 only, not the rest of the {params.owner} workspace.
100 </p>
101 <dl className="mt-5 space-y-1 text-sm">
102 {invitation.invited_by && (
103 <div className="flex gap-2">
104 <dt className="w-24 shrink-0 text-faint">From</dt>
105 <dd className="font-mono text-fg-soft">@{invitation.invited_by}</dd>
106 </div>
107 )}
108 <div className="flex gap-2">
109 <dt className="w-24 shrink-0 text-faint">Role</dt>
110 <dd className="text-fg-soft">{REPO_ROLE_LABELS[invitation.role]}</dd>
111 </div>
112 <div className="flex gap-2">
113 <dt className="w-24 shrink-0 text-faint">Works until</dt>
114 <dd className="text-fg-soft">{LONG_DATE.format(new Date(invitation.expires_at))}</dd>
115 </div>
116 </dl>
117 <Form method="post" className="mt-8 space-y-3">
118 <p className="flex items-center gap-2 text-sm text-muted">
119 <Avatar name={viewer.username} image={viewer.avatar} size={20} />
120 Signed in as <span className="font-mono text-fg">{viewer.username}</span>
121 </p>
122 <ErrorText>{actionData?.error}</ErrorText>
123 <div className="flex flex-col gap-3 sm:flex-row">
124 <SubmitButton name="intent" value="accept" disabled={answering} pending="Accepting…">
125 Accept invitation
126 </SubmitButton>
127 <SubmitButton name="intent" value="decline" variant="outline" disabled={answering} pending="Declining…">
128 Decline
129 </SubmitButton>
130 </div>
131 </Form>
132 </div>
133 );
134}