From eeb945302aff6095ccbeea37da6b1c9ed363e1af Mon Sep 17 00:00:00 2001
From: MKuijpers <mika.kuijpers@live.nl>
Date: Sat, 25 Feb 2023 11:30:29 +0100
Subject: [PATCH] Use query mapUId for navigation between viewer and stats page

---
 app/pages/maps/[mapUId]/index.tsx |  4 ++--
 app/pages/maps/[mapUId]/stats.tsx | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/pages/maps/[mapUId]/index.tsx b/app/pages/maps/[mapUId]/index.tsx
index 6158bc67..14a07c17 100644
--- a/app/pages/maps/[mapUId]/index.tsx
+++ b/app/pages/maps/[mapUId]/index.tsx
@@ -153,9 +153,9 @@ const Home = (): JSX.Element => {
             <Layout>
                 <MapHeader mapInfo={mapInfo} title="Replay viewer" backUrl="/">
                     <CleanButton
-                        url={`/maps/${mapInfo?.mapUid}/stats`}
+                        url={`/maps/${mapUId}/stats`}
                         backColor="hsl(0, 0%, 15%)"
-                        disabled={mapInfo === undefined}
+                        disabled={mapUId === undefined}
                     >
                         <div className="flex gap-2 items-center">
                             <PieChartOutlined />
diff --git a/app/pages/maps/[mapUId]/stats.tsx b/app/pages/maps/[mapUId]/stats.tsx
index f5c103f1..7eb1f8d5 100644
--- a/app/pages/maps/[mapUId]/stats.tsx
+++ b/app/pages/maps/[mapUId]/stats.tsx
@@ -28,21 +28,20 @@ const MapStats = () => {
     const [mapStatsType, setMapStatsType] = useState(MapStatsType.GLOBAL);
 
     const router = useRouter();
-    const { mapUId } = router.query;
+    const { mapUId: rawMapUId } = router.query;
+    const mapUId = useMemo(() => (typeof rawMapUId === 'string' ? rawMapUId : undefined), [rawMapUId]);
 
     const {
         data: mapReplayData,
         isLoading: isLoadingReplays,
-    } = useMapReplays(typeof mapUId === 'string' ? mapUId : undefined);
+    } = useMapReplays(mapUId);
 
     const replays = useMemo(
         () => mapReplayData?.replays || [],
         [mapReplayData?.replays],
     );
 
-    const {
-        data: mapInfo,
-    } = useMapInfo(typeof mapUId === 'string' ? mapUId : undefined);
+    const { data: mapInfo } = useMapInfo(mapUId);
 
     // If user object changes, set the according map stats type
     useEffect(() => {
@@ -111,9 +110,9 @@ const MapStats = () => {
                 backUrl="/"
             >
                 <CleanButton
-                    url={`/maps/${mapInfo?.mapUid}`}
+                    url={`/maps/${mapUId}`}
                     backColor="hsl(0, 0%, 15%)"
-                    disabled={mapInfo === undefined}
+                    disabled={mapUId === undefined}
                 >
                     <div className="flex gap-2 items-center">
                         <PlaySquareOutlined />