Live matches improvements (#221)

* wip - fix the pagination * Finish the live matches components * Add player names to the url
cohstats · May 20, 2022 · 436b7f2 · 436b7f2
1 parent 0b643d8
commit 436b7f2
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 24 deletions.
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -56,6 +56,9 @@ const App: React.FC = () => {
             <Route path={routes.statsBase()}>
               <CustomStats />
             </Route>
+            <Route path={routes.playerCardWithIdAndName()}>
+              <PlayerCard />
+            </Route>
             <Route path={routes.playerCardWithId()}>
               <PlayerCard />
             </Route>

diff --git a/packages/web/src/pages/live-matches/live-matches-card.tsx b/packages/web/src/pages/live-matches/live-matches-card.tsx
@@ -1,22 +1,14 @@
 import React from "react";
 import { Card, Row, Col, Typography } from "antd";
 import { useData, useLoading } from "../../firebase";
-import { useFirestoreConnect } from "react-redux-firebase";
 import { StatsCurrentLiveGames } from "../../coh/types";
 import { Divider } from "antd";
 import { TeamOutlined } from "@ant-design/icons";
 import { Helper } from "../../components/helper";
 const { Text } = Typography;
 
 const LiveMatchesCard: React.FC = () => {
-  useFirestoreConnect([
-    {
-      collection: "stats",
-      doc: "inGamePlayers",
-      storeAs: "liveMatchesStats",
-    },
-  ]);
-
+  // The connection of this data is done in root component useFirestoreConnect
   const isLoading = useLoading("liveMatchesStats");
   const data: StatsCurrentLiveGames = useData("liveMatchesStats");
 

diff --git a/packages/web/src/pages/live-matches/live-matches-table.tsx b/packages/web/src/pages/live-matches/live-matches-table.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Row, Table, Typography } from "antd";
-import { LiveGame } from "../../coh/types";
+import { LiveGame, StatsCurrentLiveGames } from "../../coh/types";
 import { isDev, useQuery } from "../../utils/helpers";
 import { TeamOutlined } from "@ant-design/icons";
 import firebaseAnalytics from "../../analytics";
@@ -16,9 +16,37 @@ import { convertSteamNameToID, getGeneralIconPath } from "../../coh/helpers";
 import { Link } from "react-router-dom";
 import routes from "../../routes";
 import { ColumnsType } from "antd/lib/table";
+import { useData } from "../../firebase";
 
 const { Text } = Typography;
 
+// Page size
+const count = 40;
+
+const calculatePagination = (playerGroup: string, overviewData: StatsCurrentLiveGames) => {
+  if (playerGroup == null || overviewData == null) {
+    return count;
+  }
+
+  const games = overviewData.games;
+
+  if (playerGroup === "1") {
+    return games["1v1"] + count;
+  } else if (playerGroup === "2") {
+    return games["2v2"] + count;
+  } else if (playerGroup === "3") {
+    return games["3v3"] + count;
+  } else if (playerGroup === "4") {
+    return games["4v4"] + count;
+  } else if (playerGroup === "5") {
+    return games["AI"] + count;
+  } else if (playerGroup === "0") {
+    return games["custom"] + count;
+  } else {
+    return 500;
+  }
+};
+
 const LiveMatchesTable: React.FC<{
   changeRoute: Function;
 }> = ({ changeRoute }) => {
@@ -27,7 +55,8 @@ const LiveMatchesTable: React.FC<{
   const playerGroup = query.get("playerGroup") || "1";
   const startQuery = query.get("start") || "0";
   const orderByQuery = query.get("orderBy") || "0";
-  const count = 40;
+
+  const overViewData: StatsCurrentLiveGames = useData("liveMatchesStats");
 
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<null | string>(null);
@@ -44,6 +73,23 @@ const LiveMatchesTable: React.FC<{
     data: null,
   });
 
+  // When our pagination data are loaded let's change it
+  useEffect(() => {
+    setData((prevState) => {
+      return {
+        data: prevState.data,
+        pagination: {
+          current: prevState.pagination.current,
+          pageSize: count,
+          total: calculatePagination(playerGroup, overViewData),
+          pageSizeOptions: [`${count}`],
+        },
+      };
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overViewData]);
+
   useEffect(() => {
     firebaseAnalytics.liveMatchesDisplayed();
 
@@ -65,14 +111,22 @@ const LiveMatchesTable: React.FC<{
 
         const current = Math.floor(parseInt(startQuery) / count) + 1;
 
-        setData({
-          pagination: {
-            current: current === 0 ? 1 : current,
-            pageSize: count,
-            total: 500,
-            pageSizeOptions: [`${count}`],
-          },
-          data: await response.json(),
+        const finalData = await response.json();
+
+        setData((prevState) => {
+          return {
+            pagination: {
+              current: current === 0 ? 1 : current,
+              pageSize: count,
+              // On the first render the second API call might finish sooner
+              total:
+                overViewData === undefined
+                  ? prevState.pagination.total
+                  : calculatePagination(playerGroup, overViewData),
+              pageSizeOptions: [`${count}`],
+            },
+            data: finalData,
+          };
         });
       } catch (e) {
         let errorMessage = "Failed to fetch the data.";
@@ -85,10 +139,12 @@ const LiveMatchesTable: React.FC<{
         setIsLoading(false);
       }
     })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playerGroup, startQuery, orderByQuery]);
 
   if (isDev()) {
-    console.log(data);
+    console.debug("re-render");
+    console.debug(data);
   }
 
   const handleTableChange = (pagination: any, filters: any, sorter: any) => {

diff --git a/packages/web/src/pages/live-matches/live-matches.tsx b/packages/web/src/pages/live-matches/live-matches.tsx
@@ -6,13 +6,22 @@ import routes from "../../routes";
 import { useHistory } from "react-router";
 import LiveMatchesTable from "./live-matches-table";
 import firebaseAnalytics from "../../analytics";
+import { useFirestoreConnect } from "react-redux-firebase";
 
 const { Option } = Select;
 
 const LiveMatches: React.FC = () => {
   const { push } = useHistory();
   const query = useQuery();
 
+  useFirestoreConnect([
+    {
+      collection: "stats",
+      doc: "inGamePlayers",
+      storeAs: "liveMatchesStats",
+    },
+  ]);
+
   const playerGroup = query.get("playerGroup") || "1";
   const startQuery = query.get("start") || 0;
   const orderByQuery = query.get("orderBy") || "0";
@@ -28,6 +37,11 @@ const LiveMatches: React.FC = () => {
       orderByToLoad = "1";
     }
 
+    // When we are changing the player group we want to reset the pagination
+    if (playerGroupToLoad !== undefined) {
+      startToLoad = 0;
+    }
+
     const searchValue = `?${new URLSearchParams({
       playerGroup: playerGroupToLoad || playerGroup,
       orderBy: orderByToLoad || orderByQuery,

diff --git a/packages/web/src/pages/players/player-card.tsx b/packages/web/src/pages/players/player-card.tsx
@@ -14,7 +14,6 @@ import Title from "antd/es/typography/Title";
 import { calculateOverallStatsForPlayerCard } from "./data-processing";
 import { convertTeamNames } from "./helpers";
 import LastMatchesTable from "../matches/last-matches-table";
-import routes from "../../routes";
 import PlayerStandingsTables from "./player-standings";
 import config from "../../config";
 import { AlertBox } from "../../components/alert-box";
@@ -58,6 +57,20 @@ const PlayerCard = () => {
 
     setIsLoading(true);
 
+    const addNameToUrl = (playerName: string) => {
+      if (!playerName) {
+        return;
+      }
+
+      const cleanName = playerName.replace(/[^a-zA-Z0-9-_]/g, "");
+      // If it's not in the path, let's push it there
+      if (!window.location.pathname.includes(cleanName)) {
+        push({
+          pathname: `${window.location.pathname}-${cleanName}`,
+        });
+      }
+    };
+
     (async () => {
       try {
         const response = await fetch(
@@ -68,7 +81,10 @@ const PlayerCard = () => {
             `API request failed with code: ${response.status}, res: ${await response.text()}`,
           );
         }
-        setData(await response.json());
+
+        const finalData: playerCardAPIObject = await response.json();
+        setData(finalData);
+        addNameToUrl(Object.values(finalData.steamProfile)[0].personaname);
       } catch (e) {
         let errorMessage = "Failed to do something exceptional";
         if (e instanceof Error) {
@@ -80,7 +96,7 @@ const PlayerCard = () => {
         setIsLoading(false);
       }
     })();
-  }, [steamid]);
+  }, [steamid, push]);
 
   if (!isLoading && error != null) {
     return (
@@ -107,7 +123,6 @@ const PlayerCard = () => {
     const searchValue = view !== "stats" ? `?${new URLSearchParams({ view })}` : "";
 
     push({
-      pathname: routes.playerCardWithId(steamid),
       search: searchValue,
     });
   };

diff --git a/packages/web/src/routes.ts b/packages/web/src/routes.ts
@@ -68,6 +68,10 @@ const playerCardWithId = (steamId = ":steamid") => {
   return `${playerCardBase()}/${steamId}`;
 };
 
+const playerCardWithIdAndName = (steamId = ":steamid") => {
+  return `${playerCardBase()}/${steamId}-*`;
+};
+
 const playerMatches = (steamId = ":steamid") => {
   return `${matchesBase()}/player/${steamId}`;
 };
@@ -88,6 +92,7 @@ const routes = {
   leaderboardsBase,
   playerCardBase,
   playerCardWithId,
+  playerCardWithIdAndName,
   desktopAppBase,
 };