g1t/apps/web/app/routes/workspace/people.tsx
| 1 | import { Form } from "react-router"; |
| 2 | |
| 3 | import type { Route } from "./+types/people"; |
| 4 | import { Avatar, Button, ErrorText, Field, Input, Pill } from "../../components/ui"; |
| 5 | import { identity } from "../../lib/services.server"; |
| 6 | import { |
| 7 | assertSameOrigin, |
| 8 | getViewer, |
| 9 | requireUser, |
| 10 | roleIn, |
| 11 | unwrap, |
| 12 | } from "../../lib/session.server"; |
| 13 | |
| 14 | export function meta({ params }: Route.MetaArgs) { |
| 15 | return [{ title: `People · ${params.owner} · g1t` }]; |
| 16 | } |
| 17 | |
| 18 | export async function loader({ params, context }: Route.LoaderArgs) { |
| 19 | const viewer = getViewer(context); |
| 20 | return { |
| 21 | role: roleIn(viewer, params.owner), |
| 22 | members: unwrap(await identity.listMembers(params.owner, viewer)), |
| 23 | }; |
| 24 | } |
| 25 | |
| 26 | export async function action({ request, params, context }: Route.ActionArgs) { |
| 27 | assertSameOrigin(request); |
| 28 | const user = requireUser(context, request); |
| 29 | const form = await request.formData(); |
| 30 | const username = String(form.get("member") ?? ""); |
| 31 | const result = |
| 32 | form.get("action") === "remove" |
| 33 | ? await identity.removeMember(user, params.owner, username) |
| 34 | : await identity.addMember(user, params.owner, username); |
| 35 | return result.ok ? null : { error: result.error.message }; |
| 36 | } |
| 37 | |
| 38 | export default function WorkspacePeople({ loaderData, actionData }: Route.ComponentProps) { |
| 39 | const { role, members } = loaderData; |
| 40 | return ( |
| 41 | <div className="max-w-2xl"> |
| 42 | <ul className="divide-y divide-line rounded-xl border border-line"> |
| 43 | {members.map((member) => ( |
| 44 | <li key={member.username} className="flex items-center gap-3 px-4 py-3"> |
| 45 | <Avatar name={member.username} size={28} /> |
| 46 | <span className="grow font-mono text-sm">{member.username}</span> |
| 47 | <Pill>{member.role}</Pill> |
| 48 | {role === "owner" && member.role !== "owner" && ( |
| 49 | <Form method="post"> |
| 50 | <input type="hidden" name="action" value="remove" /> |
| 51 | <input type="hidden" name="member" value={member.username} /> |
| 52 | <Button variant="quiet" type="submit"> |
| 53 | Remove |
| 54 | </Button> |
| 55 | </Form> |
| 56 | )} |
| 57 | </li> |
| 58 | ))} |
| 59 | </ul> |
| 60 | {role === "owner" && ( |
| 61 | <Form method="post" className="mt-6 flex items-end gap-3"> |
| 62 | <div className="grow"> |
| 63 | <Field label="Add a member" hint="Their g1t username. They join as a member."> |
| 64 | <Input name="member" required maxLength={39} /> |
| 65 | </Field> |
| 66 | </div> |
| 67 | <div className="pb-6"> |
| 68 | <Button type="submit">Add</Button> |
| 69 | </div> |
| 70 | </Form> |
| 71 | )} |
| 72 | <ErrorText>{actionData?.error}</ErrorText> |
| 73 | </div> |
| 74 | ); |
| 75 | } |