diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/navbar.tsx | 26 | ||||
| -rw-r--r-- | components/notificationsArea.tsx | 73 |
2 files changed, 71 insertions, 28 deletions
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> +} |