frontend/src/App.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

import React from 'react';
import { Routes, Route } from "react-router-dom";
import { Helmet } from "react-helmet";

import { UserProfile } from '@customTypes/Profile';
import Sidebar from './components/Sidebar';
import "./App.css";

import Profile from '@pages/Profile';
import Games from '@pages/Games';
import Maps from '@pages/Maps';
import User from '@pages/User';
import Homepage from '@pages/Homepage';
import UploadRunDialog from './components/UploadRunDialog';
import Rules from '@pages/Rules';
import About from '@pages/About';
import { Game } from '@customTypes/Game';
import { API } from './api/Api';
import Maplist from '@pages/Maplist';
import Rankings from '@pages/Rankings';
import { get_user_id_from_token, get_user_mod_from_token } from './utils/Jwt';

const App: React.FC = () => {
  const [token, setToken] = React.useState<string | undefined>(undefined);
  const [profile, setProfile] = React.useState<UserProfile | undefined>(undefined);
  const [isModerator, setIsModerator] = React.useState<boolean>(false);

  const [games, setGames] = React.useState<Game[]>([]);

  const [uploadRunDialog, setUploadRunDialog] = React.useState<boolean>(false);

  const _fetch_token = async () => {
    const token = await API.get_token();
    setToken(token);
  };

  const _fetch_games = async () => {
    const games = await API.get_games();
    setGames(games);
  };

  const _set_profile = async (user_id?: string) => {
    if (user_id && token) {
      const user = await API.get_profile(token);
      setProfile(user);
    }
  };

  React.useEffect(() => {
    if (token === undefined) {
      setProfile(undefined);
      setIsModerator(false);
    } else {
      setProfile({} as UserProfile); // placeholder before we call actual user profile
      _set_profile(get_user_id_from_token(token))
      const modStatus = get_user_mod_from_token(token)
      if (modStatus) {
        setIsModerator(true);
      } else {
        setIsModerator(false);
      }
    }
  }, [token]);

  React.useEffect(() => {
    _fetch_token();
    _fetch_games();
  }, []);

  return (
    <>
      <Helmet>
        <title>LPHUB</title>
        <meta name="description" content="Least Portals Hub" />
      </Helmet>
      <UploadRunDialog token={token} open={uploadRunDialog} onClose={(updateProfile) => {
        setUploadRunDialog(false);
        if (updateProfile) {
          _set_profile(get_user_id_from_token(token));
        }
      }} games={games} />
      <Sidebar setToken={setToken} profile={profile} setProfile={setProfile} onUploadRun={() => setUploadRunDialog(true)} />
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/profile" element={<Profile profile={profile} token={token} gameData={games} onDeleteRecord={() => _set_profile(get_user_id_from_token(token))} />} />
        <Route path="/users/*" element={<User profile={profile} token={token} gameData={games} />} />
        <Route path="/games" element={<Games games={games} />} />
        <Route path='/games/:id' element={<Maplist />}></Route>
        <Route path="/maps/*" element={<Maps token={token} isModerator={isModerator} />} />
        <Route path="/rules" element={<Rules />} />
        <Route path="/about" element={<About />} />
        <Route path='/rankings' element={<Rankings />}></Route>
        <Route path="*" element={"404"} />
      </Routes>
    </>
  );
};

export default App;