aboutsummaryrefslogtreecommitdiff
path: root/components/notificationsArea.tsx
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-03-20 18:44:58 +0100
committerlonkaars <l.leblansch@gmail.com>2021-03-20 18:44:58 +0100
commiteed11fd96cf1458a7a91659cdf5efafbadda1b2b (patch)
treed1f6cb2b070b9296f3fa15956307ddf4689e7aa3 /components/notificationsArea.tsx
parent62a3b7fbb4ffcaa16e0b4984d5fa0e59537af146 (diff)
more event api
Diffstat (limited to 'components/notificationsArea.tsx')
-rw-r--r--components/notificationsArea.tsx73
1 files changed, 53 insertions, 20 deletions
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>
+}