diff options
Diffstat (limited to 'pages/index.tsx')
| -rw-r--r-- | pages/index.tsx | 132 |
1 files changed, 68 insertions, 64 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index f341c35..2aa8243 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,6 @@ -import { CSSProperties, Component } from 'react'; +import { CSSProperties, useState, useEffect } from 'react'; import axios from 'axios'; -import { userInfo } from '../api/api'; +import { userInfo, userGameTotals, userGames } from '../api/api'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; @@ -79,6 +79,7 @@ function LoginOrRegisterBox() { function AccountBox(props: { info: userInfo; + sumGameInfo: userGameTotals; }) { return <div style={InnerLoginOrRegisterBoxStyle}> <div style={{ @@ -100,91 +101,94 @@ function AccountBox(props: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", - }}>{props.info.username}</h2> + }}>{props.info?.username}</h2> <p style={{ marginTop: 6 }}>Score: 400</p> <p style={{ position: "absolute", bottom: 0, left: 0 }}> - <span style={{ color: "var(--disk-b-text)" }}>0 W</span> + <span style={{ color: "var(--disk-b-text)" }}>{props.sumGameInfo?.win} W</span> <span style={{ margin: "0 3px" }}>/</span> - <span style={{ color: "var(--disk-a-text)" }}>0 V</span> + <span style={{ color: "var(--disk-a-text)" }}>{props.sumGameInfo?.lose} V</span> <span style={{ margin: "0 3px" }}>/</span> - <span style={{ opacity: .75 }}>0 G</span> + <span style={{ opacity: .75 }}>{props.sumGameInfo?.draw} G</span> </p> </div> </div> } -export default class HomePage extends Component { - state: { - info: userInfo, - loggedIn: boolean - } = { - info: {}, - loggedIn: false - } +export default function HomePage() { + var [gotData, setGotData] = useState(false); + var [loggedIn, setLoggedIn] = useState(false); + var [userInfo, setUserInfo] = useState<userInfo>(); + var [gameInfo, setGameInfo] = useState<userGames>(); - constructor(props: {}) { - super(props); + useEffect(() => {( async () => { + if (gotData) return; if (typeof window === "undefined") return; // return if run on server - this.state.loggedIn = document.cookie.includes("token"); + setLoggedIn(document.cookie.includes("token")); - if (this.state.loggedIn == false) return; // don't request user info if not logged in - axios.request<userInfo>({ + if (!loggedIn) return; // don't request user info if not logged in + var userInfoReq = await axios.request<userInfo>({ method: "get", url: `/api/user/info`, headers: {"content-type": "application/json"} }) - .then(request => this.setState({ info: request.data })) - .catch(() => {}); - } - - render () { - return <div> - <NavBar/> - <CenteredPage width={802}> - <PageTitle>4 op een rij</PageTitle> - <div> - <Vierkant href="/game"> - <VideogameAssetIcon style={GameModeIconStyle}/> - <span style={GameModeTextStyle}>Nieuw spel</span> + setUserInfo(userInfoReq.data); + + var userGamesReq = await axios.request<userGames>({ + method: "get", + url: `/api/user/games`, + headers: {"content-type": "application/json"} + }) + setGameInfo(userGamesReq.data); + + setGotData(true); + })()}) + + return <div> + <NavBar/> + <CenteredPage width={802}> + <PageTitle>4 op een rij</PageTitle> + <div> + <Vierkant href="/game"> + <VideogameAssetIcon style={GameModeIconStyle}/> + <span style={GameModeTextStyle}>Nieuw spel</span> + <div style={SquareSize}></div> + </Vierkant> + { + false && + <Vierkant href="/"> + <ExtensionIcon style={GameModeIconStyle}/> + <span style={GameModeTextStyle}>Puzzels</span> <div style={SquareSize}></div> </Vierkant> - { - false && - <Vierkant href="/"> - <ExtensionIcon style={GameModeIconStyle}/> - <span style={GameModeTextStyle}>Puzzels</span> - <div style={SquareSize}></div> - </Vierkant> - } - { - false && - <Vierkant href="/"> - <Icon path={mdiRobotExcited} style={GameModeIconStyle}/> - <span style={GameModeTextStyle}>Tegen computer</span> - <div style={SquareSize}></div> - </Vierkant> - } - <Vierkant style={LoginOrRegisterBoxStyle}> - { - this.state.loggedIn ? - <AccountBox info={this.state.info}/> : - <LoginOrRegisterBox/> - } - </Vierkant> - </div> + } { - this.state.loggedIn && - <Vierkant fullwidth> - <RecentGames/> + false && + <Vierkant href="/"> + <Icon path={mdiRobotExcited} style={GameModeIconStyle}/> + <span style={GameModeTextStyle}>Tegen computer</span> + <div style={SquareSize}></div> </Vierkant> } + <Vierkant style={LoginOrRegisterBoxStyle}> + { + loggedIn ? + <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals}/> : + <LoginOrRegisterBox/> + } + </Vierkant> + </div> + { + loggedIn && <Vierkant fullwidth> - <h2>Nieuws ofzo</h2> - <p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p> + <RecentGames games={gameInfo?.games}/> </Vierkant> - </CenteredPage> - </div> - } + } + <Vierkant fullwidth> + <h2>Nieuws ofzo</h2> + <p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p> + </Vierkant> + </CenteredPage> + </div> } |