1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
import axios from 'axios';
import { ReactNode, useContext, useEffect, useState } from 'react';
import { gameInfo, userInfo } from '../api/api';
import { AccountAvatar } from './account';
import { ToastContext } from './toast';
import { Bubble, IconLabelButton, Vierkant } from './ui';
import CloseIcon from '@material-ui/icons/Close';
import DoneIcon from '@material-ui/icons/Done';
import NotificationsActiveOutlinedIcon from '@material-ui/icons/NotificationsActiveOutlined';
export function NotificationsArea(props: {
visible?: boolean;
friendRequests?: Array<userInfo>;
gameInvites?: Array<gameInfo>;
rerender: () => void;
}) {
var { toast } = useContext(ToastContext);
var [previousMessages, setPreviousMessages] = useState(0);
var messages = (
(props.friendRequests ? props.friendRequests.length : 0)
+ (props.gameInvites ? props.gameInvites.length : 0)
);
useEffect(() => {
if (messages > previousMessages) {
toast({
message: 'Je hebt nieuwe meldingen!',
type: 'confirmation',
icon: <NotificationsActiveOutlinedIcon />,
});
}
setPreviousMessages(messages);
});
return props.visible && <Bubble className='notificationsArea bg-700 pad-l'>
<h2 className='title'>Meldingen</h2>
<div className='inner round-t'>
{props.gameInvites?.map(game => <GameInvite hide={props.rerender} game={game} />)}
{props.friendRequests?.map(user => <FriendRequest hide={props.rerender} user={user} />)}
{messages == 0
&& <div className='noMsgsWrapper posabs a0'>
<h1 className='posabs abscenter subtile'>
Geen meldingen
</h1>
</div>}
</div>
</Bubble>;
}
function Acceptable(props: {
children?: ReactNode;
onAccept?: () => void;
onDeny?: () => void;
}) {
return <Vierkant className='acceptable bg-800 round-t pad-m fullwidth'>
<div className='posrel'>
{props.children}
<div className='sidebyside buttons'>
<IconLabelButton
className='accept'
onclick={props.onAccept}
icon={<DoneIcon />}
text='Accepteren'
/>
<IconLabelButton
className='deny'
onclick={props.onDeny}
icon={<CloseIcon />}
text='Verwijderen'
/>
</div>
</div>
</Vierkant>;
}
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',
url: '/api/social/accept',
headers: { 'content-type': 'application/json' },
data: { 'id': props.user?.id },
})
.then(hide);
}}
onDeny={() => {
axios.request({
method: 'post',
url: '/api/social/remove',
headers: { 'content-type': 'application/json' },
data: { 'id': props.user?.id },
})
.then(hide);
}}
>
<a href={'/user?id=' + props.user.id}>
<AccountAvatar size={48} id={props.user.id} />
<div className='userInfo dispinbl valigntop'>
<i className='dispbl'>Vriendschapsverzoek</i>
<b>{props.user.username}</b>
</div>
</a>
</Acceptable>;
}
function GameInvite(props: {
game: gameInfo;
hide: () => void;
}) {
return <Acceptable>
<a>
<div className='userInfo dispinbl valigntop'>
<i className='dispbl'>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>;
}
|