51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent, useEffect, useState } from "react";
|
||
|
|
import { FinishedGameSummary } from "@mancala/core";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
import { Context } from "../../context/context";
|
||
|
|
import { formatDate, getResultText, getScoreText, getViewerSeat } from "../../util/GameResultText";
|
||
|
|
import GamePreviewCard from "./GamePreviewCard";
|
||
|
|
import HomeSection from "./HomeSection";
|
||
|
|
|
||
|
|
const GAME_COUNT = 3;
|
||
|
|
|
||
|
|
// The user's last finished games, each shown from their side of the board.
|
||
|
|
const RecentGamesSection: FunctionComponent<{ context: Context, userId: string }> = ({ context, userId }) => {
|
||
|
|
const { t, i18n } = useTranslation();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [games, setGames] = useState<FinishedGameSummary[] | undefined>(undefined);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let disposed = false;
|
||
|
|
context.authService.getAccessToken()
|
||
|
|
.then((token) => context.gameStore.getMyRecentGames(token, GAME_COUNT))
|
||
|
|
.then((recent) => !disposed && setGames(recent))
|
||
|
|
.catch((error) => console.error("(Home) Could not load recent games", error));
|
||
|
|
return () => { disposed = true; };
|
||
|
|
}, [userId]);
|
||
|
|
|
||
|
|
if (!games) return <></>;
|
||
|
|
return (
|
||
|
|
<HomeSection context={context} title={t("MyRecentGames")} emptyText={t("NoGamesYet")}>
|
||
|
|
{games.map((game) => (
|
||
|
|
<GamePreviewCard
|
||
|
|
key={game.id}
|
||
|
|
context={context}
|
||
|
|
id={game.id}
|
||
|
|
player1={game.player1}
|
||
|
|
player2={game.player2}
|
||
|
|
board={game.board}
|
||
|
|
revert={getViewerSeat(game, userId) === "player2"}
|
||
|
|
lines={[
|
||
|
|
`${getResultText(game, userId, t)} · ${getScoreText(game, userId)}`,
|
||
|
|
formatDate(game.endedAt, i18n.language),
|
||
|
|
]}
|
||
|
|
onClick={() => navigate(`/game/${game.id}`)} />
|
||
|
|
))}
|
||
|
|
</HomeSection>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RecentGamesSection;
|