diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/navbar.tsx | 115 | ||||
| -rw-r--r-- | components/notificationsArea.tsx | 135 |
2 files changed, 138 insertions, 112 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index ee00f0a..3eabe2d 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,10 +1,10 @@ -import { CSSProperties, useEffect, useState, ReactNode } from "react"; +import { CSSProperties, useEffect, useState } from "react"; import axios from "axios"; import { LogoDark } from "../components/logo"; import { AccountAvatar } from "./account"; -import { userInfo, gameInfo } from "../api/api"; -import { Bubble, Vierkant, IconLabelButton } from './ui'; +import { userInfo } from "../api/api"; +import { NotificationsArea } from "./notificationsArea"; import Home from '@material-ui/icons/Home'; import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; @@ -13,115 +13,6 @@ import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; import PersonIcon from '@material-ui/icons/Person'; import NotificationsIcon from '@material-ui/icons/Notifications'; -import DoneIcon from '@material-ui/icons/Done'; -import CloseIcon from '@material-ui/icons/Close'; - -function NotificationsArea(props: { - visible?: boolean; - friendRequests?: Array<userInfo>; -}) { - return props.visible && <Bubble style={{ - left: 48 + 12, - top: 92, - transform: "translateY(-100%)", - textAlign: "left", - width: 400, - height: 450 - }} tuitjeStyle={{ - left: 12, - bottom: 86, - transform: "translate(-100%, 100%) rotate(90deg)" - }}> - <h2 style={{ marginBottom: 24 }}>Meldingen</h2> - <div style={{ - overflowY: "scroll", - whiteSpace: "normal", - height: 450 - 24 * 4, - borderRadius: 6 - }}> - { /* here should be the game invites */ } - { props.friendRequests?.map(user => <FriendRequest user={user}/>) } - </div> - </Bubble> -} - -var FriendRequestButtonStyle: CSSProperties = { - borderRadius: 6, - display: "inline-block", - marginLeft: 0, - textAlign: "center" -}; - -function Acceptable(props: { - children?: ReactNode; - onAccept?: () => void; - onDeny?: () => void; -}) { - return <Vierkant style={{ - borderRadius: 8, - background: "var(--background-alt)", - margin: 0, - padding: 12, - width: "100%", - marginBottom: 12 - }}> - <div style={{ position: "relative" }}> - {props.children} - <div style={{ - display: "grid", - gridTemplateColumns: "1fr, 1fr", - gridGap: 12, - marginTop: 12, - gridAutoFlow: "column", - }}> - <IconLabelButton - onclick={props.onAccept} - style={FriendRequestButtonStyle} - icon={<DoneIcon/>} - text="Accepteren"/> - <IconLabelButton - onclick={props.onDeny} - style={FriendRequestButtonStyle} - icon={<CloseIcon/>} - text="Verwijderen"/> - </div> - </div> - </Vierkant> -} - -function FriendRequest(props: { - user: userInfo; -}) { - return <Acceptable> - <a href={"/user?id=" + props.user.id}> - <AccountAvatar size={48} dummy/> - <div style={{ - display: "inline-block", - verticalAlign: "top", - marginLeft: 6 - }}> - <i style={{ display: "block" }}>Vriendschapsverzoek</i> - <b>{props.user.username}</b> - </div> - </a> - </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> -} var NavBarItemStyle: CSSProperties = { margin: 12, diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx new file mode 100644 index 0000000..ab29f9c --- /dev/null +++ b/components/notificationsArea.tsx @@ -0,0 +1,135 @@ +import { CSSProperties, ReactNode, useState } from 'react'; +import axios from 'axios'; + +import { userInfo } from "../api/api"; +import { AccountAvatar } from "./account"; +import { Bubble, Vierkant, IconLabelButton } from './ui'; + +import DoneIcon from '@material-ui/icons/Done'; +import CloseIcon from '@material-ui/icons/Close'; + +export function NotificationsArea(props: { + visible?: boolean; + friendRequests?: Array<userInfo>; +}) { + return props.visible && <Bubble style={{ + left: 48 + 12, + top: 92, + transform: "translateY(-100%)", + textAlign: "left", + width: 400, + height: 450 + }} tuitjeStyle={{ + left: 12, + bottom: 86, + transform: "translate(-100%, 100%) rotate(90deg)" + }}> + <h2 style={{ marginBottom: 24 }}>Meldingen</h2> + <div style={{ + overflowY: "scroll", + whiteSpace: "normal", + height: 450 - 24 * 4, + borderRadius: 6 + }}> + { /* here should be the game invites */ } + { props.friendRequests?.map(user => <FriendRequest user={user}/>) } + </div> + </Bubble> +} + +var FriendRequestButtonStyle: CSSProperties = { + borderRadius: 6, + display: "inline-block", + marginLeft: 0, + textAlign: "center" +}; + +function Acceptable(props: { + children?: ReactNode; + onAccept?: () => void; + onDeny?: () => void; +}) { + return <Vierkant style={{ + borderRadius: 8, + background: "var(--background-alt)", + margin: 0, + padding: 12, + width: "100%", + marginBottom: 12 + }}> + <div style={{ position: "relative" }}> + {props.children} + <div style={{ + display: "grid", + gridTemplateColumns: "1fr, 1fr", + gridGap: 12, + marginTop: 12, + gridAutoFlow: "column", + }}> + <IconLabelButton + onclick={props.onAccept} + style={FriendRequestButtonStyle} + icon={<DoneIcon/>} + text="Accepteren"/> + <IconLabelButton + onclick={props.onDeny} + style={FriendRequestButtonStyle} + icon={<CloseIcon/>} + text="Verwijderen"/> + </div> + </div> + </Vierkant> +} + +function FriendRequest(props: { + user: userInfo; +}) { + var [ gone, setGone ] = useState(false); + + return !gone && <Acceptable onAccept={() => { + axios.request({ + method: "post", + url: `/api/social/accept`, + headers: {"content-type": "application/json"}, + data: { "id": props.user?.id } + }) + .then(() => setGone(true)); + }} onDeny={() => { + axios.request({ + method: "post", + url: `/api/social/remove`, + headers: {"content-type": "application/json"}, + data: { "id": props.user?.id } + }) + .then(() => setGone(true)); + }}> + <a href={"/user?id=" + props.user.id}> + <AccountAvatar size={48} dummy/> + <div style={{ + display: "inline-block", + verticalAlign: "top", + marginLeft: 6 + }}> + <i style={{ display: "block" }}>Vriendschapsverzoek</i> + <b>{props.user.username}</b> + </div> + </a> + </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> */ +/* } */ + |