apps/web/app/routes/repo/invitations.tsx · flagon-io/g1t

1

import { Box, CircleAlert, MailOpen } from "lucide-react";

2

import { Form, data, redirect, useNavigation } from "react-router";

3

4

import { REPO_ROLE_LABELS, REPO_ROLE_SUMMARIES } from "@g1t/contracts";

5

6

import type { Route } from "./+types/invitations";

7

import { Avatar, Button, ButtonLink, ErrorText } from "../../components/ui";

8

import { page } from "../../lib/meta";

9

import { identity } from "../../lib/services.server";

10

import { assertSameOrigin, requireUser } from "../../lib/session.server";

11

12

export function meta({ params, ...args }: Route.MetaArgs) {

13

return page(args, { title: `Invitation · ${params.owner}/${params.repo} · g1t` });

14

}

15

16

/** The viewer's pending invitation to this repository, if they have one. */

17

async function invitationTo(user: Parameters<typeof identity.myRepoInvitations>[0], owner: string, repo: string) {

18

const full = `${owner}/${repo}`.toLowerCase();

19

const mine = await identity.myRepoInvitations(user);

20

return mine.find((invitation) => invitation.repo.toLowerCase() === full && invitation.status === "pending") ?? null;

21

}

22

23

export async function loader({ params, context, request }: Route.LoaderArgs) {

24

// Someone invited usually cannot see the repository yet, so this reads

25

// their own invitations, not the repository.

26

const user = requireUser(context, request);

27

const invitation = await invitationTo(user, params.owner, params.repo);

28

return { invitation, viewer: { username: user.username, avatar: user.avatar ?? null } };

29

}

30

31

export async function action({ params, context, request }: Route.ActionArgs) {

32

assertSameOrigin(request);

33

const user = requireUser(context, request);

34

const form = await request.formData();

35

const accept = form.get("intent") === "accept";

36

const invitation = await invitationTo(user, params.owner, params.repo);

37

if (!invitation) return data({ error: "This invitation is no longer open." }, { status: 404 });

38

const answered = await identity.respondRepoInvitation(user, invitation.id, accept);

39

if (!answered.ok) return data({ error: answered.error.message }, { status: 422 });

40

// The role is theirs from the next request on: straight to the repository.

41

throw redirect(accept ? `/${invitation.repo}` : "/");

42

}

43

44

const LONG_DATE = new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" });

45

46

export default function RepoInvitation({ loaderData, actionData, params }: Route.ComponentProps) {

47

const { invitation, viewer } = loaderData;

48

const navigation = useNavigation();

49

const answering = navigation.state !== "idle" ? navigation.formData?.get("intent") : null;

50

const full = `${params.owner}/${params.repo}`;

if (!invitation) {

return (

No open invitation

</h1>

There is no invitation to <span className="font-mono text-fg">{full}</span> waiting for{" "}

60

<span className="font-mono text-fg">{viewer.username}</span>. It may have been accepted, declined, revoked, or

61

it expired; an invitation lasts 7 days. Ask whoever invited you to send another.

</p>

Go to {full}

</ButtonLink>

Mission control

</ButtonLink>

</div>

</div>

);

}

return (

{invitation.invited_by ? (

) : (

</span>

)}

</span>

</div>

{invitation.invited_by ?? "Someone"} invited you to <span className="font-mono break-all">{invitation.repo}</span>

91

</h1>

92

93

Accepting gives you the <span className="text-fg">{REPO_ROLE_LABELS[invitation.role]}</span> role on this

94

repository: {REPO_ROLE_SUMMARIES[invitation.role].replace(/^./, (c) => c.toLowerCase())} You see this repository

95

only, not the rest of the {params.owner} workspace.

96

</p>

97

98

{invitation.invited_by && (

99

100

101

<dd className="font-mono text-fg-soft">@{invitation.invited_by}</dd>

</div>

)}

<dd className="text-fg-soft">{REPO_ROLE_LABELS[invitation.role]}</dd>

107

</div>

108

109

<dt className="w-24 shrink-0 text-faint">Works until</dt>

110

<dd className="text-fg-soft">{LONG_DATE.format(new Date(invitation.expires_at))}</dd>

</div>

</dl>

Signed in as <span className="font-mono text-fg">{viewer.username}</span>

117

</p>

118

<ErrorText>{actionData?.error}</ErrorText>

119

120

121

{answering === "accept" ? "Accepting…" : "Accept invitation"}

122

</Button>

123

124

{answering === "decline" ? "Declining…" : "Decline"}

</Button>

</div>

</Form>

</div>

);

}