import { UsersIcon } from "@heroicons/react/outline"; import { PlusIcon } from "@heroicons/react/solid"; import { GetServerSideProps } from "next"; import type { Session } from "next-auth"; import { useSession } from "next-auth/client"; import { useEffect, useRef, useState } from "react"; import { getSession } from "@lib/auth"; import { Member } from "@lib/member"; import { Team } from "@lib/team"; import Loader from "@components/Loader"; import SettingsShell from "@components/SettingsShell"; import Shell from "@components/Shell"; import EditTeam from "@components/team/EditTeam"; import TeamList from "@components/team/TeamList"; import TeamListItem from "@components/team/TeamListItem"; import Button from "@components/ui/Button"; export default function Teams() { const noop = () => undefined; const [, loading] = useSession(); const [teams, setTeams] = useState([]); const [invites, setInvites] = useState([]); const [showCreateTeamModal, setShowCreateTeamModal] = useState(false); const [editTeamEnabled, setEditTeamEnabled] = useState(false); const [teamToEdit, setTeamToEdit] = useState(); const nameRef = useRef() as React.MutableRefObject; const handleErrors = async (resp: Response) => { if (!resp.ok) { const err = await resp.json(); throw new Error(err.message); } return resp.json(); }; const loadData = () => { fetch("/api/user/membership") .then(handleErrors) .then((data) => { setTeams(data.membership.filter((m: Member) => m.role !== "INVITEE")); setInvites(data.membership.filter((m: Member) => m.role === "INVITEE")); }) .catch(console.log); }; useEffect(() => { loadData(); }, []); if (loading) { return ; } const createTeam = (e: React.FormEvent) => { e.preventDefault(); return fetch("/api/teams", { method: "POST", body: JSON.stringify({ name: nameRef?.current?.value }), headers: { "Content-Type": "application/json", }, }).then(() => { loadData(); setShowCreateTeamModal(false); }); }; const editTeam = (team: Team) => { setEditTeamEnabled(true); setTeamToEdit(team); }; const onCloseEdit = () => { loadData(); setEditTeamEnabled(false); }; return ( {!editTeamEnabled && (
{!(invites.length || teams.length) && (

Create a team to get started

Create your first team and invite other users to work together with you.

)}
{!!teams.length && ( )} {!!invites.length && (

Open Invitations

    {invites.map((team: Team) => ( ))}
)}
)} {!!editTeamEnabled && } {showCreateTeamModal && (

Create a new team to collaborate with users.

)}
); } // Export the `session` prop to use sessions with Server Side Rendering export const getServerSideProps: GetServerSideProps<{ session: Session | null }> = async (context) => { const session = await getSession(context); if (!session) { return { redirect: { permanent: false, destination: "/auth/login" } }; } return { props: { session }, }; };