diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-03-20 18:44:58 +0100 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-03-20 18:44:58 +0100 |
commit | eed11fd96cf1458a7a91659cdf5efafbadda1b2b (patch) | |
tree | d1f6cb2b070b9296f3fa15956307ddf4689e7aa3 /components/notificationsArea.tsx | |
parent | 62a3b7fbb4ffcaa16e0b4984d5fa0e59537af146 (diff) |
more event api
Diffstat (limited to 'components/notificationsArea.tsx')
-rw-r--r-- | components/notificationsArea.tsx | 73 |
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> +} |