From bad0c9ad822f96413cd1ac7a918b5e930245ad98 Mon Sep 17 00:00:00 2001
From: FifthWit <fifthwitbusiness@gmail.com>
Date: Thu, 30 Jan 2025 10:39:41 -0600
Subject: missing useEffect dependancies

---
 frontend/src/components/Leaderboards.tsx | 289 ++++++++++++++++++++++---------
 1 file changed, 203 insertions(+), 86 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index fb614fa..05f01d0 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import React from "react";
+import { Link, useNavigate } from "react-router-dom";
 
-import { DownloadIcon, ThreedotIcon } from '@images/Images';
-import { MapLeaderboard } from '@customTypes/Map';
-import { ticks_to_time, time_ago } from '@utils/Time';
+import { DownloadIcon, ThreedotIcon } from "@images/Images";
+import { MapLeaderboard } from "@customTypes/Map";
+import { ticks_to_time, time_ago } from "@utils/Time";
 import { API } from "@api/Api";
 import useMessage from "@hooks/UseMessage";
-import "@css/Maps.css"
+import "@css/Maps.css";
 
 interface LeaderboardsProps {
-	mapID: string;
+  mapID: string;
 }
 
 const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
@@ -18,108 +18,225 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
   const [pageNumber, setPageNumber] = React.useState<number>(1);
 
   const _fetch_map_leaderboards = async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID, pageNumber.toString());
