From eed11fd96cf1458a7a91659cdf5efafbadda1b2b Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 20 Mar 2021 18:44:58 +0100
Subject: more event api

---
 components/navbar.tsx            | 26 +++++++++-----
 components/notificationsArea.tsx | 73 +++++++++++++++++++++++++++++-----------
 2 files changed, 71 insertions(+), 28 deletions(-)

(limited to 'components')

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 252635d..f413008 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,10 +1,11 @@
-import { CSSProperties, useEffect, useState } from "react";
+import { CSSProperties, useEffect, useState, useContext } from "react";
 import axios from "axios";
 
 import { LogoDark } from "../components/logo";
 import { AccountAvatar } from "./account";
 import { userInfo } from "../api/api";
 import { NotificationsArea } from "./notificationsArea";
+import { SocketContext } from "./socketContext";
 
 import Home from '@material-ui/icons/Home';
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
@@ -29,6 +30,18 @@ export function NavBar() {
 	var [ notificationsAreaVisible, setNotificationsAreaVisible ] = useState(false);
 	var [ gotNotifications, setGotNotifications ] = useState(false);
 
+	var { io } = useContext(SocketContext);
+
+	async function getNotifications() {
+		var friendRequestsReq = await axios.request<{ requests: Array<userInfo> }>({
+			method: "get",
+			url: `/api/social/list/requests`
+		});
+		setFriendRequests(friendRequestsReq.data.requests);
+
+		setGotNotifications(friendRequestsReq.data.requests.length > 0);
+	}
+
 	useEffect(() => {(async () => {
 		if (gotData) return;
 		if (typeof window === "undefined") return;
@@ -37,12 +50,8 @@ export function NavBar() {
 		setLoggedIn(loggedIn);
 
 		if (loggedIn) {
-			var friendRequestsReq = await axios.request<{ requests: Array<userInfo> }>({
-				method: "get",
-				url: `/api/social/list/requests`
-			});
-			setFriendRequests(friendRequestsReq.data.requests);
-			setGotNotifications(gotNotifications || friendRequestsReq.data.requests.length > 0);
+			await getNotifications();
+			io.on("incomingFriendRequest", getNotifications);
 		}
 
 		setGotData(true);
@@ -94,7 +103,8 @@ export function NavBar() {
 				</div>
 				<NotificationsArea
 					visible={notificationsAreaVisible}
-					friendRequests={friendRequests}/>
+					friendRequests={friendRequests}
+					rerender={getNotifications}/>
 			</a> }
 			<a href={loggedIn ? "/user" : "/login"} style={NavBarItemStyle}>
 				{
diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx
index 1e92493..7d2fa49 100644
--- a/components/notificationsArea.tsx
+++ b/components/notificationsArea.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode, useState } from 'react';
 import axios from 'axios';
 
-import { userInfo } from "../api/api";
+import { userInfo, gameInfo } from "../api/api";
 import { AccountAvatar } from "./account";
 import { Bubble, Vierkant, IconLabelButton } from './ui';
 
@@ -11,7 +11,14 @@ import CloseIcon from '@material-ui/icons/Close';
 export function NotificationsArea(props: {
 	visible?: boolean;
 	friendRequests?: Array<userInfo>;
+	gameInvites?: Array<gameInfo>;
+	rerender: () => void;
 }) {
+	var messages = (
+		(props.friendRequests ? props.friendRequests.length : 0) +
+		(props.gameInvites ? props.gameInvites.length : 0)
+	)
+
 	return props.visible && <Bubble style={{
 		left: 48 + 12,
 		top: 92,
@@ -31,8 +38,27 @@ export function NotificationsArea(props: {
 			height: 450 - 24 * 4,
 			borderRadius: 6
 		}}>
-			{ /* here should be the game invites */ }
-			{ props.friendRequests?.map(user => <FriendRequest user={user}/>) }
+			{ props.gameInvites?.map(game => <GameInvite hide={props.rerender} game={game}/>) }
+			{ props.friendRequests?.map(user => <FriendRequest hide={props.rerender} user={user}/>) }
+			{
+				messages == 0 &&
+				<div style={{
+					position: "absolute",
+					left: 0,
+					right: 0,
+					bottom: 0,
+					top: 0
+				}}>
+					<h1 style={{
+						position: "absolute",
+						top: "50%",
+						left: "50%",
+						whiteSpace: "nowrap",
+						transform: "translate(-50%, -50%)",
+						opacity: .7
+					}}>Geen meldingen</h1>
+				</div>
+			}
 		</div>
 	</Bubble>
 }
@@ -83,9 +109,15 @@ function Acceptable(props: {
 
 function FriendRequest(props: {
 	user: userInfo;
+	hide: () => void;
 }) {
 	var [ gone, setGone ] = useState(false);
 
+	var hide = () => {
+		setGone(true);
+		props.hide();
+	}
+
 	return !gone && <Acceptable onAccept={() => {
 		axios.request({
 			method: "post",
@@ -93,7 +125,7 @@ function FriendRequest(props: {
 			headers: {"content-type": "application/json"},
 			data: { "id": props.user?.id }
 		})
-		.then(() => setGone(true));
+		.then(hide);
 	}} onDeny={() => {
 		axios.request({
 			method: "post",
@@ -101,7 +133,7 @@ function FriendRequest(props: {
 			headers: {"content-type": "application/json"},
 			data: { "id": props.user?.id }
 		})
-		.then(() => setGone(true));
+		.then(hide);
 	}}>
 		<a href={"/user?id=" + props.user.id}>
 			<AccountAvatar size={48} id={props.user.id}/>
@@ -117,19 +149,20 @@ function FriendRequest(props: {
 	</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> */
-/* } */
+function GameInvite(props: {
+	game: gameInfo;
+	hide: () => void;
+}) {
+	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