terrassumptions/client/src/App.js

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import styles from './App.module.css';
import GamePanel from './components/screens/GamePanel';
import HomePage from './components/screens/HomePage';
import Lobby from './components/screens/Lobby';
import PlayerScores from './components/screens/PlayerScores';
import RoundSummary from './components/screens/RoundSummary';
import ApiInfo from './components/util/ApiInfo';
import { ERROR, IN_ROUND, POST_GAME, POST_ROUND, PRE_GAME, PRE_ROUND } from './domain/GameState';
import { useGameState } from './domain/gameStore';
import useDirectGameLinks from './hooks/useDirectGameLinks';

const needsHeaderFooter = {
  [PRE_GAME]: true,
  [PRE_ROUND]: true,
  [IN_ROUND]: false,
  [POST_ROUND]: false,
  [POST_GAME]: false,
  [ERROR]: true
};

const Header = ({ show }) => (
  <CSSTransition 
    in={show}
    timeout={500}
    mountOnEnter
    unmountOnExit
    classNames="state"
  >
    <div className={styles.header}>
      <p>TerrAssumptions!</p>
    </div>
  </CSSTransition>
)

const Footer = ({ show }) => (
  <CSSTransition 
    in={show}
    timeout={500}
    mountOnEnter
    unmountOnExit
    classNames="state"
  >
    <div className={styles.footer}>
      <ApiInfo />
    </div>
  </CSSTransition>
)

const State = ({ show, children, setTransitioning }) => (
  <CSSTransition
    in={show}
    timeout={500}
    mountOnEnter
    unmountOnExit
    classNames="state"
    onEnter={() => setTransitioning(true)} 
    onExited={() => setTransitioning(false)}
  >
    <div className="state">
      {children}
    </div>
  </CSSTransition>
)

export default () => {
  const [transitioning, setTransitioning] = useState(true);
  const gameState = useGameState();
  useDirectGameLinks();
  const needsHF = needsHeaderFooter[gameState];

  return (
    <React.StrictMode>
      <div className={styles.page}>
        <Header show={needsHF} />
        <State show={gameState === PRE_GAME} setTransitioning={setTransitioning}>
          <HomePage />
        </State>
        <State show={gameState === PRE_ROUND} setTransitioning={setTransitioning}>
          <Lobby />
        </State>
        {!transitioning && gameState === IN_ROUND && <GamePanel />}
        <State show={gameState === POST_ROUND} setTransitioning={setTransitioning}>
          <RoundSummary />
        </State>
        <State show={gameState === POST_GAME} setTransitioning={setTransitioning}>
          <PlayerScores />
        </State>
        <State show={gameState === ERROR}>
          <p>Application encountered unrecoverable error, please refresh the page.</p>
        </State>
        <Footer show={needsHF} />
      </div>
    </React.StrictMode>
  );
};