add error

src/app/user/join/[teamID]/page.js

@@ -1,15 +1,14 @@
 "use client";
 import { useState, useEffect } from "react";
-import Error from "@/components/dynamic/Error";
 import axios from "axios";
 import Button from "@/components/dynamic/Button";
 import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 import { useSession } from "next-auth/react";
+import Fault from "@/utils/error";
 
 export default function page({ params }) {
   const [team, setTeam] = useState(null);
-  const [error, setError] = useState(null);
   const router = useRouter();
   const { update: sessionUpdate } = useSession();
   const handleJoin = () => {
@@ -37,26 +36,23 @@ export default function page({ params }) {
         .then((response) => setTeam(response.data.items))
         .catch(({ response: data }) => {
           if (data.data.message === "Invalid Team ID")
-            setError({
-              code: "404",
-              error: "Invalid Team ID",
-              message: "Please get a new team invite",
-            });
+            throw new Fault(
+              404,
+              "Invalid Team ID",
+              "Please get a new team invite"
+            );
           else
-            setError({
-              code: "500",
-              error: "Internal Server Erro",
-              message: "Please contact web dev",
-            });
+            throw new Fault(
+              500,
+              "Internal Server Error",
+              "Please contact the software engineering team for assistance"
+            );
         });
     }
   }, []);
 
   return (
     <div>
-      {error && (
-        <Error code={error.code} error={error.error} message={error.message} />
-      )}
       {team && (
         <div className="flex flex-col w-screen h-screen items-center justify-center font-poppins">
           <p className="text-3xl">

src/components/dynamic/ProtectedPage.jsx

@@ -2,14 +2,13 @@
 import { useEffect, useState } from "react";
 import { signIn, useSession } from "next-auth/react";
 import Loading from "@/components/dynamic/Loading";
-import Error from "./Error";
 import { usePathname } from "next/navigation";
 import RELEASES from "@/data/Releases";
 import { ROUTES } from "@/data/ProtectedRoutes";
+import Fault from "@/utils/error";
 
 const ProtectedPage = ({ children }) => {
   const { data: session, status } = useSession();
-  const [error, setError] = useState(null);
   const [confirmed, setConfirmed] = useState(false);
 
   const pathName = usePathname();
@@ -23,12 +22,11 @@ const ProtectedPage = ({ children }) => {
       return;
     }
     if (RELEASES.DYNAMIC[pathName] > new Date()) {
-      setError({
-        code: 423,
-        error: "Locked Resource",
-        message: "This resource has not been released",
-      });
-      return;
+      throw new Fault(
+        423,
+        "Locked Resource",
+        "This resource has not been released"
+      );
     }
 
     if (status === "loading") return;
@@ -38,12 +36,11 @@ const ProtectedPage = ({ children }) => {
     }
 
     if (!session.user.roles && Object.keys(restrictions).length > 0) {
-      setError({
-        code: 403,
-        error: "Unauthorized",
-        message: "You do not have any assigned roles",
-      });
-      return;
+      throw new Fault(
+        403,
+        "Unauthorized",
+        "You do not have any assigned roles"
+      );
     }
 
     const authorized = Object.entries(restrictions).some(([key, values]) =>
@@ -53,22 +50,14 @@ const ProtectedPage = ({ children }) => {
     );
 
     if (!authorized && Object.keys(restrictions).length > 0) {
-      setError({
-        code: 403,
-        error: "Unauthorized",
-        message: "You do not have access this page",
-      });
-      return;
+      throw new Fault(403, "Unauthorized", "You do not have access this page");
     }
     setConfirmed(true);
   }, [status]);
 
   return (
     <>
       {status === "loading" && <Loading />}
-      {error && (
-        <Error code={error.code} error={error.error} message={error.message} />
-      )}
       {confirmed && (
         <>
           <title>{title}</title>

src/utils/error.js

@@ -0,0 +1,9 @@
+class Fault extends Error {
+  constructor(code, name, message) {
+    super(message);
+    this.name = name;
+    this.code = code;
+  }
+}
+
+export default Fault;