can edit status now :tada:

2 files changed, 27 insertions, 3 deletions

diff --git a/pages/search.tsx b/pages/search.tsx
index e2825e8..92de828 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -41,7 +41,7 @@ function SearchResult(props: { user: userInfo }) {
 				left: 48 + 12
 			}}>
 				<b>{props.user.username}</b>
-				<p>{props.user.status || "Hey daar!, ik ben nieuw op deze website en heb nog geen status."}</p>
+				<p>{props.user.status}</p>
 			</div>
 		</div>
 	</Vierkant>;
diff --git a/pages/user.tsx b/pages/user.tsx
index f190efd..1b6c2e3 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -16,6 +16,7 @@ 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 DoneOutlinedIcon from '@material-ui/icons/DoneOutlined';
 import {
 	mdiAccountCancelOutline,
 	mdiEqual,
@@ -72,6 +73,8 @@ export default function AccountPage() {
 	var [ownPage, setOwnPage] = useState(false);
 	var [gameInfo, setGameInfo] = useState<userGames>();
 
+	var [editingStatus, setEditingStatus] = useState(false);
+
 	useEffect(() => {(async() => {
 		if (gotData) return;
 		if (typeof window === "undefined") return;
@@ -130,7 +133,10 @@ export default function AccountPage() {
 					width: "calc(100% - 128px - 12px)"
 				}}>
 					<h2 style={{ fontSize: 32 }}>{user?.username}</h2>
-					<p style={{ marginTop: 6 }}>{user?.status}</p>
+					<p id="status" contentEditable={editingStatus ? "true" : "false"} style={{
+						marginTop: 6,
+						transitionDuration: ".3s"
+					}}>{user?.status}</p>
 				</div>
 				<div style={{
 					position: "absolute",
@@ -142,7 +148,25 @@ export default function AccountPage() {
 						ownPage ?
 						<div>
 							<IconLabelButton icon={<SettingsOutlinedIcon/>} href="/settings" text="Instellingen"/>
-							<IconLabelButton icon={<EditOutlinedIcon/>} text="Status bewerken"/>
+							{
+								!editingStatus ?
+								<IconLabelButton
+								icon={<EditOutlinedIcon/>}
+								text="Status bewerken"
+								onclick={() => setEditingStatus(true)}/> :
+								<IconLabelButton
+								icon={<DoneOutlinedIcon/>}
+								text="Status opslaan"
+								onclick={() => {
+									setEditingStatus(false)
+									axios.request({
+										method: "post",
+										url: `/api/user/updateStatus`,
+										headers: {"content-type": "application/json"},
+										data: { "status": document.getElementById("status").innerText }
+									});
+								}}/>
+							}
 						</div> :
 						<div>
 							<IconLabelButton icon={<Icon size={1} path={mdiAccountCancelOutline}/>} text="Blokkeren"/>