1 files changed, 69 insertions, 40 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bdd3adc..fbfa59f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,32 +1,32 @@
-import React from 'react';
+import React, { useCallback } 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 { 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';
+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 [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 () => {
@@ -39,12 +39,15 @@ const App: React.FC = () => {
     setGames(games);
   };
 
-  const _set_profile = async (user_id?: string) => {
-    if (user_id && token) {
-      const user = await API.get_profile(token);
-      setProfile(user);
-    }
-  };
+  const _set_profile = useCallback(
+    async (user_id?: string) => {
+      if (user_id && token) {
+        const user = await API.get_profile(token);
+        setProfile(user);
+      }
+    },
+    [token]
+  );
 
   React.useEffect(() => {
     if (token === undefined) {
@@ -52,15 +55,15 @@ const App: React.FC = () => {
       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)
+      _set_profile(get_user_id_from_token(token));
+      const modStatus = get_user_mod_from_token(token);
       if (modStatus) {
         setIsModerator(true);
       } else {
         setIsModerator(false);
       }
     }
-  }, [token]);
+  }, [token, _set_profile]);
 
   React.useEffect(() => {
     _fetch_token();
@@ -73,23 +76,49 @@ const App: React.FC = () => {
         <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)} />
+      <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="/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="/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="/rankings" element={<Rankings />}></Route>
         <Route path="*" element={"404"} />
       </Routes>
     </>