lets find out if this works lol

package.json

@@ -20,6 +20,7 @@
     "react-ga": "^2.7.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
+    "short-time-ago": "^2.0.0",
     "thyming": "^0.1.1",
     "use-global-hook": "^0.1.12"
   },

src/api/match.js

@@ -0,0 +1,12 @@
+import Request from "config-request";
+
+export async function getMatch(matchId) {
+  return new Promise((resolve, reject) => {
+    Request.get(`/matches/${matchId}`, {}, function (err, data) {
+      if (err) {
+        reject(err);
+      }
+      resolve(data ? data : null);
+    });
+  });
+}

src/api/user.js

@@ -0,0 +1,12 @@
+import Request from "config-request";
+
+export async function getUser(userId) {
+  return new Promise((resolve, reject) => {
+    Request.get(`/users/${userId}`, {}, function (err, data) {
+      if (err) {
+        reject(err);
+      }
+      resolve(data ? data : null);
+    });
+  });
+}

src/components/auth.js

@@ -18,6 +18,7 @@ function decodeToken(store, data) {
   const token = Jwt.decode(data);
   Request.configure({
     baseUrl: token.baseUrl,
+    // baseUrl: 'http://localhost:6969/',
     token: data,
     authorization: 'x-auth-token',
     options: {

src/components/drawer.js

@@ -101,6 +101,11 @@ export default function AppDrawer(props) {
       text: "Top Players",
       path: "/top",
     },
+    {
+      icon: EmojiEventsIcon,
+      text: "Match History",
+      path: "/matches",
+    },
     {
       icon: GroupIcon,
       text: "Your Teams",

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

@@ -0,0 +1,56 @@
+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 StandardPage from "../standard-page";
+
+import { useUserState } from "../../auth";
+
+import { getTopPlayers } from "../../../api/top";
+import { getMatch } from "../../../api/match";
+import { getUser } from "../../../api/user";
+
+export default function MatchHistory() {
+  const [userProfile, setUserProfile] = useState(null);
+  const [{ user }] = useUserState();
+
+  useEffect(() => {
+    async function fetchData() {
+      const userData = getUser(user.steamid);
+
+      setUserProfile(await userData);
+    }
+    fetchData();
+  }, []);
+
+
+  console.log(user, userProfile);
+
+  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" gutterBottom>
+        {`Match History`}
+      </Typography>
+      <List>
+      {recentMatches.reverse().map((matchId) => (<ListItem key={matchId}>
+        <Match matchId={matchId} />
+      </ListItem>)
+      )}
+      </List>
+    </StandardPage>
+  );
+}

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

@@ -0,0 +1,119 @@
+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 EmojiEventsIcon from "@material-ui/icons/EmojiEvents";
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+
+import { timeAgo } from "short-time-ago";
+
+import { useUserState } from "../../auth";
+import { getMatch } from "../../../api/match";
+import { CloudDownload } from "@material-ui/icons";
+
+export default function Match({ matchId }) {
+  const [matchData, setMatchData] = useState(null);
+  const [{ user }] = useUserState();
+
+  useEffect(() => {
+    async function fetchData() {
+      const userData = getMatch(matchId);
+
+      setMatchData(await userData);
+    }
+    fetchData();
+  }, []);
+
+  if (!matchData) {
+    return (
+      <Grid container>
+        <Grid item xs={1}>
+          <CloudDownloadIcon />
+        </Grid>
+        <Grid item xs={10}>
+          Loading data for match {matchId.substr(0, 8)}...
+        </Grid>
+      </Grid>
+    );
+  }
+
+  console.log(matchData);
+
+  const startDate = matchData.startTime.substr(0, 8);
+  const startTime = matchData.startTime.substr(8);
+  console.log(startDate, startTime);
+
+  const wasOnDire = matchData.teams.dire.indexOf(user.steamid) >= 0;
+  const teamName = wasOnDire ? "dire" : "radiant";
+  const didWin = matchData.outcome === teamName;
+
+  const myHeroPick = matchData.heroPicks[user.steamid];
+  console.log(myHeroPick);
+  // https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/abaddon.png
+
+  const randomText = myHeroPick && (myHeroPick.rerandom ? "Rerandomed" : (myHeroPick.random ? "Randomed" : ""));
+
+  const gameLength = [];
+
+  if (matchData.gameLength > 3600) {
+    gameLength.push(`${Math.floor(matchData.gameLength / 3600)}hr`);
+  }
+  if (matchData.gameLength > 60) {
+    gameLength.push(`${Math.floor(matchData.gameLength / 60) % 60}m`);
+  }
+  if (matchData.gameLength) {
+    gameLength.push(`${matchData.gameLength % (60)}s`);
+  }
+
+  console.log(gameLength);
+
+  return (
+    <Grid container>
+      <Grid item xs={2} sm={2} md={1}>
+        {startDate}
+      </Grid>
+      <Grid item xs={3} sm={2} md={1}>
+        <EmojiEventsIcon style={{color: didWin ? "#00ff00" : "#ff0000"}} />
+        {" "}
+        <img height={32} src={`/${teamName}.png`} alt={teamName}/>
+      </Grid>
+      <Grid item xs={2} sm={2} md={1}>
+        {!!gameLength.length && gameLength.join(' ')}
+        {!gameLength.length && '?'}
+      </Grid>
+      <Grid item xs={2} sm={2} md={1}>
+        {myHeroPick && (
+          <>
+            <img height={24} src={`https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/${myHeroPick.hero.substr(14)}.png`} alt={myHeroPick.hero.substr(14)}/>
+            {randomText}
+          </>
+        )}
+      </Grid>
+      <Grid item xs={12} sm={6}>
+        {Object.keys(matchData.heroPicks).length > 0 && (
+          <>
+            {matchData.teams.radiant.map((steamid) => {
+              const pick = matchData.heroPicks[steamid];
+              if (pick) {
+                return <img key={steamid} height={24} src={`https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/${pick.hero.substr(14)}.png`} alt={pick.hero.substr(14)}/>
+              }
+              return null;
+            })}
+            {" vs "}
+            {matchData.teams.dire.map((steamid) => {
+              const pick = matchData.heroPicks[steamid];
+              if (pick) {
+                return <img key={steamid} height={24} src={`https://cdn.akamai.steamstatic.com/apps/dota2/images/dota_react/heroes/${pick.hero.substr(14)}.png`} alt={pick.hero.substr(14)}/>
+              }
+              return null;
+            })}
+          </>
+        )}
+      </Grid>
+    </Grid>
+  );
+}

src/components/routes.jsx

@@ -6,6 +6,7 @@ import Admin from "./pages/admin";
 import Overview from "./pages/overview";
 import ManageTeam from "./pages/manage-team";
 import TopPlayers from "./pages/top-players";
+import MatchHistory from "./pages/match-history";
 
 export default function Routes() {
   return (
@@ -19,6 +20,9 @@ export default function Routes() {
       <Route path="/top">
         <TopPlayers />
       </Route>
+      <Route path="/matches">
+        <MatchHistory />
+      </Route>
       <Route path="/team/:action">
         <ManageTeam />
       </Route>

yarn.lock

@@ -9452,6 +9452,11 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+short-time-ago@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/short-time-ago/-/short-time-ago-2.0.0.tgz#3fde172e626999510c5ca6784aba568c964d50dc"
+  integrity sha512-klqvTBTPpU2xI/+qeTl3zMX6EVfcF7ddTfoaOg+aOpJY4IOhwwgxTQ2eu3sLDrSAQL0PwjFAoWqJUDUcJSEXXA==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"