chore: updated packages, fixed most eslint warnings, and added prettier

frontend/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid"
+}

frontend/package.json

@@ -23,7 +23,7 @@
   },
   "scripts": {
     "start": "craco start",
-    "build": "craco build",
+    "build": "prettier --write 'src/**/*.{js,jsx,ts,tsx}' && craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
   },
@@ -48,6 +48,7 @@
   "devDependencies": {
     "@craco/craco": "^7.1.0",
     "@types/react-helmet": "^6.1.11",
-    "craco-alias": "^3.0.1"
+    "craco-alias": "^3.0.1",
+    "prettier": "^3.4.2"
   }
 }

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,28 +39,31 @@ 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) {
       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)
+      _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>
     </>

frontend/src/api/Api.ts

@@ -1,18 +1,39 @@
-import { MapDiscussionCommentContent, MapDiscussionContent, ModMenuContent } from '@customTypes/Content';
-import { delete_token, get_token } from '@api/Auth';
-import { get_user, get_profile, post_profile } from '@api/User';
-import { get_games, get_chapters, get_games_chapters, get_game_maps, get_search } from '@api/Games';
-import { get_official_rankings, get_unofficial_rankings } from '@api/Rankings';
-import { get_map_summary, get_map_leaderboard, get_map_discussions, get_map_discussion, post_map_discussion, post_map_discussion_comment, delete_map_discussion, post_record, delete_map_record } from '@api/Maps';
-import { delete_map_summary, post_map_summary, put_map_image, put_map_summary } from '@api/Mod';
-import { UploadRunContent } from '@customTypes/Content';
+import { MapDiscussionContent, ModMenuContent } from "@customTypes/Content";
+import { delete_token, get_token } from "@api/Auth";
+import { get_user, get_profile, post_profile } from "@api/User";
+import {
+  get_games,
+  get_chapters,
+  get_games_chapters,
+  get_game_maps,
+  get_search,
+} from "@api/Games";
+import { get_official_rankings, get_unofficial_rankings } from "@api/Rankings";
+import {
+  get_map_summary,
+  get_map_leaderboard,
+  get_map_discussions,
+  get_map_discussion,
+  post_map_discussion,
+  post_map_discussion_comment,
+  delete_map_discussion,
+  post_record,
+  delete_map_record,
+} from "@api/Maps";
+import {
+  delete_map_summary,
+  post_map_summary,
+  put_map_image,
+  put_map_summary,
+} from "@api/Mod";
+import { UploadRunContent } from "@customTypes/Content";
 
 // add new api call function entries here
 // example usage: API.get_games();
 export const API = {
   // Auth
   get_token: () => get_token(),
-  
+
   delete_token: () => delete_token(),
   // User
   get_user: (user_id: string) => get_user(user_id),
@@ -29,28 +50,49 @@ export const API = {
   get_unofficial_rankings: () => get_unofficial_rankings(),
   // Maps
   get_map_summary: (map_id: string) => get_map_summary(map_id),
-  get_map_leaderboard: (map_id: string, page: string) => get_map_leaderboard(map_id, page),
+  get_map_leaderboard: (map_id: string, page: string) =>
+    get_map_leaderboard(map_id, page),
   get_map_discussions: (map_id: string) => get_map_discussions(map_id),
-  get_map_discussion: (map_id: string, discussion_id: number) => get_map_discussion(map_id, discussion_id),
+  get_map_discussion: (map_id: string, discussion_id: number) =>
+    get_map_discussion(map_id, discussion_id),
 
-  post_map_discussion: (token: string, map_id: string, content: MapDiscussionContent) => post_map_discussion(token, map_id, content),
-  post_map_discussion_comment: (token: string, map_id: string, discussion_id: number, comment: string) => post_map_discussion_comment(token, map_id, discussion_id, comment),
-  post_record: (token: string, run: UploadRunContent, map_id: number) => post_record(token, run, map_id),
+  post_map_discussion: (
+    token: string,
+    map_id: string,
+    content: MapDiscussionContent
+  ) => post_map_discussion(token, map_id, content),
+  post_map_discussion_comment: (
+    token: string,
+    map_id: string,
+    discussion_id: number,
+    comment: string
+  ) => post_map_discussion_comment(token, map_id, discussion_id, comment),
+  post_record: (token: string, run: UploadRunContent, map_id: number) =>
+    post_record(token, run, map_id),
 
-  delete_map_discussion: (token: string, map_id: string, discussion_id: number) => delete_map_discussion(token, map_id, discussion_id),
+  delete_map_discussion: (
+    token: string,
+    map_id: string,
+    discussion_id: number
+  ) => delete_map_discussion(token, map_id, discussion_id),
 
-  delete_map_record: (token: string, map_id: number, record_id: number) => delete_map_record(token, map_id, record_id),
+  delete_map_record: (token: string, map_id: number, record_id: number) =>
+    delete_map_record(token, map_id, record_id),
   // Mod
-  post_map_summary: (token: string, map_id: string, content: ModMenuContent) => post_map_summary(token, map_id, content),
-
-  put_map_image: (token: string, map_id: string, image: string) => put_map_image(token, map_id, image),
-  put_map_summary: (token: string, map_id: string, content: ModMenuContent) => put_map_summary(token, map_id, content),
-
-  delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id),
+  post_map_summary: (token: string, map_id: string, content: ModMenuContent) =>
+    post_map_summary(token, map_id, content),
+
+  put_map_image: (token: string, map_id: string, image: string) =>
+    put_map_image(token, map_id, image),
+  put_map_summary: (token: string, map_id: string, content: ModMenuContent) =>
+    put_map_summary(token, map_id, content),
+
+  delete_map_summary: (token: string, map_id: string, route_id: number) =>
+    delete_map_summary(token, map_id, route_id),
 };
 
-const BASE_API_URL: string = "/api/v1/"
+const BASE_API_URL: string = "/api/v1/";
 
 export function url(path: string): string {
   return BASE_API_URL + path;
-};
+}

frontend/src/api/Auth.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { url } from "@api/Api";
 
 export const get_token = async (): Promise<string | undefined> => {
-  const response = await axios.get(url(`token`))
+  const response = await axios.get(url(`token`));
   if (!response.data.success) {
     return undefined;
   }

frontend/src/api/Games.ts

@@ -6,26 +6,30 @@ import { Map } from "@customTypes/Map";
 import { Search } from "@customTypes/Search";
 
 export const get_games = async (): Promise<Game[]> => {
-  const response = await axios.get(url(`games`))
+  const response = await axios.get(url(`games`));
   return response.data.data;
 };
 
-export const get_chapters = async (chapter_id: string): Promise<GameChapter> => {
+export const get_chapters = async (
+  chapter_id: string
+): Promise<GameChapter> => {
   const response = await axios.get(url(`chapters/${chapter_id}`));
   return response.data.data;
-}
+};
 
-export const get_games_chapters = async (game_id: string): Promise<GamesChapters> => {
+export const get_games_chapters = async (
+  game_id: string
+): Promise<GamesChapters> => {
   const response = await axios.get(url(`games/${game_id}`));
   return response.data.data;
 };
 
 export const get_game_maps = async (game_id: string): Promise<Map[]> => {
-  const response = await axios.get(url(`games/${game_id}/maps`))
+  const response = await axios.get(url(`games/${game_id}/maps`));
   return response.data.data.maps;
 };
 
 export const get_search = async (q: string): Promise<Search> => {
-  const response = await axios.get(url(`search?q=${q}`))
+  const response = await axios.get(url(`search?q=${q}`));
   return response.data.data;
 };