apps/web/app/routes/workspace/team/members.tsx · flagon-io/g1t

1

import { Users } from "lucide-react";

2

import { Form, Link, data, useSearchParams } from "react-router";

3

4

import type { TeamRole } from "@g1t/contracts";

5

6

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

7

import { useTeam } from "../../../components/teams";

8

import { ErrorText, Field, Input, SubmitButton } from "../../../components/ui";

9

import { Avatar } from "../../../components/ui/avatar";

10

import { Badge } from "../../../components/ui/badge";

11

import { Card } from "../../../components/ui/card";

12

import { CheckboxOption } from "../../../components/ui/checkbox";

13

import { Switch } from "../../../components/ui/switch";

14

import { WithPresence } from "../../../components/presence";

15

import { leads, personPath } from "../../../lib/people";

16

import { teamPath } from "../../../lib/teams";

17

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

18

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

19

import { UserCard } from "../../../components/user-card";

20

21

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

22

const viewer = getViewer(context);

23

if (!roleIn(viewer, params.owner)) throw data(null, { status: 404 });

24

const children = new URL(request.url).searchParams.get("children") === "1";

25

const members = unwrap(await identity.teamMembers(viewer, params.owner, params.team, children));

26

return { members, children, me: viewer?.username ?? null };

27

}

28

29

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

30

assertSameOrigin(request);

31

const user = requireUser(context, request);

32

const form = await request.formData();

33

const intent = String(form.get("intent") ?? "");

34

const username = String(form.get("username") ?? "")

35

.trim()

36

.replace(/^@/, "");

37

if (!username) return { intent, username, error: "Enter a username." };

38

if (intent === "remove") {

39

const removed = await identity.removeTeamMember(user, params.owner, params.team, username);

40

return removed.ok ? { intent, username, error: null } : { intent, username, error: removed.error.message };

41

}

42

const role: TeamRole = form.get("role") === "maintainer" ? "maintainer" : "member";

43

const set = await identity.setTeamMember(user, params.owner, params.team, username, role);

44

return set.ok ? { intent, username, error: null } : { intent, username, error: set.error.message };

45

}

46

47

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

48

const team = useTeam();

49

const { members, children, me } = loaderData;

50

const [, setParams] = useSearchParams();

51

const manage = team.can_manage;

52

const rowError = (username: string) => (actionData && actionData.intent !== "add" && actionData.username === username ? actionData.error : null);

return (

People <span className="text-sm font-normal text-faint tabular-nums">{team.members_count}</span>

61

</h2>

62

{team.child_teams_count > 0 && (

<Switch

size="sm"

checked={children}

onCheckedChange={(on) => setParams(on ? { children: "1" } : {}, { replace: true, preventScrollReset: true })}

68

/>

69

Include the people of child teams

</label>

)}

</div>

{members.length === 0 ? (

75

76

<p>

77

{`No one is in ${team.name} yet.`}

78

{manage && " Add members of the workspace below."}

</p>

</Card>

) : (

<ul>

{members.map((member) => {

85

const self = member.username === me;

return (

</WithPresence>

{member.name || member.username}

96

</Link>

97

</UserCard>

98

{member.name && <span className="ml-2 hidden font-mono text-xs text-faint sm:inline">{member.username}</span>}

99

</div>

100

{leads(team.lead, { username: member.username }) && <Badge tone="accent">Lead</Badge>}

101

{member.via ? (

102

103

<Badge>via {member.via}</Badge>

104

</Link>

105

) : member.role === "maintainer" ? (

106

<Badge tone="accent">Maintainer</Badge>

107

) : (

108

<Badge>Member</Badge>

109

)}

110

{!member.via && (manage || self) && (

{manage && (

{member.role === "maintainer" ? "Make member" : "Make maintainer"}

</SubmitButton>

</Form>

)}

{self ? "Leave" : "Remove"}

</SubmitButton>

</Form>

</span>

)}

</div>

<ErrorText>{rowError(member.username)}</ErrorText>

</li>

);

})}

</ul>

</Card>

)}

{manage && (

</Field>

</div>

Add

</SubmitButton>

</div>

</Form>

)}

{actionData?.intent === "add" && <ErrorText>{actionData.error}</ErrorText>}

</section>

</div>

);

}