add user profiles

src/components/match-history.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+
+import Grid from "@material-ui/core/Grid";
+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 Typography from "@material-ui/core/Typography";
+
+import Match from './match';
+import { useUserState } from "./auth";
+import { getUser } from "../api/user";
+
+export default function MatchHistory({ userProfile }) {
+  if (!userProfile) {
+    return null;
+  }
+
+  // grab the 100 at the end of the array, they're the most recent
+  const recentMatches = userProfile.matches.length > 100 ? userProfile.matches.slice(userProfile.matches.length - 100) : userProfile.matches
+
+  return (
+    <List>
+      {recentMatches.reverse().map((matchId) => (
+        <ListItem key={matchId}>
+          <Match matchId={matchId} userId={userProfile.steamid} />
+        </ListItem>
+      ))}
+    </List>
+  );
+}

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

@@ -19,13 +19,11 @@ import { timeAgo } from "short-time-ago";
 
 import { useInView } from 'react-intersection-observer';
 
-import { useUserState } from "../../auth";
-import HeroIcon, {heroName} from '../../hero-icon';
-import { getMatch } from "../../../api/match";
-import { CloudDownload } from "@material-ui/icons";
+import { useUserState } from "./auth";
+import HeroIcon, {heroName} from './hero-icon';
+import { getMatch } from "../api/match";
 
