116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import { Handlers, PageProps } from "$fresh/server.ts";
|
|
import { getTeam, getTeamUsers, teamUserStatus } from "@/db/mod.ts";
|
|
import { type Team, type TeamUserStatus, type User } from "@/types.ts";
|
|
import { type ContextState } from "@/types.ts";
|
|
|
|
interface TeamIndexProps {
|
|
status: TeamUserStatus;
|
|
team: Team;
|
|
users: User[];
|
|
}
|
|
|
|
interface TeamStatusProps {
|
|
status: TeamUserStatus;
|
|
}
|
|
|
|
type TeamPageProps = TeamIndexProps | TeamStatusProps;
|
|
|
|
export const handler: Handlers<TeamPageProps, ContextState> = {
|
|
async GET(request, context) {
|
|
if (!context.state.user?.id) {
|
|
// unauthenticated requests may not view teams
|
|
return await context.renderNotFound();
|
|
}
|
|
// TODO: implement this with row-level security?
|
|
// TODO: do I just use supabase at this point?
|
|
// TODO: only allow logged-in users to view teams (and most resources!)
|
|
// TODO: only allow users that are a member of a team to view them
|
|
// NOTE: maybe teams can be public...?
|
|
const { id } = context.params;
|
|
|
|
console.debug({ request, context });
|
|
try {
|
|
const status = await teamUserStatus(context.state.user?.id, id);
|
|
console.log("Status of this user on team:", status, id);
|
|
if (!status) {
|
|
return await context.renderNotFound();
|
|
} else if (["accepted", "manager", "owner"].includes(status)) {
|
|
// users that are not a member of a team may not view it
|
|
const team = await getTeam({ id });
|
|
const users = await getTeamUsers(team) || [];
|
|
return await context.render({ team, users, status });
|
|
} else if (["invited", "left", "removed"].includes(status)) {
|
|
return await context.render({ status });
|
|
}
|
|
return await context.renderNotFound();
|
|
} catch (e) {
|
|
console.error(`Error handling team page for ID '${id}'`, e);
|
|
return await context.renderNotFound();
|
|
}
|
|
},
|
|
};
|
|
|
|
export default function TeamPage({ data }: PageProps<TeamPageProps>) {
|
|
if ("users" in data) {
|
|
return <TeamIndex {...data}></TeamIndex>;
|
|
} else {
|
|
return <TeamStatus {...data}></TeamStatus>;
|
|
}
|
|
}
|
|
|
|
function TeamStatus({ status }: TeamStatusProps) {
|
|
return <>Team status: {status}</>;
|
|
}
|
|
|
|
function TeamIndex(
|
|
{ team: { id, displayName, createdAt }, users, status }: TeamIndexProps,
|
|
) {
|
|
return (
|
|
<>
|
|
<a href="/dashboard">Back to dashboard</a>
|
|
<h1>{displayName} - created {createdAt.toLocaleString()}</h1>
|
|
{/* <h1 class="mt-4">Administrate</h1> */}
|
|
{["owner", "manager"].includes(status) && <Manage teamId={id} />}
|
|
<h1 class="mt-4">Team Members</h1>
|
|
<ul>
|
|
{users.map((user) => (
|
|
<li key={user.id}>
|
|
<a href={`/user/${user.id}`}>
|
|
{(user.displayName || user.username).trim()}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Manage({ teamId }: { teamId: string }) {
|
|
// TODO: invite by email WITHOUT turning into a spambot?
|
|
return (
|
|
<details class="mt-4 max-w-lg">
|
|
<summary>Manage</summary>
|
|
<details class="mt-2">
|
|
<summary>Invite User to Team</summary>
|
|
<form
|
|
class="flex flex-col max-w-lg mt-2"
|
|
autocomplete="off"
|
|
method="post"
|
|
action={`/team/${teamId}/invite`}
|
|
>
|
|
<label for="inviteUsername">Username</label>
|
|
<input
|
|
class="mb-4"
|
|
autocomplete="new-password"
|
|
type="text"
|
|
placeholder="Username"
|
|
name="inviteUsername"
|
|
id="inviteUsername"
|
|
/>
|
|
<input type="submit" value="Invite" />
|
|
</form>
|
|
</details>
|
|
</details>
|
|
);
|
|
}
|