import Icon from '@mdi/react'; import axios from 'axios'; import { ReactNode, useContext, useEffect, useState } from 'react'; import { userGames, userInfo } from '../api/api'; import { AccountAvatar } from '../components/account'; import { Footer } from '../components/footer'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; import RecentGames from '../components/recentGames'; import { SocketContext } from '../components/socketContext'; import { ToastContext } from '../components/toast'; import { IconLabelButton, Vierkant } from '../components/ui'; import ArrowDownwardOutlinedIcon from '@material-ui/icons/ArrowDownwardOutlined'; import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined'; import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined'; import DoneOutlinedIcon from '@material-ui/icons/DoneOutlined'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; import PeopleOutlineOutlinedIcon from '@material-ui/icons/PeopleOutlineOutlined'; import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined'; import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined'; import { mdiAccountCancelOutline, mdiAccountMinusOutline, mdiAccountRemoveOutline, mdiCheckboxBlankCircle, mdiClipboardTextOutline, mdiEarth, mdiEqual, mdiGamepadSquareOutline, } from '@mdi/js'; function InfoModule(props: { label: string; icon: ReactNode; }) { return
{props.icon}
{props.label}
; } export default function AccountPage() { var server = typeof window === 'undefined'; var loggedIn = !server && document.cookie.includes('token'); var pageID = server ? '' : new URLSearchParams(window.location.search).get('id'); if (!loggedIn && !pageID) !server && window.history.go(-1); var reqData = loggedIn && pageID ? { 'id': pageID } : undefined; var [user, setUser] = useState(); var [gameInfo, setGameInfo] = useState(); var [editingStatus, setEditingStatus] = useState(false); var [relation, setRelation] = useState('none'); var [ownPage, setOwnPage] = useState(loggedIn && !pageID); var { toast } = useContext(ToastContext); var { io } = useContext(SocketContext); async function getUserData(): Promise { var userReq = await axios.request({ method: 'post', url: `/api/user/info`, headers: { 'content-type': 'application/json' }, data: reqData, }); setUser(userReq.data); return userReq.data; } async function getRelationTo(user: userInfo) { var user = await getUserData(); setRelation(user.relation || 'none'); } function setIOListeners(user: userInfo) { io.on('changedRelation', (data: { id: string; }) => { if (data.id != user.id) return; getRelationTo(user); }); io.on('incomingFriendRequest', getRelationTo); } useEffect(() => { (async () => { var user = await getUserData(); getRelationTo(user); setIOListeners(user); })(); }, []); useEffect(() => { (async () => { var userReq = await axios.request({ method: 'post', url: `/api/user/info`, headers: { 'content-type': 'application/json' }, }); setOwnPage(ownPage || userReq.data.id == pageID); })(); }, []); // Get recent games useEffect(() => { (async () => { var userGamesReq = await axios.request({ method: 'post', url: `/api/user/games`, headers: { 'content-type': 'application/json' }, data: reqData, }); setGameInfo(userGamesReq.data); })(); }, []); return
Profiel

{user?.username}

{user?.status}

{loggedIn &&
{ownPage ?
} href='/settings' text='Instellingen' /> {!editingStatus ? } text='Status bewerken' onclick={() => setEditingStatus(true)} /> : } text='Status opslaan' onclick={() => { setEditingStatus(false); axios.request({ method: 'post', url: `/api/user/status`, headers: { 'content-type': 'application/json' }, data: { 'status': document.getElementById('status').innerText }, }); }} />}
:
{(() => { var icon = { 'blocked': , }[relation] || ; var text = { 'blocked': 'Deblokkeren', }[relation] || 'Blokkeren'; return { var nextRelation = { 'blocked': { 'endpoint': '/api/social/unblock', 'action': `${user.username} gedeblokkeerd`, 'relation': 'none', 'icon': , }, }[relation] || { 'endpoint': '/api/social/block', 'action': `${user.username} geblokkeerd`, 'relation': 'blocked', 'icon': , }; axios.request({ method: 'post', url: nextRelation.endpoint, headers: { 'content-type': 'application/json' }, data: { 'id': user?.id }, }) .then(() => { toast({ message: nextRelation.action, type: 'confirmation', icon: nextRelation.icon, }); setRelation(nextRelation.relation); }); }} />; })()} {(() => { var icon = { 'friends': , 'outgoing': , 'incoming': , }[relation] || ; var text = { 'friends': 'Vriend verwijderen', 'outgoing': 'Vriendschapsverzoek annuleren', 'incoming': 'Vriendschapsverzoek accepteren', }[relation] || 'Vriendschapsverzoek sturen'; return { var nextRelation = { 'friends': { 'endpoint': '/api/social/remove', 'action': `${user.username} succesvol verwijderd als vriend`, 'relation': 'none', 'icon': , }, 'outgoing': { 'endpoint': '/api/social/remove', 'action': `Vriendschapsverzoek naar ${user.username} geannuleerd`, 'relation': 'none', 'icon': , }, 'incoming': { 'endpoint': '/api/social/accept', 'action': `Vriendschapsverzoek van ${user.username} geaccepteerd`, 'relation': 'friends', 'icon': , }, }[relation] || { 'endpoint': '/api/social/request', 'action': `Vriendschapsverzoek gestuurd naar ${user.username}`, 'relation': 'outgoing', 'icon': , }; axios.request({ method: 'post', url: nextRelation.endpoint, headers: { 'content-type': 'application/json' }, data: { 'id': user?.id }, }) .then(() => { toast({ message: nextRelation.action, type: 'confirmation', icon: nextRelation.icon, }); setRelation(nextRelation.relation); }); }} />; })()}
}
}
} label='Online' /> } label={(() => { var memberSince = 'Lid sinds'; var registered = new Date(user?.registered); memberSince += ' ' + registered.toLocaleString('nl-nl', { month: 'long', day: 'numeric' }); var currentYear = new Date().getFullYear(); var memberYear = registered.getFullYear(); if (currentYear != memberYear) memberSince += ' ' + memberYear; return memberSince; })()} /> } label={(() => { var label = user?.friends.toString() + ' '; label += user?.friends == 1 ? 'vriend' : 'vrienden'; return label; })()} /> } label='Nederland' />
} label={gameInfo?.totals.win + ' keer gewonnen'} /> } label={gameInfo?.totals.draw + ' keer gelijkspel'} /> } label={gameInfo?.totals.lose + ' keer verloren'} /> } label={'Score: ' + user?.rating} /> } label={(() => { var label = gameInfo?.totals.games.toString() + ' '; label += gameInfo?.totals.games == 1 ? 'potje' : 'potjes'; return label; })()} />
; }