From fcef10e8c776f686e07dfbdc51c2fb5a74bc1acb Mon Sep 17 00:00:00 2001
From: Privilege Mendes <20317699+privilegemendes@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:21:51 +0100
Subject: [PATCH] Bug/error bug (#372)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 | 25 +++++++++++++++++++-----
 src/components/error-view/style.ts       |  4 ++++
 src/constants/error-messages.ts          |  1 +
 src/pages/match.tsx                      | 19 ++++++++++++++++++
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src/components/error-view/error-view.tsx b/src/components/error-view/error-view.tsx
index ec6bf91e..f3e0e72b 100644
--- a/src/components/error-view/error-view.tsx
+++ b/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,11 +16,20 @@ 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}>
@@ -27,9 +37,14 @@ export function ErrorFallback({
           <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>
diff --git a/src/components/error-view/style.ts b/src/components/error-view/style.ts
index f50284d5..a24ee6ab 100644
--- a/src/components/error-view/style.ts
+++ b/src/components/error-view/style.ts
@@ -9,4 +9,8 @@ export const styles = {
     textAlign: "center",
     mb: "100px",
   },
+  buttons: {
+    flexDirection: "column",
+    gap: 2,
+  },
 } satisfies SxStyleRecord;
diff --git a/src/constants/error-messages.ts b/src/constants/error-messages.ts
index c2da59fe..093a2e17 100644
--- a/src/constants/error-messages.ts
+++ b/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",
diff --git a/src/pages/match.tsx b/src/pages/match.tsx
index 2f5f3339..946a6d77 100644
--- a/src/pages/match.tsx
+++ b/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 },
     {