allow viewing other players games

src/components/pages/match-history/index.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 
 import Grid from "@material-ui/core/Grid";
 import List from "@material-ui/core/List";
@@ -15,21 +16,22 @@ import { useUserState } from "../../auth";
 import { getUser } from "../../../api/user";
 
 export default function MatchHistory() {
+  const { userId } = useParams();
+
   const [userProfile, setUserProfile] = useState(null);
   const [{ user }] = useUserState();
 
+  console.log({ userId });
+
   useEffect(() => {
     async function fetchData() {
-      const userData = getUser(user.steamid);
+      const userData = getUser(userId || user.steamid);
 
       setUserProfile(await userData);
     }
     fetchData();
   }, []);
 
-
-  console.log(user, userProfile);
-
   if (!userProfile) {
     return <StandardPage />;
   }
@@ -39,8 +41,11 @@ export default function MatchHistory() {
 
   return (
     <StandardPage>
-      <Typography variant="h2" gutterBottom>
-        {`Match History`}
+      <Typography variant="h2">
+        Match History
+      </Typography>
+      <Typography variant="subtitle1" gutterBottom>
+        {userProfile.profile.name}
       </Typography>
       <List>
       {recentMatches.reverse().map((matchId) => (<ListItem key={matchId}>

src/components/pages/match-history/match.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 
 import Grid from "@material-ui/core/Grid";
 import List from "@material-ui/core/List";
@@ -24,6 +25,7 @@ import { getMatch } from "../../../api/match";
 import { CloudDownload } from "@material-ui/icons";
 
 export default function Match({ matchId }) {
+  const { userId } = useParams();
   const { ref, inView, entry } = useInView({
     triggerOnce: true,
     delay: 500,
@@ -63,16 +65,18 @@ export default function Match({ matchId }) {
     );
   }
 
-  console.log(matchData);
+  // console.log(matchData);
 
   const startDate = matchData.startTime.substr(0, 8);
   const startTime = matchData.startTime.substr(8);
 
-  const wasOnDire = matchData.teams.dire.indexOf(user.steamid) >= 0;
+  const steamid = userId || user.steamid;
+
+  const wasOnDire = matchData.teams.dire.indexOf(steamid) >= 0;
   const teamName = wasOnDire ? "dire" : "radiant";
   const didWin = matchData.outcome === teamName;
 
-  const myHeroPick = matchData.heroPicks[user.steamid];
+  const myHeroPick = matchData.heroPicks[steamid];
   const myHeroName = myHeroPick ? myHeroPick.hero.substr(14) : null;
   // https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/abaddon.png
 

src/components/pages/top-players.jsx

@@ -6,6 +6,7 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import Paper from "@material-ui/core/Paper";
+import Link from "@material-ui/core/Link";
 import Typography from "@material-ui/core/Typography";
 
 import { useUserState } from "../auth";
@@ -57,7 +58,7 @@ export default function TopPlayers() {
                   </Typography>
                 )}
                 {user.steamid !== player.steamid && (
-                  <Typography variant="h5">{player.name}</Typography>
+                  <Typography variant="h5"><Link href={`/matches/${player.steamid}`}>{player.name}</Link></Typography>
                 )}
               </Grid>
               <Grid item xs={2} md={7}>

src/components/routes.jsx

@@ -20,6 +20,9 @@ export default function Routes() {
       <Route path="/top">
         <TopPlayers />
       </Route>
+      <Route path="/matches/:userId">
+        <MatchHistory />
+      </Route>
       <Route path="/matches">
         <MatchHistory />
       </Route>