diff --git a/src/components/GameStats/GameStats.tsx b/src/components/GameStats/GameStats.tsx index c17155e..da74d98 100644 --- a/src/components/GameStats/GameStats.tsx +++ b/src/components/GameStats/GameStats.tsx @@ -1,12 +1,15 @@ import { Doughnut } from "react-chartjs-2" import { Card, CardHeader, CardBody, CardGroup, Input, Label } from "reactstrap" -import { useCallback, useState } from "react" +import { useCallback, useMemo, useState } from "react" import { useAppSelector } from "../../caches/hooks" import { getGameStats } from "../../caches/GameStatsSlice" import "chart.js/auto" import { ChartOptions } from "chart.js" +import { getMyProfile } from "../../caches/MyProfileSlice" +import PlayerSwitcher from "./PlayerSwitcher" const GameStats = () => { + const myProfile = useAppSelector(getMyProfile) const stats = useAppSelector(getGameStats) const [last3Months, updateLast3Months] = useState(false) @@ -14,35 +17,48 @@ const GameStats = () => { const fromDate = new Date() fromDate.setMonth(fromDate.getMonth() - 3) - const filteredStats = last3Months - ? stats.filter(s => new Date(s.timestamp) >= fromDate) - : stats - const wins = filteredStats.filter(g => g.winner) - const data = { - labels: ["Win", "Loss"], - datasets: [ - { - label: "My Win Percentage", - data: [wins.length, filteredStats.length - wins.length], - backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)"], - hoverOffset: 4, - }, - ], - } + const filteredStats = useMemo( + () => + last3Months + ? stats.filter(s => new Date(s.timestamp) >= fromDate) + : stats, + [stats], + ) + + const wins = useMemo( + () => filteredStats.filter(g => g.winner), + [filteredStats], + ) + + const data = useMemo(() => { + return { + labels: ["Win", "Loss"], + datasets: [ + { + label: "My Win Percentage", + data: [wins.length, filteredStats.length - wins.length], + backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)"], + hoverOffset: 4, + }, + ], + } + }, [wins, filteredStats]) - const options: ChartOptions = { - maintainAspectRatio: false, - plugins: { - title: { - display: true, - text: `Win Percentage (${( - (wins.length / filteredStats.length) * - 100 - ).toFixed(1)}%)`, - position: "bottom", + const options: ChartOptions = useMemo(() => { + return { + maintainAspectRatio: false, + plugins: { + title: { + display: true, + text: `Win Percentage (${( + (wins.length / filteredStats.length) * + 100 + ).toFixed(1)}%)`, + position: "bottom", + }, }, - }, - } + } + }, [wins, filteredStats]) const threeMonthsCheckboxChanged = useCallback( (e: React.ChangeEvent) => { @@ -58,7 +74,8 @@ const GameStats = () => { return ( - My Stats + Stats + {myProfile.isAdmin ? : null} {!!stats && stats.length > 0 ? ( { + const dispatch = useAppDispatch() + const myProfile = useAppSelector(getMyProfile) + const players = useAppSelector(getPlayerProfiles) + const [showDropdown, setShowDropdown] = useState(false) + const [currentPlayer, setCurrentPlayer] = useState() + + const toggleDropdown = useCallback( + () => setShowDropdown(!showDropdown), + [showDropdown], + ) + + useEffect(() => { + const me = players.find(p => p.id === myProfile.id) + if (me) setCurrentPlayer(me) + }, [myProfile]) + + useEffect(() => { + dispatch(StatsService.gameStatsForPlayer(currentPlayer?.id)) + }, [currentPlayer]) + + return ( + + + {currentPlayer setShowDropdown(true)} + /> + + + {players.map(p => { + return ( + setCurrentPlayer(p)}> + {p.name} + + ) + })} + + + ) +} + +export default PlayerSwitcher diff --git a/src/services/StatsService.ts b/src/services/StatsService.ts index 5a2a9c7..e8bdc19 100644 --- a/src/services/StatsService.ts +++ b/src/services/StatsService.ts @@ -6,13 +6,19 @@ import { PlayerGameStats } from "../model/Player" import { getDefaultConfig } from "../utils/AxiosUtils" const gameStatsForPlayer = - (): AppThunk> => async (dispatch, getState) => { + (playerId?: string): AppThunk> => + async (dispatch, getState) => { const accessToken = getAccessToken(getState()) - const response = await axios.get( - `${process.env.REACT_APP_API_URL}/api/v1/stats/gameStatsForPlayer`, - getDefaultConfig(accessToken), - ) + const url = playerId + ? `${ + process.env.REACT_APP_API_URL + }/api/v1/admin/stats/gameStatsForPlayer?playerId=${encodeURIComponent( + playerId, + )}` + : `${process.env.REACT_APP_API_URL}/api/v1/stats/gameStatsForPlayer` + + const response = await axios.get(url, getDefaultConfig(accessToken)) dispatch(updateGameStats(response.data)) return response.data }