-export default function Match({ matchId }) {
-  const { userId } = useParams();
+export default function Match({ matchId, userId }) {
   const { ref, inView, entry } = useInView({
     triggerOnce: true,
     delay: 500,

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

@@ -8,37 +8,34 @@ import ListItemText from "@material-ui/core/ListItemText";
 import Paper from "@material-ui/core/Paper";
 import Typography from "@material-ui/core/Typography";
 
-import Match from './match';
 
 import StandardPage from "../standard-page";
 
+import MatchHistory from '../../match-history';
 import { useUserState } from "../../auth";
 import { getUser } from "../../../api/user";
 
-export default function MatchHistory() {
+export default function MatchHistoryPage() {
   const { userId } = useParams();
 
   const [userProfile, setUserProfile] = useState(null);
   const [{ user }] = useUserState();
 
-  console.log({ userId });
+  const userIdToFetch = userId || user.steamid;
 
   useEffect(() => {
     async function fetchData() {
-      const userData = getUser(userId || user.steamid);
+      const userData = getUser(userIdToFetch);
 
       setUserProfile(await userData);
     }
     fetchData();
-  }, []);
+  }, [userIdToFetch]);
 
   if (!userProfile) {
     return <StandardPage />;
   }
 
-  // grab the 100 at the end of the array, they're the most recent
-  const recentMatches = userProfile.matches.length > 100 ? userProfile.matches.slice(userProfile.matches.length - 100) : userProfile.matches
-
   return (
     <StandardPage>
       <Typography variant="h2">
@@ -47,12 +44,7 @@ export default function MatchHistory() {
       <Typography variant="subtitle1" gutterBottom>
         {userProfile.profile.name}
       </Typography>
-      <List>
-      {recentMatches.reverse().map((matchId) => (<ListItem key={matchId}>
-        <Match matchId={matchId} />
-      </ListItem>)
-      )}
-      </List>
+      <MatchHistory userProfile={userProfile} />
     </StandardPage>
   );
 }

src/components/pages/overview.jsx

@@ -1,138 +1,13 @@
-import React, { useEffect, useState } from "react";
-import { makeStyles } from '@material-ui/core/styles';
+import React from "react";
 
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-
-import { getUser } from "../../api/user";
-import { useUserState } from '../auth';
-import HeroIcon, { heroName } from '../hero-icon';
+import UserInfo from '../user-info';
 import ActiveMatches from '../active-matches';
 import StandardPage from './standard-page';
 
-const useStyles = makeStyles(theme => ({
-  statBox: {
-    padding: theme.spacing(1, 0, 3, 0)
-  }
-}));
-
 function Overview() {
-  const [userState] = useUserState();
-  const classes = useStyles();
-  const [userProfile, setUserProfile] = useState(null);
-  const { user } = userState;
-
-  useEffect(() => {
-    async function fetchData() {
-      const userData = getUser(user.steamid);
-
-      setUserProfile(await userData);
-    }
-    fetchData();
-  }, []);
-
-
-  const {
-    mmr,
-    profile,
-    matchesFinished,
-    matchesStarted,
-    bestRanking,
-    bottlepassLevel,
-    averageMonthlyDays,
-    seasonPlacings,
-    daysPlayedThisMonth
-  } = userState.user;
-
-  const statBoxes = [{
-    text: 'MMR',
-    value: mmr
-  }, {
-    text: 'Games Started',
-    value: matchesStarted
-  }, {
-    text: 'Games Finished',
-    value: matchesFinished
-  }, {
-    text: 'Bottlepass Level',
-    value: bottlepassLevel
-  }, {
-    text: 'Best Ranking Achieved',
-    value: bestRanking
-  }, {
-    text: 'Average Monthly Days Played',
-    value: (Math.round(10 * averageMonthlyDays) / 10)
-  }, {
-    text: 'Days Played This Month',
-    value: daysPlayedThisMonth,
-  }, {
-    text: 'Top 100 Placings',
-    value: seasonPlacings
-  }];
-
   return (
     <StandardPage>
-      <Typography variant="h2" gutterBottom>
-        { `Hello, ${profile.name}`}
-      </Typography>
-      <Grid container spacing={2}>
-        {statBoxes.map((entry) => (
-          <Grid item xs={12} sm={6} md={3} key={entry.text}>
-            <Paper className={ classes.statBox }>
-              <Typography variant="subtitle1">
-                { entry.text }
-              </Typography>
-              <Typography variant="h3">
-                { entry.value }
-              </Typography>
-            </Paper>
-          </Grid>
-        ))}
-
-        <Grid item xs={12} md={6}>
-          <Paper className={ classes.statBox }>
-            <Typography variant="h5">
-              Most picked heroes
-            </Typography>
-            {userProfile && Object.keys(userProfile.heroPicks)
-              .sort((heroA, heroB) => userProfile.heroPicks[heroB] - userProfile.heroPicks[heroA])
-              .slice(0, 20)
-              .map((hero) => (
-                <Grid container spacing={2} key={hero}>
-                  <Grid item xs={4}>
-                    <HeroIcon height={48} hero={hero} />
-                  </Grid>
-                  <Grid item xs={8} style={{ textAlign: 'left' }}>
-                    {heroName(hero)}
-                  </Grid>
-                </Grid>
-              ))
-            }
-          </Paper>
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <Paper className={ classes.statBox }>
-            <Typography variant="h5">
-              Most banned heroes
-            </Typography>
-            {userProfile && Object.keys(userProfile.heroBans)
-              .sort((heroA, heroB) => userProfile.heroBans[heroB] - userProfile.heroBans[heroA])
-              .slice(0, 20)
-              .map((hero) => (
-                <Grid container spacing={2} key={hero}>
-                  <Grid item xs={4}>
-                    <HeroIcon height={48} hero={hero} />
-                  </Grid>
-                  <Grid item xs={8} style={{ textAlign: 'left' }}>
-                    {heroName(hero)}
-                  </Grid>
-                </Grid>
-              ))
-            }
-          </Paper>
-        </Grid>
-      </Grid>
+      <UserInfo />
       <br />
       <br />
       <ActiveMatches />

src/components/pages/top-players.jsx

@@ -58,7 +58,7 @@ export default function TopPlayers() {
                   </Typography>
                 )}
                 {user.steamid !== player.steamid && (
-                  <Typography variant="h5"><Link href={`/matches/${player.steamid}`}>{player.name}</Link></Typography>
+                  <Typography variant="h5"><Link href={`/user/${player.steamid}`}>{player.name}</Link></Typography>
                 )}
               </Grid>
               <Grid item xs={2} md={7}>

src/components/pages/user-profile.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+
+import { useParams } from "react-router-dom";
+
+import Typography from "@material-ui/core/Typography";
+
+import StandardPage from './standard-page';
+import { useUserState } from "../auth";
+import UserInfo from '../user-info';
+import MatchHistory from '../match-history';
+import { getUser } from "../../api/user";
+
+function Overview() {
+  const [{ user }] = useUserState();
+  const { userId = user.steamid } = useParams();
+  const [userProfile, setUserProfile] = useState(null);
+
+  console.log({ userId });
+
+  useEffect(() => {
+    async function fetchData() {
+      const userData = getUser(userId);
+
+      setUserProfile(await userData);
+    }
+    fetchData();
+  }, [userId]);
+
+  if (!userProfile) {
+    return <StandardPage />;
+  }
+
+  return (
+    <StandardPage>
+      <UserInfo userId={userId} userProfile={userProfile} />
+      <br />
+      <br />
+      <Typography variant="h2">
+        Match History
+      </Typography>
+      <MatchHistory userProfile={userProfile} />
+    </StandardPage>
+  );
+}
+
+export default Overview;

src/components/routes.jsx

@@ -7,6 +7,7 @@ import Overview from "./pages/overview";
 import ManageTeam from "./pages/manage-team";
 import TopPlayers from "./pages/top-players";
 import MatchHistory from "./pages/match-history";
+import UserProfile from './pages/user-profile';
 
 export default function Routes() {
   return (
@@ -23,6 +24,9 @@ export default function Routes() {
       <Route path="/matches/:userId">
         <MatchHistory />
       </Route>
+      <Route path="/user/:userId">
+        <UserProfile />
+      </Route>
       <Route path="/matches">
         <MatchHistory />
       </Route>