diff options
Diffstat (limited to 'frontend/app/routes/dashboard.tsx')
| -rw-r--r-- | frontend/app/routes/dashboard.tsx | 44 |
1 files changed, 39 insertions, 5 deletions
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx index 3ad465f..9836d1b 100644 --- a/frontend/app/routes/dashboard.tsx +++ b/frontend/app/routes/dashboard.tsx @@ -1,15 +1,33 @@ import type { LoaderFunctionArgs } from "@remix-run/node"; +import { Link, useLoaderData } from "@remix-run/react"; import { isAuthenticated } from "../.server/auth"; -import { useLoaderData } from "@remix-run/react"; +import { apiClient } from "../.server/api/client"; export async function loader({ request }: LoaderFunctionArgs) { - return await isAuthenticated(request, { + const { user, token } = await isAuthenticated(request, { failureRedirect: "/login", }); + const { data, error } = await apiClient.GET("/games", { + params: { + query: { + player_id: user.user_id, + }, + header: { + Authorization: `Bearer ${token}`, + }, + }, + }); + if (error) { + throw new Error(error.message); + } + return { + user, + games: data.games, + }; } export default function Dashboard() { - const user = useLoaderData<typeof loader>()!; + const { user, games } = useLoaderData<typeof loader>()!; return ( <div className="min-h-screen p-8"> @@ -24,10 +42,26 @@ export default function Dashboard() { <li>Name: {user.display_name}</li> </ul> </div> - <h2 className="text-2xl font-semibold mb-2">Game</h2> + <h2 className="text-2xl font-semibold mb-2">Games</h2> <div> <ul className="list-disc list-inside"> - <li>TODO</li> + {games.map((game) => ( + <li key={game.game_id}> + {game.display_name}{" "} + {game.state === "closed" || game.state === "finished" ? ( + <span className="inline-block px-6 py-2 text-gray-400 bg-gray-200 cursor-not-allowed rounded"> + Entry + </span> + ) : ( + <Link + to={`/game/${game.game_id}/play`} + className="inline-block px-6 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded" + > + Entry + </Link> + )} + </li> + ))} </ul> </div> </div> |
