aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--api/social/friend_accept.py1
-rw-r--r--components/navbar.tsx115
-rw-r--r--components/notificationsArea.tsx135
3 files changed, 139 insertions, 112 deletions
diff --git a/api/social/friend_accept.py b/api/social/friend_accept.py
index 8d09862..bc850d2 100644
--- a/api/social/friend_accept.py
+++ b/api/social/friend_accept.py
@@ -21,6 +21,7 @@ def route():
cursor.execute("update social set type = \"friendship\" where user_1_id = ? and user_2_id = ?",
[user_1_id, user_2_id])
+ connection.commit()
return "", 200
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> */
+/* } */
+