/user page use /user/games api

3 files changed, 44 insertions, 8 deletions

diff --git a/api/api.ts b/api/api.ts
index 43d7951..2746238 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -31,3 +31,30 @@ export interface userPreferences {
 	userColors?: userColors;
 }
 
+export interface userGameTotals {
+    draw: number;
+    games: number;
+    lose: number;
+    win: number;
+}
+
+export interface userGames {
+	totals: userGameTotals;
+	games: Array<gameInfo>;
+}
+
+export interface gameInfo {
+	created: number;
+	duration: number;
+	id: string;
+	moves: Array<number>;
+	opponent: string;
+	outcome: "w"|"l"|"d";
+	parent?: string;
+	private: boolean;
+	rating?: number;
+	rating_opponent?: number;
+	ruleset: ruleset;
+	started: number;
+	status: "finished"|"in_progress"|"resign"|"wait_for_opponent";
+}
diff --git a/api/user/games.py b/api/user/games.py
index f08928a..43bd59e 100644
--- a/api/user/games.py
+++ b/api/user/games.py
@@ -29,7 +29,7 @@ def game_info(game_id, user_id = None):
     return {
         "id": game[0],
         "parent": game[1],
-        "moves": game[2],
+        "moves": [int(column) for move in str(game[2]).split(",")],
         "opponent": game[3] if is_player_1 else game[4],
         "outcome": outcome,
         "created": game[6],
@@ -39,7 +39,7 @@ def game_info(game_id, user_id = None):
         "rating_opponent": game[10] if is_player_1 else game[9],
         "ruleset": resolve_ruleset(game[11]),
         "status": game[12],
-        "private": game[13],
+        "private": bool(game[13]),
     }
 
 def sum_games(user_id): #! SANITIZE USER_ID FIRST
diff --git a/pages/user.tsx b/pages/user.tsx
index 42cfb17..a8cc9c5 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -1,13 +1,12 @@
 import { ReactNode, Children, useState, useEffect } from 'react';
 import Icon from '@mdi/react';
 import axios from 'axios';
-import useSWR from 'swr';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import { Vierkant, IconLabelButton } from '../components/ui';
 import { AccountAvatar } from '../components/account';
-import { userInfo } from '../api/api';
+import { userInfo, userGames } from '../api/api';
 import RecentGames from '../components/recentGames';
 
 import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined';
@@ -71,6 +70,7 @@ export default function AccountPage() {
 	var [gotData, setGotData] = useState(false);
 	var [user, setUser] = useState<userInfo>();
 	var [ownPage, setOwnPage] = useState(false);
+	var [gameInfo, setGameInfo] = useState<userGames>();
 
 	useEffect(() => {(async() => {
 		if (gotData) return;
@@ -101,6 +101,15 @@ export default function AccountPage() {
 			});
 
 			setUser(userReq.data);
+
+			var userGamesReq = await axios.request<userGames>({
+				method: "post",
+				url: `/api/user/games`,
+				headers: {"content-type": "application/json"},
+				data: { "id": id || self_id }
+			});
+
+			setGameInfo(userGamesReq.data);
 		} else {
 			window.history.go(-1);
 		}
@@ -160,11 +169,11 @@ export default function AccountPage() {
 				<InfoModule icon={<Icon size={1} path={mdiEarth}/>} label="Nederland"/>
 			</InfoSection>
 			<InfoSection>
-				<InfoModule icon={<ArrowUpwardOutlinedIcon style={{ color: "var(--disk-b-text)" }}/>} label="4 keer gewonnen"/>
-				<InfoModule icon={<Icon size={1} path={mdiEqual}/>} label="2 keer gelijkspel"/>
-				<InfoModule icon={<ArrowDownwardOutlinedIcon style={{ color: "var(--disk-a-text)" }}/>} label="2 keer verloren"/>
+				<InfoModule icon={<ArrowUpwardOutlinedIcon style={{ color: "var(--disk-b-text)" }}/>} label={ gameInfo?.totals.win + " keer gewonnen" }/>
+				<InfoModule icon={<Icon size={1} path={mdiEqual}/>} label={ gameInfo?.totals.draw + " keer gelijkspel" }/>
+				<InfoModule icon={<ArrowDownwardOutlinedIcon style={{ color: "var(--disk-a-text)" }}/>} label={ gameInfo?.totals.lose + " keer verloren" }/>
 				<InfoModule icon={<Icon size={1} path={mdiClipboardTextOutline}/>} label="Score: 400"/>
-				<InfoModule icon={<Icon size={1} path={mdiGamepadSquareOutline}/>} label="6 potjes"/>
+				<InfoModule icon={<Icon size={1} path={mdiGamepadSquareOutline}/>} label={ gameInfo?.totals.games + " potjes" }/>
 			</InfoSection>
 			<Vierkant>
 				<RecentGames/>