Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 4x | import React, {useEffect, useState} from "react";
import authHeader from "../auth/authHeader";
import axios from "axios";
import {Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
import {Score} from "./Scores";
type UserScore = {
id: string,
score: number,
date: Date,
fieldSize: number
}
export type User = {
username: string,
email: string
}
type Props = {
title: string
}
// https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258
export default function Profile(props: Props) {
const [highscores, setHighscores] = useState<Score[]>([]);
const [user, setUser] = useState<User|undefined>(undefined);
useEffect(() => getUserData(), []);
function getUserFailed() {
setUser(undefined)
}
function getUserData() {
const header = authHeader();
Iif(header === null) {
return getUserFailed();
}
axios.get('/api/user/profile', { headers: header })
.then(response => setUser(response.data))
.catch(_ => getUserFailed());
axios.get('/api/user/highscore', { headers: header })
.then((response: any) =>
response.data.map((h: UserScore) =>
<TableRow key={h.id}>
<TableCell>{h.score}</TableCell>
<TableCell>{new Date(h.date).toLocaleDateString()}, {new Date(h.date).toLocaleTimeString()}</TableCell>
<TableCell>{h.fieldSize}</TableCell>
</TableRow>
))
.then(element => setHighscores(element))
.catch(_ => getUserFailed());
}
return (
<>
{user ? <>
<p>Hi {user.username}!</p>
<p>Your email is '{user.email}'</p>
<p>Your Highscores</p>
<TableContainer component={Paper}>
<Table aria-label={props.title} id="highscores">
<TableHead>
<TableRow>
<TableCell>Score</TableCell>
<TableCell>Date</TableCell>
<TableCell>Field Size</TableCell>
</TableRow>
</TableHead>
<TableBody>
{highscores}
</TableBody>
</Table>
</TableContainer>
</> :
<p>Your are not logged in!</p>
}
</>
)
}
|