mancala/apps/frontend/src/routes/Home.tsx

import * as React from "react";
import { FunctionComponent, useEffect, useState } from "react";
import { LiveGameSummary } from "@mancala/core";
import { AuthUser, Theme } from "@mancala/core";
import AppHeader from "../components/headerbar/AppHeader";
import PageContainer from "../components/PageContainer";
import { PlusIcon } from "../components/Icons";
import ActiveGameBanner from "../components/home/ActiveGameBanner";
import LiveGamesSection from "../components/home/LiveGamesSection";
import RecentGamesSection from "../components/home/RecentGamesSection";
import PopularGamesSection from "../components/home/PopularGamesSection";
import "../components/home/Home.css";
import { Context } from "../context/context";
import { useNavigate } from "react-router-dom";
import Util from "../util/Util";
import { useTranslation } from "react-i18next";

const Home: FunctionComponent<{
  context: Context,
  userKey?: string,
  authUser?: AuthUser,
  theme: Theme,
}> = ({ context, userKey, authUser, theme }) => {

  const navigate = useNavigate();

  const [activeGame, setActiveGame] = useState<LiveGameSummary | null>(null);

  useEffect(() => {
    if (!authUser) return;
    let disposed = false;
    context.authService.getAccessToken()
      .then((token) => context.gameStore.getActiveGame(token))
      .then((game) => !disposed && setActiveGame(game))
      .catch((error) => console.error("(Home) Could not load the active game", error));
    return () => { disposed = true; };
  }, [authUser?.id]);

  const { t } = useTranslation();

  const onNewGameClick = () => {
    if(Util.checkConnectionAndMaybeAlert(context, t)) return;
    navigate("/loby")
  };

  return (
    <PageContainer>
      <AppHeader context={context} authUser={authUser}>
        <button className="btn pri ic-m" aria-label={t("NewGame")} onClick={onNewGameClick}>
          <PlusIcon /><span className="hide-m">{t("NewGame")}</span>
        </button>
      </AppHeader>
      <main className="wrap">
        {activeGame && authUser && (
          <ActiveGameBanner
            game={activeGame}
            userId={authUser.id}
            onContinue={() => navigate(`/game/${activeGame.id}`)} />
        )}
        <LiveGamesSection context={context} />
        <PopularGamesSection context={context} />
        {authUser && <RecentGamesSection context={context} userId={authUser.id} />}
      </main>
    </PageContainer>
  );
};

export default Home;