From e4b7c38451efef544f1ed639fc0d9e3597a920a0 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 9 Mar 2021 19:45:47 +0100
Subject: user page date + async stuffings

---
 pages/login.tsx    |  2 +-
 pages/register.tsx |  2 +-
 pages/search.tsx   |  4 ++--
 pages/user.tsx     | 60 +++++++++++++++++++++++++++++++++++++++++++-----------
 4 files changed, 52 insertions(+), 16 deletions(-)

(limited to 'pages')

diff --git a/pages/login.tsx b/pages/login.tsx
index 9df9490..1cbacb1 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -49,7 +49,7 @@ export default function LoginPage() {
 				}}>
 					<Vierkant>
 						<form onSubmit={submitLogin}>
-							<Input autocomplete="username" id="email" label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
+							<Input autofocus autocomplete="username" id="email" label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
 							<Input autocomplete="current-password" id="password" label="wachtwoord" type="password"></Input>
 							<div style={{
 								marginTop: 24,
diff --git a/pages/register.tsx b/pages/register.tsx
index 3616bb8..5426cbc 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -81,7 +81,7 @@ export default function RegisterPage() {
 				}}>
 					<Vierkant>
 						<form onSubmit={submitRegister}>
-							<Input autocomplete="username" id="username" label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
+							<Input autofocus autocomplete="username" id="username" label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
 							<Input autocomplete="email" id="email" label="email" style={{ marginBottom: 12 }}></Input>
 							<Input autocomplete="new-password" id="password" label="wachtwoord" type="password"></Input>
 							<Button text="Registreren" style={{ marginTop: 24 }} onclick={submitRegister}></Button>
diff --git a/pages/search.tsx b/pages/search.tsx
index 963fcba..e2825e8 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -32,7 +32,7 @@ function SearchResults(props: { userList: Array<userInfo> }) {
 function SearchResult(props: { user: userInfo }) {
 	return <Vierkant style={{
 		padding: 12
-	}} fullwidth href={`/user?id=${props.user.id}`}>
+	}} fullwidth href={"/user?id=" + props.user.id}>
 		<div style={{ position: "relative" }}>
 			<AccountAvatar size={48} dummy/>
 			<div style={{
@@ -55,7 +55,7 @@ function SearchBar(props: {
 		marginBottom: 24
 	}}>
 		<form onSubmit={props.searchFunction}>
-			<Input id="searchBar" label="Zoeken voor gebruikers..." autocomplete="off" dark style={{
+			<Input id="searchBar" label="Zoeken voor gebruikers..." autocomplete="off" dark autofocus style={{
 				backgroundColor: "var(--background)",
 				color: "var(--text)",
 				padding: 14,
diff --git a/pages/user.tsx b/pages/user.tsx
index fe27f6d..618ae9e 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, Children, useState, useEffect } from 'react';
 import Icon from '@mdi/react';
-import { useRouter } from 'next/router';
 import axios from 'axios';
+import useSWR from 'swr';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
@@ -15,6 +15,8 @@ import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined'
 import ArrowDownwardOutlinedIcon from '@material-ui/icons/ArrowDownwardOutlined';
 import ArrowUpwardOutlinedIcon from '@material-ui/icons/ArrowUpwardOutlined';
 import PeopleOutlineOutlinedIcon from '@material-ui/icons/PeopleOutlineOutlined';
+import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
+import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined';
 import {
 	mdiAccountCancelOutline,
 	mdiEqual,
@@ -68,9 +70,10 @@ function InfoSection(props: { children: ReactNode }) {
 export default function AccountPage() {
 	var [gotData, setGotData] = useState(false);
 	var [user, setUser] = useState<userInfo>();
+	var [ownPage, setOwnPage] = useState(false);
 
 	typeof window !== "undefined" && console.log(new URLSearchParams(window.location.search).get("id"))
-	useEffect(() => {
+	useEffect(() => {(async() => {
 		if (gotData) return;
 		if (typeof window === "undefined") return;
 
@@ -78,20 +81,33 @@ export default function AccountPage() {
 		var loggedIn = document.cookie.includes("token");
 
 		if (id || loggedIn) {
-			axios.request<userInfo>({
-				method: id ? "post" : "get",
+			var self_id = "";
+			if (loggedIn) {
+				var selfReq = await axios.request<userInfo>({
+					method: "get",
+					url: `/api/user/info`,
+					headers: {"content-type": "application/json"}
+				});
+
+				self_id = selfReq?.data.id;
+			}
+
+			if (id == self_id || !id) setOwnPage(true);
+
+			var userReq = await axios.request<userInfo>({
+				method: "post",
 				url: `/api/user/info`,
 				headers: {"content-type": "application/json"},
-				data: id ? { id } : undefined
-			})
-			.then(request => setUser(request.data))
-			.catch(() => {});
+				data: { "id": id || self_id }
+			});
+
+			setUser(userReq.data);
 		} else {
 			window.history.go(-1);
 		}
 
 		setGotData(true);
-	})
+	})()})
 
 	return <div>
 		<NavBar/>
@@ -114,13 +130,33 @@ export default function AccountPage() {
 					height: "40px",
 					bottom: 24, left: 24 + 12 + 128, right: 24
 				}}>
-					<IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek"/>
-					<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/>
+					{
+						ownPage ?
+						<div>
+							<IconLabelButton icon={<SettingsOutlinedIcon/>} text="Instellingen"/>
+							<IconLabelButton icon={<EditOutlinedIcon/>} text="Status bewerken"/>
+						</div> :
+						<div>
+							<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/>
+							<IconLabelButton icon={<PersonAddOutlinedIcon/>} text="Vriendschapsverzoek"/>
+						</div>
+					}
 				</div>
 			</Vierkant>
 			<InfoSection>
 				<InfoModule icon={<Icon size={1} path={mdiCheckboxBlankCircle} color="var(--disk-b-text)"/>} label="Online"/>
-				<InfoModule icon={<AssignmentIndOutlinedIcon/>} label="Lid sinds 14 december 2020"/>
+				<InfoModule icon={<AssignmentIndOutlinedIcon/>} 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;
+				})() }/>
 				<InfoModule icon={<PeopleOutlineOutlinedIcon/>} label="2 vrienden"/>
 				<InfoModule icon={<Icon size={1} path={mdiEarth}/>} label="Nederland"/>
 			</InfoSection>
-- 
cgit v1.2.3