diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 22378bb..a9283a7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -76,7 +76,7 @@ function App() { } /> diff --git a/frontend/src/components/Groups.tsx b/frontend/src/components/Groups.tsx index ef483c6..5d68c4d 100644 --- a/frontend/src/components/Groups.tsx +++ b/frontend/src/components/Groups.tsx @@ -9,16 +9,9 @@ import { checkedInState, checkedInType } from "../utils/Context"; export function Groups() { const { classes } = useStyles(); const navigate = useNavigate(); - const { - checkedIn, - setCheckedIn, - groupSlug, - setGroupSlug, - groupName, - setGroupName, - } = useContext(checkedInState) as checkedInType; + const { setCheckedIn } = useContext(checkedInState) as checkedInType; - let [userData, setUserData] = useState( + const [userData, setUserData] = useState( undefined ); const fetchData = async () => { @@ -32,11 +25,9 @@ export function Groups() { }); setUserData(userData); }; - const checkinNavigate = (groupSlug: string, groupName: string) => { + const checkinNavigate = (groupSlug: string) => { setCheckedIn(false); - setGroupSlug(groupSlug); - setGroupName(groupName); - navigate("/lobby"); + navigate("/lobby/" + groupSlug); }; useEffect(() => { @@ -91,8 +82,7 @@ export function Groups() { className: classes.box, } : { - onClick: () => - checkinNavigate(group.groupSlug, group.groupName), + onClick: () => checkinNavigate(group.groupSlug), className: classes.activeBox, })} > diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index dd65f77..c4610af 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -2,15 +2,7 @@ import axios from "axios"; import { useNavigate } from "react-router-dom"; import logo from "../assets/logoHeader.svg"; import logoSmall from "../assets/ntnuiLogo.svg"; -import { - Header, - Container, - Group, - Text, - Space, - Image, - Modal, -} from "@mantine/core"; +import { Header, Container, Group, Text, Image, Modal } from "@mantine/core"; import { useMediaQuery, useDisclosure } from "@mantine/hooks"; import { useStyles } from "../styles/headerStyles"; import { QrCode } from "./QrCode"; @@ -22,9 +14,7 @@ export function HeaderAction() { const matches = useMediaQuery("(min-width: 400px)"); const { classes } = useStyles(); const navigate = useNavigate(); - const { checkedIn, setCheckedIn, groupSlug, setGroupSlug } = useContext( - checkedInState - ) as checkedInType; + const { checkedIn } = useContext(checkedInState) as checkedInType; const logOut = async () => { await axios @@ -51,10 +41,10 @@ export function HeaderAction() { fullScreen={isMobile} zIndex={2} > - {checkedIn && groupSlug ? ( + {checkedIn ? ( ) : ( - Check out successfull. You can now leave the room + Check out successful. You can now leave the room )} @@ -84,7 +74,7 @@ export function HeaderAction() { > )} - {checkedIn && groupSlug ? ( + {checkedIn ? ( (); let [time, setTime] = useState(Date.now()); const getCredentials = async () => { @@ -17,10 +15,6 @@ export function QrCode() { // Update timestamp every 10 seconds useEffect(() => { - if (!groupSlug) { - navigate("/start"); - } - const interval = setInterval(() => setTime(Date.now()), 10000); return () => { clearInterval(interval); diff --git a/frontend/src/pages/AssemblyPage.tsx b/frontend/src/pages/AssemblyPage.tsx index f77ead9..28f7041 100644 --- a/frontend/src/pages/AssemblyPage.tsx +++ b/frontend/src/pages/AssemblyPage.tsx @@ -1,5 +1,5 @@ import { useContext, useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { QrCode } from "../components/QrCode"; import useWebSocket from "react-use-websocket"; import { WaitingRoom } from "../components/WaitingRoom"; @@ -10,20 +10,24 @@ import { Box, Image, Text } from "@mantine/core"; import Arrow from "../assets/Arrow.svg"; import { getCurrentVotationByGroup } from "../services/votation"; import { LimitedVoteType } from "../types/votes"; +import { UserDataResponseType } from "../types/user"; +import { getUserData } from "../services/organizer"; export function AssemblyLobby() { + let navigate = useNavigate(); + const { groupSlug } = useParams() as { groupSlug: string }; + const [kickedOut, setKickedOut] = useState(false); const [activeVotation, setActiveVotation] = useState(false); const [currentVotation, setCurrentVotation] = useState< LimitedVoteType | undefined >(undefined); const [voted, setVoted] = useState(false); - const { lastMessage } = useWebSocket( - import.meta.env.VITE_SOCKET_URL + "/lobby" - ); - const { checkedIn, setCheckedIn, groupSlug, setGroupSlug, groupName } = - useContext(checkedInState) as checkedInType; - let navigate = useNavigate(); + const { lastMessage } = useWebSocket(import.meta.env.VITE_SOCKET_URL); + const { checkedIn, setCheckedIn } = useContext( + checkedInState + ) as checkedInType; + const [groupName, setGroupName] = useState(""); useEffect(() => { // Redirect to waiting room if already checked in @@ -39,9 +43,18 @@ export function AssemblyLobby() { } } else { setCheckedIn(false); - setGroupSlug(""); } }; + const getGroupName = async () => { + const userData = await getUserData(); + + userData.groups.forEach((group) => { + if (group.groupSlug == groupSlug) { + setGroupName(group.groupName); + } + }); + }; + getGroupName(); isCheckedIn(); }, []); @@ -104,7 +117,7 @@ export function AssemblyLobby() { )} - {groupName} assembly + {groupName && <>{groupName} assembly} {kickedOut ? ( @@ -125,7 +138,7 @@ export function AssemblyLobby() { ) : ( <> - Check-in for {groupName.toUpperCase()} + Check-in for {groupName} )} diff --git a/frontend/src/utils/Context.ts b/frontend/src/utils/Context.ts index 70d1d4e..9315bfa 100644 --- a/frontend/src/utils/Context.ts +++ b/frontend/src/utils/Context.ts @@ -2,10 +2,6 @@ import React from "react"; export interface checkedInType { checkedIn: boolean; - groupSlug: string; - groupName: string; setCheckedIn: (state: boolean) => void; - setGroupSlug: (sate: string) => void; - setGroupName: (state: string) => void; } export const checkedInState = React.createContext(null);