formatted with prettier

1 files changed, 101 insertions, 28 deletions

diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fb13563..51a2020 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -9,26 +9,31 @@ import Discussions from '@components/Discussions';
 import ModMenu from '@components/ModMenu';
 import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
 import { API } from '@api/Api';
-import "@css/Maps.css";
+import '@css/Maps.css';
 
 interface MapProps {
   token?: string;
   isModerator: boolean;
-};
+}
 
 const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
-
   const [selectedRun, setSelectedRun] = React.useState<number>(0);
 
-  const [mapSummaryData, setMapSummaryData] = React.useState<MapSummary | undefined>(undefined);
-  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
-  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined);
+  const [mapSummaryData, setMapSummaryData] = React.useState<
+    MapSummary | undefined
+  >(undefined);
+  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<
+    MapLeaderboard | undefined
+  >(undefined);
+  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<
+    MapDiscussions | undefined
+  >(undefined);
 
   const [navState, setNavState] = React.useState<number>(0);
 
   const location = useLocation();
 
-  const mapID = location.pathname.split("/")[2];
+  const mapID = location.pathname.split('/')[2];
 
   const _fetch_map_summary = async () => {
     const mapSummary = await API.get_map_summary(mapID);
@@ -36,7 +41,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
   };
 
   const _fetch_map_leaderboards = async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, '1');
     setMapLeaderboardData(mapLeaderboards);
   };
 
@@ -56,19 +61,36 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
     return (
       <>
         <main>
-          <section id='section1' className='summary1'>
+          <section id="section1" className="summary1">
             <div>
-              <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+              <Link to="/games">
+                <button
+                  className="nav-button"
+                  style={{ borderRadius: '20px 20px 20px 20px' }}
+                >
+                  <i className="triangle"></i>
+                  <span>Games List</span>
+                </button>
+              </Link>
             </div>
           </section>
 
-          <section id='section2' className='summary1'>
-            <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
-            <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-            <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+          <section id="section2" className="summary1">
+            <button className="nav-button">
+              <img src={PortalIcon} alt="" />
+              <span>Summary</span>
+            </button>
+            <button className="nav-button">
+              <img src={FlagIcon} alt="" />
+              <span>Leaderboards</span>
+            </button>
+            <button className="nav-button">
+              <img src={ChatIcon} alt="" />
+              <span>Discussions</span>
+            </button>
           </section>
 
-          <section id='section6' className='summary2' />
+          <section id="section6" className="summary2" />
         </main>
       </>
     );
@@ -80,29 +102,80 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
         <title>LPHUB | {mapSummaryData.map.map_name}</title>
         <meta name="description" content={mapSummaryData.map.map_name} />
       </Helmet>
-      {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
-
-      <div id='background-image'>
+      {isModerator && (
+        <ModMenu
+          token={token}
+          data={mapSummaryData}
+          selectedRun={selectedRun}
+          mapID={mapID}
+        />
+      )}
+
+      <div id="background-image">
         <img src={mapSummaryData.map.image} alt="" />
       </div>
       <main>
-        <section id='section1' className='summary1'>
+        <section id="section1" className="summary1">
           <div>
-            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
-            <Link to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
-            <br /><span><b>{mapSummaryData.map.map_name}</b></span>
+            <Link to="/games">
+              <button
+                className="nav-button"
+                style={{ borderRadius: '20px 0px 0px 20px' }}
+              >
+                <i className="triangle"></i>
+                <span>Games List</span>
+              </button>
+            </Link>
+            <Link
+              to={`/games/${mapSummaryData.map.is_coop ? '2' : '1'}?chapter=${mapSummaryData.map.chapter_name.split(' ')[1]}`}
+            >
+              <button
+                className="nav-button"
+                style={{ borderRadius: '0px 20px 20px 0px', marginLeft: '2px' }}
+              >
+                <i className="triangle"></i>
+                <span>{mapSummaryData.map.chapter_name}</span>
+              </button>
+            </Link>
+            <br />
+            <span>
+              <b>{mapSummaryData.map.map_name}</b>
+            </span>
           </div>
         </section>
 
-        <section id='section2' className='summary1'>
-          <button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
-          <button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-          <button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+        <section id="section2" className="summary1">
+          <button className="nav-button" onClick={() => setNavState(0)}>
+            <img src={PortalIcon} alt="" />
+            <span>Summary</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(1)}>
+            <img src={FlagIcon} alt="" />
+            <span>Leaderboards</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(2)}>
+            <img src={ChatIcon} alt="" />
+            <span>Discussions</span>
+          </button>
         </section>
 
-        {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
+        {navState === 0 && (
+          <Summary
+            selectedRun={selectedRun}
+            setSelectedRun={setSelectedRun}
+            data={mapSummaryData}
+          />
+        )}
         {navState === 1 && <Leaderboards mapID={mapID} />}
-        {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
+        {navState === 2 && (
+          <Discussions
+            data={mapDiscussionsData}
+            token={token}
+            isModerator={isModerator}
+            mapID={mapID}
+            onRefresh={() => _fetch_map_discussions()}
+          />
+        )}
       </main>
     </>
   );