74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import type { LoaderFunction } from "remix";
|
|
import { useLoaderData, useCatch, redirect } from "remix";
|
|
import type { Team, User } from "@prisma/client";
|
|
import { getUser } from "~/utils/session.server";
|
|
import Header from "~/components/Header";
|
|
|
|
type LoaderData = {
|
|
user: User & {
|
|
team: Team & {
|
|
members: User[];
|
|
};
|
|
};
|
|
};
|
|
|
|
export const loader: LoaderFunction = async ({ request }) => {
|
|
const user = await getUser(request);
|
|
if (!user) {
|
|
return redirect("/login");
|
|
}
|
|
const data: LoaderData = { user };
|
|
return data;
|
|
};
|
|
|
|
export default function JokesIndexRoute() {
|
|
const data = useLoaderData<LoaderData>();
|
|
|
|
return (
|
|
<>
|
|
<Header user={data.user} route="/account" />
|
|
<main className="p-2 lg:py-4 lg:px-6">
|
|
<h1 className="mb-8 lg:mb-10 text-2xl">
|
|
Team: <strong className="text-primary">{data.user.team.id}</strong>
|
|
</h1>
|
|
{!data.user.team.members || data.user.team.members?.length === 0 ? (
|
|
<p>No members</p>
|
|
) : (
|
|
data.user.team.members.map((member) => (
|
|
<div
|
|
key={member.id}
|
|
className="card shadow-lg compact side bg-base-100 mb-4"
|
|
>
|
|
<div className="flex-row items-center space-x-4 card-body">
|
|
<div>
|
|
<div className="rounded-full w-10 h-10 m-1 inline-flex justify-center items-center bg-primary-content text-primary text-3xl">
|
|
{member.icon ?? member.username[0]}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 className="card-title !mb-0">{member.username}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function CatchBoundary() {
|
|
const caught = useCatch();
|
|
|
|
if (caught.status === 404) {
|
|
return (
|
|
<div className="error-container">There are no users to display.</div>
|
|
);
|
|
}
|
|
throw new Error(`Unexpected caught response with status: ${caught.status}`);
|
|
}
|
|
|
|
export function ErrorBoundary() {
|
|
return <div className="error-container">I did a whoopsies.</div>;
|
|
}
|