From 0c068dba3d69f5899864572f70d606a0d533725b Mon Sep 17 00:00:00 2001
From: Beshr Islam Bouli <beshr@VN9RNYQM3Y.tld>
Date: Fri, 11 Oct 2024 17:34:06 -0400
Subject: [PATCH 1/4] test

---
 frontend2/src/views/ErrorBoundary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend2/src/views/ErrorBoundary.tsx b/frontend2/src/views/ErrorBoundary.tsx
index e2a816327..6affecd8d 100644
--- a/frontend2/src/views/ErrorBoundary.tsx
+++ b/frontend2/src/views/ErrorBoundary.tsx
@@ -11,7 +11,7 @@ const ErrorBoundary: React.FC = () => {
         <PageTitle>Oops, something went wrong.</PageTitle>
         <p>
           Please reach out on Discord or to battlecode@mit.edu with the
-          following error message:
+          following error message: Beshr
         </p>
         <span className="rounded-md bg-gray-200 px-1 py-0.5 font-mono">
           {error.message}

From e6c01af31915940a6af06fa6ed0384438cbe01b8 Mon Sep 17 00:00:00 2001
From: Beshr Islam Bouli <beshr@VN9RNYQM3Y.tld>
Date: Sat, 2 Nov 2024 13:32:07 -0400
Subject: [PATCH 2/4] Added Error boundary

---
 frontend2/src/views/ErrorBoundary.tsx | 40 ++++++++++++++++++---------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend2/src/views/ErrorBoundary.tsx b/frontend2/src/views/ErrorBoundary.tsx
index 6affecd8d..c852b46f2 100644
--- a/frontend2/src/views/ErrorBoundary.tsx
+++ b/frontend2/src/views/ErrorBoundary.tsx
@@ -1,26 +1,40 @@
 import React from "react";
-import { useRouteError } from "react-router-dom";
+import { useRouteError, useNavigate } from "react-router-dom";
 import { PageTitle } from "../components/elements/BattlecodeStyle";
+import { DEFAULT_EPISODE } from "../utils/constants";
 
 const ErrorBoundary: React.FC = () => {
   const error = useRouteError();
+  const navigate = useNavigate(); // Initialize useNavigate
 
-  if (error instanceof Error) {
-    return (
-      <div className="flex flex-col gap-6 p-6 xl:flex-row">
+  const handleGoHome = (): void => {
+    navigate(`/${DEFAULT_EPISODE}/home`); // Navigate to home
+  };
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-white p-6">
+      <div className="flex flex-col gap-4 rounded-lg border border-gray-300 bg-gray-50 p-6 shadow-md max-w-xs w-full">
         <PageTitle>Oops, something went wrong.</PageTitle>
-        <p>
+        <p className="text-center">
           Please reach out on Discord or to battlecode@mit.edu with the
-          following error message: Beshr
+          following error message:
         </p>
-        <span className="rounded-md bg-gray-200 px-1 py-0.5 font-mono">
-          {error.message}
-        </span>
+        {error instanceof Error ? (
+          <span className="rounded-md bg-gray-200 px-1 py-0.5 font-mono text-center block">
+            {error.message}
+          </span>
+        ) : (
+          <span className="text-red-600 text-center block">An unknown error occurred.</span>
+        )}
+        <button
+          onClick={handleGoHome}
+          className="mt-4 rounded bg-blue-500 text-white px-3 py-1 hover:bg-blue-600 transition mx-auto"
+        >
+          Go to Home
+        </button>
       </div>
-    );
-  }
-
-  return <p>Oops, something went wrong.</p>;
+    </div>
+  );
 };
 
 export default ErrorBoundary;

From 5661dc378e2f831e951216cf1420f63f9654e712 Mon Sep 17 00:00:00 2001
From: Beshr Islam Bouli <beshr@VN9RNYQM3Y.tld>
Date: Sat, 9 Nov 2024 13:23:30 -0500
Subject: [PATCH 3/4] Fixed Error boundry following serena comments

