ls-deno/routes/team/[id].tsx

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 }) {
  return (
    <>
      <h1 class="mt-4">Manage</h1>
      <section>
        <h2>Invite User</h2>
        <form
          autocomplete="off"
          method="post"
          action={`/team/${teamId}/invite`}
        >
          <input
            autocomplete="off"
            type="text"
            placeholder="Username"
            name="inviteUsername"
            id="inviteUsername"
          />
          <input type="submit" value="Invite" />
        </form>
      </section>
    </>
  );
}