+    const mapLeaderboards = await API.get_map_leaderboard(
+      mapID,
+      pageNumber.toString()
+    );
     setData(mapLeaderboards);
   };
 
   const { message, MessageDialogComponent } = useMessage();
 
   React.useEffect(() => {
-	  _fetch_map_leaderboards();
-	  console.log(data);
-  }, [pageNumber, navigate])
+    _fetch_map_leaderboards();
+    console.log(data);
+  }, [pageNumber, navigate, _fetch_map_leaderboards, data]);
 
   if (!data) {
     return (
-      <section id='section6' className='summary2'>
-        <h1 style={{ textAlign: "center" }}>Map is not available for competitive boards.</h1>
+      <section id="section6" className="summary2">
+        <h1 style={{ textAlign: "center" }}>
+          Map is not available for competitive boards.
+        </h1>
       </section>
     );
-  };
+  }
 
   if (data.records.length === 0) {
     return (
-      <section id='section6' className='summary2'>
+      <section id="section6" className="summary2">
         <h1 style={{ textAlign: "center" }}>No records found.</h1>
       </section>
     );
-  };
+  }
 
   return (
-  <div>
-  	{MessageDialogComponent}
-    <section id='section6' className='summary2'>
-
-      <div id='leaderboard-top'
-        style={data.map.is_coop ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" } : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }}
-      >
-        <span>Place</span>
-
-        {data.map.is_coop ? (
-          <div id='runner'>
-            <span>Blue</span>
-            <span>Orange</span>
-          </div>
-        ) : (
-          <span>Runner</span>
-        )}
-
-        <span>Portals</span>
-        <span>Time</span>
-        <span>Date</span>
-        <div id='page-number'>
-          <div>
-
-            <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
-            ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
-            <span>{data.pagination.current_page}/{data.pagination.total_pages}</span>
-            <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
-            ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+    <div>
+      {MessageDialogComponent}
+      <section id="section6" className="summary2">
+        <div
+          id="leaderboard-top"
+          style={
+            data.map.is_coop
+              ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" }
+              : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }
+          }
+        >
+          <span>Place</span>
+
+          {data.map.is_coop ? (
+            <div id="runner">
+              <span>Blue</span>
+              <span>Orange</span>
+            </div>
+          ) : (
+            <span>Runner</span>
+          )}
+
+          <span>Portals</span>
+          <span>Time</span>
+          <span>Date</span>
+          <div id="page-number">
+            <div>
+              <button
+                onClick={() =>
+                  pageNumber === 1
+                    ? null
+                    : setPageNumber((prevPageNumber) => prevPageNumber - 1)
+                }
+              >
+                <i
+                  className="triangle"
+                  style={{ position: "relative", left: "-5px" }}
+                ></i>{" "}
+              </button>
+              <span>
+                {data.pagination.current_page}/{data.pagination.total_pages}
+              </span>
+              <button
+                onClick={() =>
+                  pageNumber === data.pagination.total_pages
+                    ? null
+                    : setPageNumber((prevPageNumber) => prevPageNumber + 1)
+                }
+              >
+                <i
+                  className="triangle"
+                  style={{
+                    position: "relative",
+                    left: "5px",
+                    transform: "rotate(180deg)",
+                  }}
+                ></i>{" "}
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <hr />
-      <div id='leaderboard-records'>
-        {data.records.map((r, index) => (
-          <span className='leaderboard-record' key={index}
-            style={data.map.is_coop ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" } : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }}
-          >
-            <span>{r.placement}</span>
-            <span> </span>
-            {r.kind === "multiplayer" ? (
-              <div>
-                  <Link to={`/users/${r.host.steam_id}`}><span><img src={r.host.avatar_link} alt='' /> &nbsp; {r.host.user_name}</span></Link>
-                  <Link to={`/users/${r.partner.steam_id}`}><span><img src={r.partner.avatar_link} alt='' /> &nbsp; {r.partner.user_name}</span></Link>
-              </div>
-            ) : r.kind === "singleplayer" && (
-              <div>
-                  <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></Link>
-              </div>
-            )}
-
-            <span>{r.score_count}</span>
-            <span> </span>
-            <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span>
-            <span className='hover-popup' popup-text={r.record_date.replace("T", ' ').split(".")[0]}>{time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))}</span>
-
-            {r.kind === "multiplayer" ? (
-              <span>
-                <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
-                <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
-                <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
+        <hr />
+        <div id="leaderboard-records">
+          {data.records.map((r, index) => (
+            <span
+              className="leaderboard-record"
+              key={index}
+              style={
+                data.map.is_coop
+                  ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" }
+                  : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }
+              }
+            >
+              <span>{r.placement}</span>
+              <span> </span>
+              {r.kind === "multiplayer" ? (
+                <div>
+                  <Link to={`/users/${r.host.steam_id}`}>
+                    <span>
+                      <img src={r.host.avatar_link} alt="" /> &nbsp;{" "}
+                      {r.host.user_name}
+                    </span>
+                  </Link>
+                  <Link to={`/users/${r.partner.steam_id}`}>
+                    <span>
+                      <img src={r.partner.avatar_link} alt="" /> &nbsp;{" "}
+                      {r.partner.user_name}
+                    </span>
+                  </Link>
+                </div>
+              ) : (
+                r.kind === "singleplayer" && (
+                  <div>
+                    <Link to={`/users/${r.user.steam_id}`}>
+                      <span>
+                        <img src={r.user.avatar_link} alt="" /> &nbsp;{" "}
+                        {r.user.user_name}
+                      </span>
+                    </Link>
+                  </div>
+                )
+              )}
+
+              <span>{r.score_count}</span>
+              <span> </span>
+              <span
+                className="hover-popup"
+                popup-text={r.score_time + " ticks"}
+              >
+                {ticks_to_time(r.score_time)}
               </span>
-            ) : r.kind === "singleplayer" && (
-
-              <span>
-                <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
-                <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+              <span
+                className="hover-popup"
+                popup-text={r.record_date.replace("T", " ").split(".")[0]}
+              >
+                {time_ago(
+                  new Date(r.record_date.replace("T", " ").replace("Z", ""))
+                )}
               </span>
-            )}
-          </span>
-        ))}
-      </div>
-    </section>
-	</div>
+
+              {r.kind === "multiplayer" ? (
+                <span>
+                  <button
+                    onClick={() => {
+                      message(
+                        "Demo Information",
+                        `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`
+                      );
+                    }}
+                  >
+                    <img src={ThreedotIcon} alt="demo_id" />
+                  </button>
+                  <button
+                    onClick={() =>
+                      (window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`)
+                    }
+                  >
+                    <img
+                      src={DownloadIcon}
+                      alt="download"
+                      style={{
+                        filter:
+                          "hue-rotate(160deg) contrast(60%) saturate(1000%)",
+                      }}
+                    />
+                  </button>
+                  <button
+                    onClick={() =>
+                      (window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`)
+                    }
+                  >
+                    <img
+                      src={DownloadIcon}
+                      alt="download"
+                      style={{
+                        filter:
+                          "hue-rotate(300deg) contrast(60%) saturate(1000%)",
+                      }}
+                    />
+                  </button>
+                </span>
+              ) : (
+                r.kind === "singleplayer" && (
+                  <span>
+                    <button
+                      onClick={() => {
+                        message("Demo Information", `Demo ID: ${r.demo_id}`);
+                      }}
+                    >
+                      <img src={ThreedotIcon} alt="demo_id" />
+                    </button>
+                    <button
+                      onClick={() =>
+                        (window.location.href = `/api/v1/demos?uuid=${r.demo_id}`)
+                      }
+                    >
+                      <img src={DownloadIcon} alt="download" />
+                    </button>
+                  </span>
+                )
+              )}
+            </span>
+          ))}
+        </div>
+      </section>
+    </div>
   );
 };
 
-- 
cgit v1.2.3