diff options
| -rw-r--r-- | api/readme.md | 1 | ||||
| -rw-r--r-- | api/social/destroy_relation.py | 7 | ||||
| -rw-r--r-- | api/social/friend_accept.py | 4 | ||||
| -rw-r--r-- | components/navbar.tsx | 1 | ||||
| -rw-r--r-- | pages/user.tsx | 49 | ||||
| -rw-r--r-- | styles/global.css | 2 |
6 files changed, 49 insertions, 15 deletions
diff --git a/api/readme.md b/api/readme.md index 48e9b14..26ef02b 100644 --- a/api/readme.md +++ b/api/readme.md @@ -50,6 +50,7 @@ resign|send to resign, is then forwarded to all subscribed clients|`none`|`s <-> newMove|send a new move|`{ move: int, game_id: string }`|`s <- c`|game registerGameListener|listen to events for a game|`{ id: string }`|`s <- c`|game incomingFriendRequest|get notified of friend request|`none`|`s -> c`|global +changedRelation|get notified of a different relation to someone|`{ id: string }`|`s -> c`|global ## How to test API endpoints ```sh diff --git a/api/social/destroy_relation.py b/api/social/destroy_relation.py index 09b42f0..a08175f 100644 --- a/api/social/destroy_relation.py +++ b/api/social/destroy_relation.py @@ -3,6 +3,7 @@ from db import cursor from auth.login_token import token_login from social.create_relation import remove_relation from user.info import get_relation_to +from socket_io import io import time remove = Blueprint('remove', __name__) @@ -22,10 +23,14 @@ def index(): return "", 403 relation = get_relation_to(user_1_id, user_2_id) - if relation == "none": return 403 + if relation == "none": return "", 403 remove_relation(user_1_id, user_2_id) remove_relation(user_2_id, user_1_id) + + io.emit("changedRelation", { "id": user_2_id }, room="user-"+user_1_id) + io.emit("changedRelation", { "id": user_1_id }, room="user-"+user_2_id) + return "", 200 unblock = Blueprint('unblock', __name__) diff --git a/api/social/friend_accept.py b/api/social/friend_accept.py index bc850d2..8340274 100644 --- a/api/social/friend_accept.py +++ b/api/social/friend_accept.py @@ -1,6 +1,7 @@ from flask import Blueprint, request from db import cursor, connection from auth.login_token import token_login +from socket_io import io import time accept = Blueprint('accept', __name__) @@ -23,6 +24,9 @@ def route(): [user_1_id, user_2_id]) connection.commit() + io.emit("changedRelation", { "id": user_2_id }, room="user-"+user_1_id) + io.emit("changedRelation", { "id": user_1_id }, room="user-"+user_2_id) + return "", 200 dynamic_route = ["/social", accept] diff --git a/components/navbar.tsx b/components/navbar.tsx index f413008..d6775ee 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -52,6 +52,7 @@ export function NavBar() { if (loggedIn) { await getNotifications(); io.on("incomingFriendRequest", getNotifications); + io.on("changedRelation", getNotifications); } setGotData(true); diff --git a/pages/user.tsx b/pages/user.tsx index a79e353..dbad76e 100644 --- a/pages/user.tsx +++ b/pages/user.tsx @@ -9,6 +9,7 @@ import { AccountAvatar } from '../components/account'; import { userInfo, userGames } from '../api/api'; import RecentGames from '../components/recentGames'; import { ToastContext } from '../components/toast'; +import { SocketContext } from '../components/socketContext'; import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined'; import AssignmentIndOutlinedIcon from '@material-ui/icons/AssignmentIndOutlined'; @@ -85,27 +86,49 @@ export default function AccountPage() { var [ownPage, setOwnPage] = useState(loggedIn && !pageID); var { toast } = useContext(ToastContext); + var { io } = useContext(SocketContext); - useEffect(() => {(async() => { + async function getUserData(): Promise<userInfo> { var userReq = await axios.request<userInfo>({ method: "post", url: `/api/user/info`, - headers: {"content-type": "application/json"} + headers: {"content-type": "application/json"}, + data: reqData }); - setOwnPage(ownPage || userReq.data.id == pageID); + setUser(userReq.data); + return userReq.data + } + + async function getRelationTo(user: userInfo) { + var user = await getUserData(); + setRelation(user.relation || "none"); + } + + function setIOListeners(user: userInfo) { + io.on("changedRelation", (data: { id: string }) => { + if (data.id != user.id) return; + getRelationTo(user); + }); + io.on("incomingFriendRequest", getRelationTo); + } + + useEffect(() => {(async() => { + var user = await getUserData(); + + getRelationTo(user); + setIOListeners(user); })()}, []); useEffect(() => {(async() => { var userReq = await axios.request<userInfo>({ method: "post", url: `/api/user/info`, - headers: {"content-type": "application/json"}, - data: reqData + headers: {"content-type": "application/json"} }); - setUser(userReq.data); - setRelation(userReq.data.relation || "none"); + setOwnPage(ownPage || userReq.data.id == pageID); })()}, []); + // Get recent games useEffect(() => {(async() => { var userGamesReq = await axios.request<userGames>({ method: "post", @@ -180,13 +203,13 @@ export default function AccountPage() { "endpoint": "/api/social/unblock", "action": `${user.username} gedeblokkeerd`, "relation": "none", - "icon": <Icon size={32 / 24} path={mdiAccountCancelOutline}/>, + "icon": <Icon size="32px" path={mdiAccountCancelOutline}/>, } }[relation] || { "endpoint": "/api/social/block", "action": `${user.username} geblokkeerd`, "relation": "blocked", - "icon": <Icon size={32 / 24} path={mdiAccountCancelOutline}/>, + "icon": <Icon size="32px" path={mdiAccountCancelOutline}/>, } axios.request({ @@ -222,25 +245,25 @@ export default function AccountPage() { "endpoint": "/api/social/remove", "action": `${user.username} succesvol verwijderd als vriend`, "relation": "none", - "icon": <Icon size={32 / 24} path={mdiAccountMinusOutline}/>, + "icon": <Icon size="32px" path={mdiAccountMinusOutline}/>, }, "outgoing": { "endpoint": "/api/social/remove", "action": `Vriendschapsverzoek naar ${user.username} geannuleerd`, "relation": "none", - "icon": <Icon size={32 / 24} path={mdiAccountMinusOutline}/>, + "icon": <Icon size="32px" path={mdiAccountMinusOutline}/>, }, "incoming": { "endpoint": "/api/social/accept", "action": `Vriendschapsverzoek van ${user.username} geaccepteerd`, "relation": "friends", - "icon": <PersonAddOutlinedIcon/>, + "icon": <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>, }, }[relation] || { "endpoint": "/api/social/request", "action": `Vriendschapsverzoek gestuurd naar ${user.username}`, "relation": "outgoing", - "icon": <PersonAddOutlinedIcon/>, + "icon": <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>, } axios.request({ diff --git a/styles/global.css b/styles/global.css index 91d2056..76c49fa 100644 --- a/styles/global.css +++ b/styles/global.css @@ -37,7 +37,7 @@ body { padding-left: 48px; } html { font-family: "Inter"; } /* background color */ -html { background-color: var(--page-background); } +html, body { background-color: var(--page-background); } /* link fix */ a { |