138 lines
3.5 KiB
TypeScript
138 lines
3.5 KiB
TypeScript
// import PropTypes from "prop-types"
|
|
// import styled from 'styled-components';
|
|
// import '../DataBase/DummyDBWinLoss.js'
|
|
// import '../DataBase/DataProfileUser.js'
|
|
// import { DBWinLoss } from '../../DataBase/DummyDBWinLoss.js';
|
|
import '../../styles/Win_Loss.css'
|
|
// import { UserProfile } from '../../DataBase/DataUserProfile';
|
|
// import color from '../../utils/style/color.js';
|
|
|
|
|
|
|
|
// const CardWrapper = styled.div`
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// padding: 15px;
|
|
// background-color: black;
|
|
// border-radius: 30px;
|
|
// width: 350px;
|
|
// transition: 200ms;
|
|
// margin-top: 50px;
|
|
// &:hover {
|
|
// cursor: pointer;
|
|
// box-shadow: 2px 2px 10px #b6b6b6;
|
|
// }
|
|
// `
|
|
|
|
// const CardLabel1 = styled.h1`
|
|
// color: #5843e4;
|
|
// // font-size: 22px;
|
|
// font-weight: bold;
|
|
// margin-bottom: 25px;
|
|
// `
|
|
// const CardLabel2 = styled.span`
|
|
// color: #5843e4;
|
|
// font-size: 22px;
|
|
// font-weight: bold;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// `
|
|
|
|
// const CardImage = styled.img`
|
|
// heigh: 80px;
|
|
// width: 80px;
|
|
// border-radius: 50%;
|
|
// `
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import { useParams } from 'react-router-dom';
|
|
import api from '../../script/axiosApi';
|
|
|
|
|
|
function WinLoss() {
|
|
|
|
const [user, setUser] = useState(null);
|
|
const [history, setHistory] = useState([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const { username } = useParams();
|
|
|
|
useEffect(()=> {
|
|
const getUser = async ()=>{
|
|
try{
|
|
// const tmpUser = await api.get("/profile")
|
|
const tmpUser = await api.post("/user", {username: username})
|
|
const tmpHistory = await api.post("/history", {username: username})
|
|
setHistory(tmpHistory.data);
|
|
setUser(tmpUser.data);
|
|
setIsLoading(false)
|
|
}
|
|
catch(err){
|
|
console.log(err);
|
|
}
|
|
};
|
|
getUser();
|
|
}, [])
|
|
|
|
// console.log(`user= ${user.children}`)
|
|
|
|
return (
|
|
|
|
// <div>
|
|
// {isLoading ? (
|
|
// <h1>Loading...</h1>
|
|
// ) : (
|
|
// <h1>{user.username}</h1>
|
|
// )}
|
|
// </div>
|
|
|
|
|
|
<div className='tab'>
|
|
{isLoading ? (
|
|
<h1>Loading...</h1>
|
|
// <span>Loading...</span>
|
|
) : (
|
|
<div className='scroll'>
|
|
<h2 className='title'>Match history Win/Loss</h2>
|
|
{history.map((c, index) => {
|
|
return (
|
|
<div key={index} className='elements'>
|
|
<li key={index}>
|
|
{/* <h4 className='content'>{c.id}</h4> */}
|
|
<div key={index} className='content2nd'>
|
|
<h4 key={index} className='me'>{user.username}</h4> <h4 key={index} className='score'>{c.myScore} - {c.opScore} </h4> <h4 key={index} className="opponent">{c.opponent}</h4>
|
|
</div>
|
|
{/* <h4 className='content'>{c.openent}</h4> */}
|
|
</li>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
|
|
|
|
// <div>
|
|
// <h1>User: {user.name}</h1>
|
|
// <div>
|
|
// <h2>Children:</h2>
|
|
// {history.map((child) => (
|
|
// <div key={child.id}>
|
|
// <p>Child ID: {child.id}</p>
|
|
// <p>Child Name: {child.name}</p>
|
|
// {/* Render other child properties as needed */}
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Card.propTypes = {
|
|
// label: PropTypes.string,
|
|
// title: PropTypes.string.isRequired,
|
|
// picture: PropTypes.string,
|
|
// }
|
|
|
|
export default WinLoss |