diff --git a/src/components/match-history.jsx b/src/components/match-history.jsx new file mode 100644 index 0000000..d51f8b8 --- /dev/null +++ b/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 ( + + {recentMatches.reverse().map((matchId) => ( + + + + ))} + + ); +} diff --git a/src/components/pages/match-history/match.jsx b/src/components/match.jsx similarity index 94% rename from src/components/pages/match-history/match.jsx rename to src/components/match.jsx index 71b3a2f..b30e14c 100644 --- a/src/components/pages/match-history/match.jsx +++ b/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, diff --git a/src/components/pages/match-history/index.jsx b/src/components/pages/match-history/index.jsx index 5a00802..9696f7e 100644 --- a/src/components/pages/match-history/index.jsx +++ b/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 ; } - // 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 ( @@ -47,12 +44,7 @@ export default function MatchHistory() { {userProfile.profile.name} - - {recentMatches.reverse().map((matchId) => ( - - ) - )} - + ); } diff --git a/src/components/pages/overview.jsx b/src/components/pages/overview.jsx index bb934a9..b3d08f5 100644 --- a/src/components/pages/overview.jsx +++ b/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 ( - - { `Hello, ${profile.name}`} - - - {statBoxes.map((entry) => ( - - - - { entry.text } - - - { entry.value } - - - - ))} - - - - - Most picked heroes - - {userProfile && Object.keys(userProfile.heroPicks) - .sort((heroA, heroB) => userProfile.heroPicks[heroB] - userProfile.heroPicks[heroA]) - .slice(0, 20) - .map((hero) => ( - - - - - - {heroName(hero)} - - - )) - } - - - - - - Most banned heroes - - {userProfile && Object.keys(userProfile.heroBans) - .sort((heroA, heroB) => userProfile.heroBans[heroB] - userProfile.heroBans[heroA]) - .slice(0, 20) - .map((hero) => ( - - - - - - {heroName(hero)} - - - )) - } - - - +

diff --git a/src/components/pages/top-players.jsx b/src/components/pages/top-players.jsx index 222bc78..83c267f 100644 --- a/src/components/pages/top-players.jsx +++ b/src/components/pages/top-players.jsx @@ -58,7 +58,7 @@ export default function TopPlayers() { )} {user.steamid !== player.steamid && ( - {player.name} + {player.name} )} diff --git a/src/components/pages/user-profile.jsx b/src/components/pages/user-profile.jsx new file mode 100644 index 0000000..38d927f --- /dev/null +++ b/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 ; + } + + return ( + + +
+
+ + Match History + + + + ); +} + +export default Overview; diff --git a/src/components/routes.jsx b/src/components/routes.jsx index 75a803e..869e376 100644 --- a/src/components/routes.jsx +++ b/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() { + + + diff --git a/src/components/user-info.jsx b/src/components/user-info.jsx new file mode 100644 index 0000000..e0be743 --- /dev/null +++ b/src/components/user-info.jsx @@ -0,0 +1,149 @@ +import React, { useEffect, useState } from "react"; +import { makeStyles } from '@material-ui/core/styles'; + +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 ActiveMatches from './active-matches'; + +const useStyles = makeStyles(theme => ({ + statBox: { + padding: theme.spacing(1, 0, 3, 0) + } +})); + +function UserInfo(props = {}) { + const [userState] = useUserState(); + const { userId = userState.steamid } = props; + const classes = useStyles(); + const [userProfile, setUserProfile] = useState(props.userProfile || null); + const { user } = userState; + + const greeting = (user.steamid === userId) ? 'Hello, ' : ''; + + useEffect(() => { + async function fetchData() { + const userData = getUser(userId); + + setUserProfile(await userData); + } + if (userProfile.steamid !== userId) { + fetchData(); + } + }, []); + + if (!userProfile) { + return null; + } + + const { + unrankedMMR, + profile, + matchesFinished, + matchesStarted, + bestRanking, + bottlepassLevel, + averageMonthlyDays, + seasonPlacings, + daysPlayedThisMonth + } = userProfile; + + const mmr = Math.round(unrankedMMR * 100) / 100; + + 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 ( + <> + + {greeting}{profile.name} + + + {statBoxes.map((entry) => ( + + + + { entry.text } + + + { entry.value } + + + + ))} + + + + + Most picked heroes + + {userProfile && Object.keys(userProfile.heroPicks) + .sort((heroA, heroB) => userProfile.heroPicks[heroB] - userProfile.heroPicks[heroA]) + .slice(0, 10) + .map((hero) => ( + + + + + + {heroName(hero)} + + + )) + } + + + + + + Most banned heroes + + {userProfile && Object.keys(userProfile.heroBans) + .sort((heroA, heroB) => userProfile.heroBans[heroB] - userProfile.heroBans[heroA]) + .slice(0, 10) + .map((hero) => ( + + + + + + {heroName(hero)} + + + )) + } + + + + + ); +} + +export default UserInfo;