---
 frontend2/src/views/ErrorBoundary.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend2/src/views/ErrorBoundary.tsx b/frontend2/src/views/ErrorBoundary.tsx
index c852b46f2..a93deb046 100644
--- a/frontend2/src/views/ErrorBoundary.tsx
+++ b/frontend2/src/views/ErrorBoundary.tsx
@@ -1,15 +1,11 @@
 import React from "react";
-import { useRouteError, useNavigate } from "react-router-dom";
+import { useRouteError, Link } from "react-router-dom";
 import { PageTitle } from "../components/elements/BattlecodeStyle";
-import { DEFAULT_EPISODE } from "../utils/constants";
+import { useEpisodeId } from "../contexts/EpisodeContext";
 
 const ErrorBoundary: React.FC = () => {
   const error = useRouteError();
-  const navigate = useNavigate(); // Initialize useNavigate
-
-  const handleGoHome = (): void => {
-    navigate(`/${DEFAULT_EPISODE}/home`); // Navigate to home
-  };
+  const { episodeId } = useEpisodeId();
 
   return (
     <div className="flex h-screen w-full items-center justify-center bg-white p-6">
@@ -26,12 +22,9 @@ const ErrorBoundary: React.FC = () => {
         ) : (
           <span className="text-red-600 text-center block">An unknown error occurred.</span>
         )}
-        <button
-          onClick={handleGoHome}
-          className="mt-4 rounded bg-blue-500 text-white px-3 py-1 hover:bg-blue-600 transition mx-auto"
-        >
-          Go to Home
-        </button>
+        <Link to={episodeId !== undefined ? `/${episodeId}/home` : "/"}>
+              Back to home
+        </Link>
       </div>
     </div>
   );

From 34d637c50fcbe1c48233ff5ae4b0996b7cc110b9 Mon Sep 17 00:00:00 2001
From: Beshr Islam Bouli <beshr@VN9RNYQM3Y.tld>
Date: Sat, 9 Nov 2024 13:31:14 -0500
Subject: [PATCH 4/4] Used div to make it nicer and ran npm run format

---
 frontend2/src/views/ErrorBoundary.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend2/src/views/ErrorBoundary.tsx b/frontend2/src/views/ErrorBoundary.tsx
index a93deb046..7fc964499 100644
--- a/frontend2/src/views/ErrorBoundary.tsx
+++ b/frontend2/src/views/ErrorBoundary.tsx
@@ -9,21 +9,25 @@ const ErrorBoundary: React.FC = () => {
 
   return (
     <div className="flex h-screen w-full items-center justify-center bg-white p-6">
-      <div className="flex flex-col gap-4 rounded-lg border border-gray-300 bg-gray-50 p-6 shadow-md max-w-xs w-full">
+      <div className="flex w-full max-w-xs flex-col gap-4 rounded-lg border border-gray-300 bg-gray-50 p-6 shadow-md">
         <PageTitle>Oops, something went wrong.</PageTitle>
         <p className="text-center">
           Please reach out on Discord or to battlecode@mit.edu with the
           following error message:
         </p>
         {error instanceof Error ? (
-          <span className="rounded-md bg-gray-200 px-1 py-0.5 font-mono text-center block">
+          <span className="block rounded-md bg-gray-200 px-1 py-0.5 text-center font-mono">
             {error.message}
           </span>
         ) : (
-          <span className="text-red-600 text-center block">An unknown error occurred.</span>
+          <span className="block text-center text-red-600">
+            An unknown error occurred.
+          </span>
         )}
         <Link to={episodeId !== undefined ? `/${episodeId}/home` : "/"}>
-              Back to home
+          <div className="mx-auto mt-4 rounded bg-blue-500 px-3 py-1 text-center text-white transition hover:bg-blue-600">
+            Go to Home
+          </div>
         </Link>
       </div>
     </div>