only show extra charts if the player is being tracked

src/common/model/player/impl/scoresaber-player.ts

@@ -37,7 +37,7 @@ export default interface ScoreSaberPlayer extends Player {
   /**
    * The rank history for this player.
    */
-  statisticHistory: { [date: string]: PlayerHistory };
+  statisticHistory: { [key: string]: PlayerHistory };
 
   /**
    * The statistics for this player.
@@ -58,6 +58,12 @@ export default interface ScoreSaberPlayer extends Player {
    * Whether the player is inactive or not.
    */
   inactive: boolean;
+
+  /**
+   * Whether the player is having their
+   * statistics being tracked or not.
+   */
+  isBeingTracked?: boolean;
 }
 
 export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken): Promise<ScoreSaberPlayer> {
@@ -74,6 +80,7 @@ export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken)
       };
     }) || [];
 
+  let isBeingTracked = false;
   const todayDate = formatDateMinimal(getMidnightAlignedDate(new Date()));
   let statisticHistory: { [key: string]: PlayerHistory } = {};
   try {
@@ -96,6 +103,8 @@ export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken)
           averageRankedAccuracy: token.scoreStats.averageRankedAccuracy,
         },
       };
+
+      isBeingTracked = true;
     }
     statisticHistory = history;
   } catch (error) {
@@ -168,6 +177,7 @@ export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken)
     permissions: token.permissions,
     banned: token.banned,
     inactive: token.inactive,
+    isBeingTracked: isBeingTracked,
   };
 }
 

src/components/player/chart/player-charts.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
-import PlayerAccuracyChart from "@/components/player/chart/player-accuracy-chart";
 import PlayerRankingChart from "@/components/player/chart/player-ranking-chart";
 import { FC, useState } from "react";
 import Tooltip from "@/components/tooltip";
+import PlayerAccuracyChart from "@/components/player/chart/player-accuracy-chart";
 
 type PlayerChartsProps = {
   /**
@@ -37,12 +37,15 @@ export default function PlayerCharts({ player }: PlayerChartsProps) {
       chart: PlayerRankingChart,
       label: "Ranking",
     },
-    {
+  ];
+  if (player.isBeingTracked) {
+    charts.push({
       index: 1,
       chart: PlayerAccuracyChart,
       label: "Accuracy",
-    },
+    });
-  ];
+  }
+
   const [selectedChart, setSelectedChart] = useState<SelectedChart>(charts[0]);
 
   return (
@@ -50,26 +53,27 @@ export default function PlayerCharts({ player }: PlayerChartsProps) {
       {selectedChart.chart({ player })}
 
       <div className="flex items-center justify-center gap-2">
-        {charts.map(chart => {
+        {charts.length > 1 &&
-          const isSelected = chart.index === selectedChart.index;
+          charts.map(chart => {
+            const isSelected = chart.index === selectedChart.index;
 
-          return (
+            return (
-            <Tooltip
+              <Tooltip
-              key={chart.index}
+                key={chart.index}
-              display={
+                display={
-                <div className="flex justify-center items-center flex-col">
+                  <div className="flex justify-center items-center flex-col">
-                  <p>{chart.label} Chart</p>
+                    <p>{chart.label} Chart</p>
-                  <p className="text-gray-600">{isSelected ? "Currently Selected" : "Click to view"}</p>
+                    <p className="text-gray-600">{isSelected ? "Currently Selected" : "Click to view"}</p>
-                </div>
+                  </div>
-              }
+                }
-            >
+              >
-              <button
+                <button
-                onClick={() => setSelectedChart(chart)}
+                  onClick={() => setSelectedChart(chart)}
-                className={`border ${isSelected ? "bg-input brightness-75" : "border-input"}  w-fit p-2 rounded-full`}
+                  className={`border ${isSelected ? "bg-input brightness-75" : "border-input"}  w-fit p-2 rounded-full`}
-              />
+                />
-            </Tooltip>
+              </Tooltip>
-          );
+            );
-        })}
+          })}
       </div>
     </>
   );

src/components/player/player-scores.tsx

@@ -126,9 +126,12 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
   /**
    * Gets the URL to the page.
    */
-  const getUrl = (page: number) => {
+  const getUrl = useCallback(
-    return `/player/${player.id}/${pageState.sort}/${page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
+    (page: number) => {
-  };
+      return `/player/${player.id}/${pageState.sort}/${page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
+    },
+    [debouncedSearchTerm, player.id, pageState.sort]
+  );
 
   /**
    * Handle updating the URL when the page number,
@@ -137,7 +140,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
   useEffect(() => {
     const newUrl = getUrl(pageState.page);
     window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
-  }, [pageState, debouncedSearchTerm, player.id, isSearchActive, getUrl]);
+  }, [pageState, debouncedSearchTerm, player.id, isSearchActive]);
 
   /**k
    * Handle scrolling to the top of the