gamenight/frontend/src/App.js

import './App.css';
import React, { useState, useEffect, useCallback } from 'react';
import MenuBar from './components/MenuBar';
import Login from './components/Login';
import Gamenights from './components/Gamenights';
import Gamenight from './components/Gamenight';
import AdminPanel from './components/AdminPanel';
import Register from './components/Register';

import { get_gamenights, get_games, unpack_api_result, login } from './api/Api';

const localStorageUserKey = 'user';

function App() {
  const [user, setUser] = useState(null);
  const [gamenights, setGamenights] = useState([]);
  const [flashData, setFlashData] = useState({});
  const [games, setGames] = useState([]);
  const [activeGamenightId, setActiveGamenightId] = useState(null);
  const [appState, setAppState] = useState('LoggedOut')

  const handleLogin = (input) => {
    unpack_api_result(login(input), setFlashData)
      .then(result => {
        if(result !== undefined) {
          setUser(result.user);
          localStorage.setItem(localStorageUserKey, JSON.stringify(result.user));
          setAppState('LoggedIn')
        }
      });
  };

  useEffect(() => {
    if(activeGamenightId !== null) {
      setAppState('GamenightDetails');
    } else {
      setAppState(user === null ? 'LoggedOut' : 'LoggedIn')
    }
  }, [activeGamenightId, user])

  const onLogout = () => {
    setUser(null);
    localStorage.removeItem(localStorageUserKey);
    setAppState('LoggedOut')
  };

  const onAdmin = () => {
    setAppState('AdminPanel')
  }

  const onUser = () => {
    setAppState('UserPage')
  }

  const onRegister = () => {
    setAppState('RegisterPage')
  }

  const onReset = () => {
    setAppState(user === null ? 'LoggedOut' : 'LoggedIn')
  }

  const onRegistered = (user) => {
    setUser(user);
  }

  const setFlash = (data) => {
    setFlashData(data);
  };

  const refetchGamenights = useCallback(() => {
    unpack_api_result(get_gamenights(user.jwt), setFlashData)
      .then(result => {
        if (result !== undefined) {
          setGamenights(result.gamenights);
        }
      }); 
  }, [user]);

  useEffect(() => {
    if (appState === 'LoggedIn') {
      refetchGamenights()
    }
  }, [appState, refetchGamenights])

  useEffect(() => {
    if (appState === 'LoggedIn') {
      unpack_api_result(get_games(user.jwt), setFlashData)
      .then(result => {
        if (result !== undefined) {
          setGames(result.games)
        }
      });
    }        
  }, [appState, user])

  useEffect(() => {
    setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
  }, []);

  let mainview;
  if(appState === 'LoggedOut') {
    mainview = (
      <div className="App">
        <Login onChange={handleLogin}/>
      </div>
    );
  } else if(appState === 'RegisterPage') {
    mainview = (
      <Register
        onRegistered={onRegistered}
        setFlash={setFlash}/>
    );
  } else if(appState === 'UserPage') {
    mainview = (
      <span>UserPage</span>
    )
  }else if(appState === 'GamenightDetails') {
    mainview = (
    <Gamenight
      gamenightId={activeGamenightId}
      onDismis={() => setActiveGamenightId(null)}
      setFlash={setFlash}
      user={user}
    />)
  } else if(appState === 'LoggedIn') {
    mainview = (
      <Gamenights 
        user={user}
        games={games}
        setFlash={setFlash}
        refetchGamenights={refetchGamenights}
        gamenights={gamenights}
        onSelectGamenight={(g) => setActiveGamenightId(g.id)}/>
    );
  } else if(appState === 'AdminPanel') {
    mainview = (
      <AdminPanel
        user={user}
        setFlash={setFlash}/>
    );
  }
  let page = (
    <>
      <MenuBar
        user={user}
        onUser={onUser}
        onRegister={onRegister}
        onAdmin={onAdmin}
        onLogout={onLogout}
        onReset={onReset}/>
      {mainview}
    </>
  );

  return page;
}

export default App;