From 056b77e82c72136170084ef0addba013eae22c9d Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 13 Mar 2021 10:46:32 +0100
Subject: friend request accept thingy cool :tada:

---
 components/navbar.tsx            | 115 +--------------------------------
 components/notificationsArea.tsx | 135 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+), 112 deletions(-)
 create mode 100644 components/notificationsArea.tsx

(limited to 'components')

diff --git a/components/navbar.tsx b/components/navbar.tsx
index ee00f0a..3eabe2d 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,10 +1,10 @@
-import { CSSProperties, useEffect, useState, ReactNode } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 import axios from "axios";
 
 import { LogoDark } from "../components/logo";
 import { AccountAvatar } from "./account";
-import { userInfo, gameInfo } from "../api/api";
-import { Bubble, Vierkant, IconLabelButton } from './ui';
+import { userInfo } from "../api/api";
+import { NotificationsArea } from "./notificationsArea";
 
 import Home from '@material-ui/icons/Home';
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
@@ -13,115 +13,6 @@ import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import PersonIcon from '@material-ui/icons/Person';
 import NotificationsIcon from '@material-ui/icons/Notifications';
-import DoneIcon from '@material-ui/icons/Done';
-import CloseIcon from '@material-ui/icons/Close';
-
-function NotificationsArea(props: {
-	visible?: boolean;
-	friendRequests?: Array<userInfo>;
-}) {
-	return props.visible && <Bubble style={{
-		left: 48 + 12,
-		top: 92,
-		transform: "translateY(-100%)",
-		textAlign: "left",
-		width: 400,
-		height: 450
-	}} tuitjeStyle={{
-		left: 12,
-		bottom: 86,
-		transform: "translate(-100%, 100%) rotate(90deg)"
-	}}>
-		<h2 style={{ marginBottom: 24 }}>Meldingen</h2>
-		<div style={{
-			overflowY: "scroll",
-			whiteSpace: "normal",
-			height: 450 - 24 * 4,
-			borderRadius: 6
-		}}>
-			{ /* here should be the game invites */ }
-			{ props.friendRequests?.map(user => <FriendRequest user={user}/>) }
-		</div>
-	</Bubble>
-}
-
-var FriendRequestButtonStyle: CSSProperties = {
-	borderRadius: 6,
-	display: "inline-block",
-	marginLeft: 0,
-	textAlign: "center"
-};
-
-function Acceptable(props: {
-	children?: ReactNode;
-	onAccept?: () => void;
-	onDeny?: () => void;
-}) {
-	return <Vierkant style={{
-		borderRadius: 8,
-		background: "var(--background-alt)",
-		margin: 0,
-		padding: 12,
-		width: "100%",
-		marginBottom: 12
-	}}>
-		<div style={{ position: "relative" }}>
-			{props.children}
-			<div style={{
-				display: "grid",
-				gridTemplateColumns: "1fr, 1fr",
-				gridGap: 12,
-				marginTop: 12,
-				gridAutoFlow: "column",
-			}}>
-				<IconLabelButton
-					onclick={props.onAccept}
-					style={FriendRequestButtonStyle}
-					icon={<DoneIcon/>}
-					text="Accepteren"/>
-				<IconLabelButton
-					onclick={props.onDeny}
-					style={FriendRequestButtonStyle}
-					icon={<CloseIcon/>}
-					text="Verwijderen"/>
-			</div>
-		</div>
-	</Vierkant>
-}
-
-function FriendRequest(props: {
-	user: userInfo;
-}) {
-	return <Acceptable>
-		<a href={"/user?id=" + props.user.id}>
-			<AccountAvatar size={48} dummy/>
-			<div style={{
-				display: "inline-block",
-				verticalAlign: "top",
-				marginLeft: 6
-			}}>
-				<i style={{ display: "block" }}>Vriendschapsverzoek</i>
-				<b>{props.user.username}</b>
-			</div>
-		</a>
-	</Acceptable>
-}
-
-function GameInvite(props: {
-	game: gameInfo;
-}) {
-	return <Acceptable>
-		<a>
-			<div style={{
-				display: "inline-block",
-				verticalAlign: "top",
-			}}>
-				<i style={{ display: "block" }}>Partijuitnodiging</i>
-				<p><b><a href={"/user?id=" + props.game.opponent?.id}>{props.game.opponent?.username}</a></b> wil een potje 4 op een rij spelen!</p>
-			</div>
-		</a>
-	</Acceptable>
-}
 
 var NavBarItemStyle: CSSProperties = {
 	margin: 12,
diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx
new file mode 100644
index 0000000..ab29f9c
--- /dev/null
+++ b/components/notificationsArea.tsx
@@ -0,0 +1,135 @@
+import { CSSProperties, ReactNode, useState } from 'react';
+import axios from 'axios';
+
+import { userInfo } from "../api/api";
+import { AccountAvatar } from "./account";
+import { Bubble, Vierkant, IconLabelButton } from './ui';
+
+import DoneIcon from '@material-ui/icons/Done';
+import CloseIcon from '@material-ui/icons/Close';
+
+export function NotificationsArea(props: {
+	visible?: boolean;
+	friendRequests?: Array<userInfo>;
+}) {
+	return props.visible && <Bubble style={{
+		left: 48 + 12,
+		top: 92,
+		transform: "translateY(-100%)",
+		textAlign: "left",
+		width: 400,
+		height: 450
+	}} tuitjeStyle={{
+		left: 12,
+		bottom: 86,
+		transform: "translate(-100%, 100%) rotate(90deg)"
+	}}>
+		<h2 style={{ marginBottom: 24 }}>Meldingen</h2>
+		<div style={{
+			overflowY: "scroll",
+			whiteSpace: "normal",
+			height: 450 - 24 * 4,
+			borderRadius: 6
+		}}>
+			{ /* here should be the game invites */ }
+			{ props.friendRequests?.map(user => <FriendRequest user={user}/>) }
+		</div>
+	</Bubble>
+}
+
+var FriendRequestButtonStyle: CSSProperties = {
+	borderRadius: 6,
+	display: "inline-block",
+	marginLeft: 0,
+	textAlign: "center"
+};
+
+function Acceptable(props: {
+	children?: ReactNode;
+	onAccept?: () => void;
+	onDeny?: () => void;
+}) {
+	return <Vierkant style={{
+		borderRadius: 8,
+		background: "var(--background-alt)",
+		margin: 0,
+		padding: 12,
+		width: "100%",
+		marginBottom: 12
+	}}>
+		<div style={{ position: "relative" }}>
+			{props.children}
+			<div style={{
+				display: "grid",
+				gridTemplateColumns: "1fr, 1fr",
+				gridGap: 12,
+				marginTop: 12,
+				gridAutoFlow: "column",
+			}}>
+				<IconLabelButton
+					onclick={props.onAccept}
+					style={FriendRequestButtonStyle}
+					icon={<DoneIcon/>}
+					text="Accepteren"/>
+				<IconLabelButton
+					onclick={props.onDeny}
+					style={FriendRequestButtonStyle}
+					icon={<CloseIcon/>}
+					text="Verwijderen"/>
+			</div>
+		</div>
+	</Vierkant>
+}
+
+function FriendRequest(props: {
+	user: userInfo;
+}) {
+	var [ gone, setGone ] = useState(false);
+
+	return !gone && <Acceptable onAccept={() => {
+		axios.request({
+			method: "post",
+			url: `/api/social/accept`,
+			headers: {"content-type": "application/json"},
+			data: { "id": props.user?.id }
+		})
+		.then(() => setGone(true));
+	}} onDeny={() => {
+		axios.request({
+			method: "post",
+			url: `/api/social/remove`,
+			headers: {"content-type": "application/json"},
+			data: { "id": props.user?.id }
+		})
+		.then(() => setGone(true));
+	}}>
+		<a href={"/user?id=" + props.user.id}>
+			<AccountAvatar size={48} dummy/>
+			<div style={{
+				display: "inline-block",
+				verticalAlign: "top",
+				marginLeft: 6
+			}}>
+				<i style={{ display: "block" }}>Vriendschapsverzoek</i>
+				<b>{props.user.username}</b>
+			</div>
+		</a>
+	</Acceptable>
+}
+
+/* function GameInvite(props: { */
+/* 	game: gameInfo; */
+/* }) { */
+/* 	return <Acceptable> */
+/* 		<a> */
+/* 			<div style={{ */
+/* 				display: "inline-block", */
+/* 				verticalAlign: "top", */
+/* 			}}> */
+/* 				<i style={{ display: "block" }}>Partijuitnodiging</i> */
+/* 				<p><b><a href={"/user?id=" + props.game.opponent?.id}>{props.game.opponent?.username}</a></b> wil een potje 4 op een rij spelen!</p> */
+/* 			</div> */
+/* 		</a> */
+/* 	</Acceptable> */
+/* } */
+
-- 
cgit v1.2.3