Bug/error bug (#372)

## Changes

- [X]  Error - Try Again button doesn’t work. Added a page reload
- [X] Redirect the user back to the home page if back navigation is
requested from the browser to prevent page error in the lobby.

src/components/error-view/error-view.tsx

@@ -4,9 +4,10 @@ import { usePlaySFX } from "~/hooks/sounds.js";
 import { PageLayout } from "~/containers/page-layout/index.js";
 import { AppContainer } from "~/containers/index.js";
 import { errorMessage } from "~/constants/error-messages.js";
-
-import { styles } from "./style.js";
 import { PrimaryButton } from "../primary-button/index.js";
+import { useRouter } from "next/router";
+import { pages } from "~/router.js";
+import { styles } from "./style.js";
 
 export function ErrorFallback({
   error,
@@ -15,21 +16,35 @@ export function ErrorFallback({
   error: Error;
   resetErrorBoundary: () => void;
 }) {
+  const router = useRouter();
   const playSfx = usePlaySFX();
   const handleClick = () => {
+    playSfx("BlipUp");
+    void router.reload();
+    resetErrorBoundary();
+  };
+
+  const handleNavigation = (path: string) => {
     playSfx("BlipUp");
     resetErrorBoundary();
+    void router.push(path);
   };
+
   return (
     <AppContainer>
       <PageLayout title={errorMessage.generalHeading}>
         <Stack sx={styles.container}>
           <Typography variant="body1" sx={styles.errorMessage}>
             {error.message}
           </Typography>
-          <PrimaryButton onClick={handleClick}>
-            {errorMessage.tryAgain}
-          </PrimaryButton>
+          <Stack sx={styles.buttons}>
+            <PrimaryButton onClick={handleClick}>
+              {errorMessage.tryAgain}
+            </PrimaryButton>
+            <PrimaryButton onClick={() => handleNavigation(pages.home)}>
+              {errorMessage.goHome}
+            </PrimaryButton>
+          </Stack>
         </Stack>
       </PageLayout>
     </AppContainer>

src/components/error-view/style.ts

@@ -9,4 +9,8 @@ export const styles = {
     textAlign: "center",
     mb: "100px",
   },
+  buttons: {
+    flexDirection: "column",
+    gap: 2,
+  },
 } satisfies SxStyleRecord;

src/constants/error-messages.ts

@@ -8,6 +8,7 @@ export const errorMessage = {
   generalHeading: "Error",
   tryRefreshing: "Try refreshing the page",
   tryAgain: "Try Again",
+  goHome: "Return to Home",
   goBack: "Go Back",
   match: {
     general: "An error occurred while loading the match",

src/pages/match.tsx

@@ -14,6 +14,7 @@ import { PlayerLocal } from "~/components/players/player-local/index.js";
 import { PlayersOthers } from "~/components/players/player-others/index.js";
 import { errorMessage } from "~/constants/error-messages.js";
 import { LoadingPage } from "~/components/loading-page/index.js";
+import { pages } from "~/router.js";
 
 const Match: FC = () => {
   const { showBoundary } = useErrorBoundary();
@@ -39,8 +40,26 @@ interface Props {
 const MatchInternal: FC<Props> = ({ roomId, session }) => {
   const { showBoundary } = useErrorBoundary();
   const vote = api.match.vote.useMutation();
+  const { events, replace } = useRouter();
   const roomData = api.match.getRoom.useQuery({ roomId });
 
+  // During a match, if the user navigates back to the lobby,
+  // they should be redirected back to the match, unless they are at the results stage.
+  useEffect(() => {
+    if (roomData?.data?.stage === "results") return;
+    const handleRouteChange = (url: string) => {
+      if (url === pages.lobby && window.history.state) {
+        void replace(pages.home);
+      }
+    };
+
+    events.on("routeChangeStart", handleRouteChange);
+
+    return () => {
+      events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [events, replace, roomData]);
+
   api.match.onStageChange.useSubscription(
     { roomId },
     {