Error Boundary (#177)

* Add error handling UI

* Update redirect message

* Update boundary

Author: nickbar01234

src/app/private/admin/home/error.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ErrorNavigation } from "@components/navigation";
+
+const Error = () => {
+  return (
+    <ErrorNavigation
+      message="Oops, an error has occurred."
+      redirectTo="/private/admin/home/chapters"
+      redirectMessage="View all chapters"
+    />
+  );
+};
+
+export default Error;

src/app/private/chapter-leader/seniors/error.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ErrorNavigation } from "@components/navigation";
+
+const Error = () => {
+  return (
+    <ErrorNavigation
+      message="Oops, an error has occurred."
+      redirectTo="/private/chapter-leader/seniors"
+      redirectMessage="View all seniors"
+    />
+  );
+};
+
+export default Error;

src/app/private/chapter-leader/users/error.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ErrorNavigation } from "@components/navigation";
+
+const Error = () => {
+  return (
+    <ErrorNavigation
+      message="Oops, an error has occurred."
+      redirectTo="/private/chapter-leader/users"
+      redirectMessage="View all users"
+    />
+  );
+};
+
+export default Error;

src/app/private/error.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { ErrorNavigation } from "@components/navigation";
+
+const Error = () => {
+  return (
+    <ErrorNavigation
+      message="Oops, an error has occurred."
+      redirectMessage="Back to home"
+    />
+  );
+};
+
+export default Error;

src/app/private/user/layout.tsx

@@ -1,7 +1,6 @@
 import { ISideBar } from "@components/Sidebar";
 import { CollapsibleSidebarContainer } from "@components/container";
 import { faHome, faUsers, faUser } from "@fortawesome/free-solid-svg-icons";
-import { UserContext } from "src/context/UserProvider";
 
 interface IUserLayout {
   children: React.ReactNode;

src/app/private/user/seniors/error.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { ErrorNavigation } from "@components/navigation";
+
+const Error = () => {
+  return (
+    <ErrorNavigation
+      message="Oops, an error has occurred."
+      redirectTo="/private/user/seniors"
+      redirectMessage="View all seniors"
+    />
+  );
+};
+
+export default Error;

src/components/Sidebar.tsx

@@ -116,21 +116,33 @@ const Sidebar = (props: ISideBar) => {
         <_Sidebar {...props} />
       </div>
       <div
-        className="mt-6 block lg:hidden"
+        className="block lg:hidden"
         onMouseLeave={() => setSidebarVisible(false)}
       >
-        <svg
-          className="h-8 w-8 text-darkest-tan"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          onClick={() => setSidebarVisible(!sidebarVisible)}
+        <div
+          className="mb-24 block lg:hidden"
+          style={{ display: sidebarVisible ? "none" : "block" }}
         >
-          <line x1="4" y1="7" x2="20" y2="7" />
-          <line x1="4" y1="12" x2="20" y2="12" />
-          <line x1="4" y1="17" x2="20" y2="17" />
-        </svg>
+          <div className="fixed left-0 top-0 z-50 w-full bg-med-tan px-6 shadow-lg shadow-gray-500">
+            <div className="flex items-center justify-between">
+              <svg
+                className="h-8 w-8 text-darkest-tan"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                onClick={() => setSidebarVisible(!sidebarVisible)}
+              >
+                <line x1="4" y1="7" x2="20" y2="7" />
+                <line x1="4" y1="12" x2="20" y2="12" />
+                <line x1="4" y1="17" x2="20" y2="17" />
+              </svg>
+              <Link href="/public">
+                <Image src={Logo} alt="logo" height={96} />
+              </Link>
+            </div>
+          </div>
+        </div>
         {sidebarVisible && (
           <div className="fixed left-0 top-0 z-50 h-full w-64 overflow-y-auto drop-shadow-lg lg:overflow-y-hidden">
             <_Sidebar {...props} />

src/components/navigation/ErrorNavigation.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Popup } from "@components/container";
+import { UserContext } from "@context/UserProvider";
+import { formatUserHomeRoute } from "@utils";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+interface ErrorNavigationProps {
+  message?: string;
+  redirectTo?: string;
+  redirectMessage?: string;
+}
+
+const ErrorNavigation = ({
+  message,
+  redirectTo,
+  redirectMessage,
+}: ErrorNavigationProps) => {
+  const router = useRouter();
+  const userContext = React.useContext(UserContext);
+
+  return (
+    <Popup>
+      <div className="text-wrap flex h-full w-full flex-col items-center justify-center gap-y-6">
+        <h1 className="text-lg text-white sm:text-xl">
+          {message ?? "Oops, an error has occurred."}
+        </h1>
+        <button
+          className="mx-1 w-fit rounded bg-white p-3 text-lg text-dark-teal drop-shadow-md"
+          onClick={() =>
+            router.replace(redirectTo ?? formatUserHomeRoute(userContext.user))
+          }
+        >
+          {redirectMessage ?? "Redirect"}
+        </button>
+      </div>
+    </Popup>
+  );
+};
+
+export default ErrorNavigation;

src/components/navigation/index.tsx

@@ -1 +1,2 @@
 export { default as RootNavigation } from "./RootNavigation";
+export { default as ErrorNavigation } from "./ErrorNavigation";