diff --git a/frontend/components/GamePage.tsx b/frontend/components/GamePage.tsx index 3c83f2f5..57b78d54 100644 --- a/frontend/components/GamePage.tsx +++ b/frontend/components/GamePage.tsx @@ -8,6 +8,7 @@ import { } from "react" import Head from "next/head" import useWebSocket from "react-use-websocket" +import { useRouter } from "next/router" import Tabs from "@mui/material/Tabs" import Tab from "@mui/material/Tab" @@ -72,6 +73,7 @@ const GamePage = (props: GamePageProps) => { const [latestTokenRefreshDate, setLatestTokenRefreshDate] = useState(null) const [refreshingToken, setRefreshingToken] = useState(false) + const router = useRouter() // Game-specific state const { @@ -115,13 +117,13 @@ const GamePage = (props: GamePageProps) => { // Add class to body element on this page only, for styling useEffect(() => { - document.body.classList.add('game'); + document.body.classList.add("game") // Cleanup function return () => { - document.body.classList.remove('game'); - }; - }, []); + document.body.classList.remove("game") + } + }, []) // Establish a WebSocket connection to the game group and provide a state containing the last message const { lastMessage: lastGameMessage } = useWebSocket( @@ -630,7 +632,8 @@ const GamePage = (props: GamePageProps) => { if (!syncingGameData) { // Render page error if user is not signed in if (user === null || props.authFailure) { - return + router.push(`/sign-in?redirect=${router.asPath}`) + return } // Render page error if game doesn't exist or hasn't started yet diff --git a/frontend/components/PageError.tsx b/frontend/components/PageError.tsx index 2f97f816..f9459211 100644 --- a/frontend/components/PageError.tsx +++ b/frontend/components/PageError.tsx @@ -1,7 +1,7 @@ import { useCookieContext } from "@/contexts/CookieContext" interface PageErrorProps { - statusCode: number + statusCode?: number } // This component is designed to replace the entire `
` element of a page with an error message @@ -16,6 +16,8 @@ const PageError = (props: PageErrorProps) => { case 401: message = "Unauthorized" break + case undefined: + return
// If the status code is not recognized, return an empty main element } const getSuggestion = () => { diff --git a/frontend/pages/account.tsx b/frontend/pages/account.tsx index 48fd80c7..927994a6 100644 --- a/frontend/pages/account.tsx +++ b/frontend/pages/account.tsx @@ -1,23 +1,24 @@ import { GetServerSidePropsContext } from "next" import Head from "next/head" -import Card from "@mui/material/Card" +import { useRouter } from "next/router" import { useCookieContext } from "@/contexts/CookieContext" import getInitialCookieData from "@/functions/cookies" import PageError from "@/components/PageError" import Breadcrumb from "@/components/Breadcrumb" import KeyValueList from "@/components/KeyValueList" -import Box from "@mui/material/Box" /** * The component for the account page */ const AccountPage = () => { const { user } = useCookieContext() + const router = useRouter() // Render page error if user is not signed in if (user === null) { - return + router.push(`/sign-in?redirect=${router.asPath}`) + return } const pairs = [ diff --git a/frontend/pages/games/[id]/index.tsx b/frontend/pages/games/[id]/index.tsx index 8ebc0206..3cdf938e 100644 --- a/frontend/pages/games/[id]/index.tsx +++ b/frontend/pages/games/[id]/index.tsx @@ -494,9 +494,10 @@ const GameLobbyPage = (props: GameLobbyPageProps) => { } }, [props.authFailure, setAccessToken, setRefreshToken, setUser]) - // Render page error if user is not signed in + // Redirect to sign in if user is not signed in if (user === null || props.authFailure) { - return + router.push(`/sign-in?redirect=${router.asPath}`) + return } // Render page error if game doesn't exist @@ -540,11 +541,12 @@ const GameLobbyPage = (props: GameLobbyPageProps) => {
- + -

+

{game.name}

{game.description &&

{game.description}

} @@ -574,7 +576,9 @@ const GameLobbyPage = (props: GameLobbyPageProps) => {
-

Players

+

+ Players +

{!loading ? (

{players.length} of 6 spaces reserved @@ -684,7 +688,9 @@ const GameLobbyPage = (props: GameLobbyPageProps) => { {!loading && (

-

Actions

+

+ Actions +

{game.host?.id === user.id && ( <> diff --git a/frontend/pages/games/index.tsx b/frontend/pages/games/index.tsx index 609be635..165a0eac 100644 --- a/frontend/pages/games/index.tsx +++ b/frontend/pages/games/index.tsx @@ -2,6 +2,7 @@ import { useState, useCallback, useEffect } from "react" import { GetServerSidePropsContext } from "next" import Head from "next/head" import Link from "next/link" +import { useRouter } from "next/router" import Button from "@mui/material/Button" import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid" @@ -26,6 +27,7 @@ interface BrowseGamesPageProps { // The "Browse Games" page component const BrowseGamesPage = (props: BrowseGamesPageProps) => { + const router = useRouter() const { accessToken, refreshToken, @@ -157,9 +159,10 @@ const BrowseGamesPage = (props: BrowseGamesPageProps) => { } }, [props.authFailure, setAccessToken, setRefreshToken, setUser]) - // Render page error if user is not signed in + // Redirect to sign in if user is not signed in if (user === null || props.authFailure) { - return + router.push(`/sign-in?redirect=${router.asPath}`) + return } return ( diff --git a/frontend/pages/games/new.tsx b/frontend/pages/games/new.tsx index e107d75b..9e16e696 100644 --- a/frontend/pages/games/new.tsx +++ b/frontend/pages/games/new.tsx @@ -84,9 +84,10 @@ const NewGamePage = () => { } } - // Render page error if user is not signed in + // Redirect to sign in if user is not signed in if (user === null) { - return + router.push(`/sign-in?redirect=${router.asPath}`) + return } return (