fix: user stay in lobby after refresh (#189)

* fix: dynamic route for staying in lobby after refresh

* fix: add lobby

* fix: refactor

* fix: 404 page if slug is invalid

frontend/src/App.tsx

@@ -78,7 +78,7 @@ function App() {
                 }
               />
               <Route
-                path="/lobby"
+                path="/lobby/:groupSlug"
                 element={
                   <>
                     <HeaderAction />

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<UserDataResponseType | undefined>(
+  const [userData, setUserData] = useState<UserDataResponseType | undefined>(
     undefined
   );
   const fetchData = async () => {
@@ -45,11 +38,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(() => {
@@ -104,8 +95,7 @@ export function Groups() {
                   className: classes.box,
                 }
               : {
-                  onClick: () =>
-                    checkinNavigate(group.groupSlug, group.groupName),
+                  onClick: () => checkinNavigate(group.groupSlug),
                   className: classes.activeBox,
                 })}
           >

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 ? (
           <QrCode />
         ) : (
-          <Text>Check out successfull. You can now leave the room</Text>
+          <Text>Check out successful. You can now leave the room</Text>
         )}
       </Modal>
 
@@ -84,7 +74,7 @@ export function HeaderAction() {
               ></Image>
             )}
           </Group>
-          {checkedIn && groupSlug ? (
+          {checkedIn ? (
             <Text
               className={classes.button}
               onClick={open}

frontend/src/components/QrCode.tsx

@@ -1,25 +1,19 @@
 import { Loader } from "@mantine/core";
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { QRCodeSVG } from "qrcode.react";
 import { getQrData } from "../services/qr";
 import logo from "../assets/ntnuiColor.svg";
-import { useNavigate } from "react-router-dom";
-import { checkedInState, checkedInType } from "../utils/Context";
+import { useParams } from "react-router-dom";
 
 export function QrCode() {
-  const { groupSlug } = useContext(checkedInState) as checkedInType;
-  const navigate = useNavigate();
+  const { groupSlug } = useParams() as { groupSlug: string };
   const [QRData, setQRData] = useState<string>();
   const updateQR = async () => {
     setQRData((await getQrData()).QRData);
   };
 
   // Update QR every 10 seconds
   useEffect(() => {
-    if (!groupSlug) {
-      navigate("/start");
-    }
-
     updateQR();
     const interval = setInterval(() => updateQR(), 10000);
     return () => {

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,8 +10,15 @@ import { Box, Image, Text } from "@mantine/core";
 import Arrow from "../assets/Arrow.svg";
 import { getCurrentVotationByGroup } from "../services/votation";
 import { LimitedVoteType } from "../types/votes";
+import { getUserData } from "../services/organizer";
+import { NotFound } from "./NotFound";
 
 export function AssemblyLobby() {
+  let navigate = useNavigate();
+  const { groupSlug } = useParams() as { groupSlug: string };
+  const [groupName, setGroupName] = useState<string | undefined>(undefined);
+  const [groupNotFound, setGroupNotFound] = useState<boolean>(false);
+
   const [kickedOut, setKickedOut] = useState<boolean>(false);
   const [activeVotation, setActiveVotation] = useState<boolean>(false);
   const [currentVotation, setCurrentVotation] = useState<
@@ -21,9 +28,9 @@ export function AssemblyLobby() {
   const { lastMessage } = useWebSocket(
     import.meta.env.VITE_SOCKET_URL + "/lobby"
   );
-  const { checkedIn, setCheckedIn, groupSlug, setGroupSlug, groupName } =
-    useContext(checkedInState) as checkedInType;
-  let navigate = useNavigate();
+  const { checkedIn, setCheckedIn } = useContext(
+    checkedInState
+  ) as checkedInType;
 
   useEffect(() => {
     // Redirect to waiting room if already checked in
@@ -39,9 +46,22 @@ 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);
+        }
+      });
+
+      if (!userData.groups.some((group) => group.groupSlug == groupSlug)) {
+        setGroupNotFound(true);
+      }
+    };
+    getGroupName();
     isCheckedIn();
   }, []);
 
@@ -81,7 +101,10 @@ export function AssemblyLobby() {
     navigate("/start");
   }
 
-  return (
+  return groupNotFound ? (
+    // Render 404 not found component if group is not found
+    <NotFound />
+  ) : (
     <>
       {!checkedIn && (
         <Box
@@ -104,7 +127,7 @@ export function AssemblyLobby() {
         </Box>
       )}
       <Text mt={100} mb={20}>
-        {groupName} assembly
+        {groupName && <>{groupName} assembly</>}
       </Text>
 
       {kickedOut ? (
@@ -125,7 +148,7 @@ export function AssemblyLobby() {
         <WaitingRoom message={"There are currently no active vote, look up!"} />
       ) : (
         <>
-          <Text size={"xl"}>Check-in for {groupName.toUpperCase()}</Text>
+          {groupName && <Text size={"xl"}>Check-in for {groupName}</Text>}
           <QrCode />
         </>
       )}

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<checkedInType | null>(null);