From f00e504410597728cd3a99537cd5af1ec6918fea Mon Sep 17 00:00:00 2001
From: Dennis Chen <41879777+chennisden@users.noreply.github.com>
Date: Mon, 17 Jun 2024 15:52:03 -0700
Subject: [PATCH] Don't reroute to 404 on error (#142)

---
 frontend/src/pages/Robots.tsx     | 14 ++++----------
 frontend/src/pages/YourParts.tsx  | 13 ++++---------
 frontend/src/pages/YourRobots.tsx | 14 ++++----------
 3 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/Robots.tsx b/frontend/src/pages/Robots.tsx
index e0b4fc74..d60525bc 100644
--- a/frontend/src/pages/Robots.tsx
+++ b/frontend/src/pages/Robots.tsx
@@ -1,4 +1,5 @@
 import ImageComponent from "components/files/ViewImage";
+import { useAlertQueue } from "hooks/alerts";
 import { api, Robot } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
@@ -18,7 +19,7 @@ const Robots = () => {
   const auth_api = new api(auth.api);
   const [robotsData, setRobot] = useState<Robot[] | null>(null);
   const [idMap, setIdMap] = useState<Map<string, string>>(new Map());
-  const [error, setError] = useState<string | null>(null);
+  const { addAlert } = useAlertQueue();
   useEffect(() => {
     const fetch_robots = async () => {
       try {
@@ -31,9 +32,9 @@ const Robots = () => {
         setIdMap(await auth_api.getUserBatch(Array.from(ids)));
       } catch (err) {
         if (err instanceof Error) {
-          setError(err.message);
+          addAlert(err.message, "error");
         } else {
-          setError("An unexpected error occurred");
+          addAlert("An unexpected error occurred", "error");
         }
       }
     };
@@ -41,13 +42,6 @@ const Robots = () => {
   }, []);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (error) {
-      console.log(error);
-      navigate("/404"); // Redirect to a 404 page
-    }
-  }, [error, navigate]);
-
   if (!robotsData) {
     return (
       <Container
diff --git a/frontend/src/pages/YourParts.tsx b/frontend/src/pages/YourParts.tsx
index 536f80b7..3475b7e1 100644
--- a/frontend/src/pages/YourParts.tsx
+++ b/frontend/src/pages/YourParts.tsx
@@ -1,4 +1,5 @@
 import ImageComponent from "components/files/ViewImage";
+import { useAlertQueue } from "hooks/alerts";
 import { api, Part } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
@@ -17,7 +18,7 @@ const YourParts = () => {
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
   const [partsData, setParts] = useState<Part[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const { addAlert } = useAlertQueue();
   useEffect(() => {
     const fetch_parts = async () => {
       try {
@@ -25,9 +26,9 @@ const YourParts = () => {
         setParts(partsQuery);
       } catch (err) {
         if (err instanceof Error) {
-          setError(err.message);
+          addAlert(err.message, "error");
         } else {
-          setError("An unexpected error occurred");
+          addAlert("An unexpected error occurred", "error");
         }
       }
     };
@@ -36,12 +37,6 @@ const YourParts = () => {
 
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (error) {
-      navigate("/404"); // Redirect to a 404 page
-    }
-  }, [error, navigate]);
-
   if (!partsData) {
     return (
       <Container
diff --git a/frontend/src/pages/YourRobots.tsx b/frontend/src/pages/YourRobots.tsx
index defceb1f..060352cd 100644
--- a/frontend/src/pages/YourRobots.tsx
+++ b/frontend/src/pages/YourRobots.tsx
@@ -1,4 +1,5 @@
 import ImageComponent from "components/files/ViewImage";
+import { useAlertQueue } from "hooks/alerts";
 import { api, Robot } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
@@ -17,7 +18,7 @@ const YourRobots = () => {
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
   const [robotsData, setRobot] = useState<Robot[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const { addAlert } = useAlertQueue();
 
   useEffect(() => {
     const fetch_your_robots = async () => {
@@ -26,9 +27,9 @@ const YourRobots = () => {
         setRobot(robotsQuery);
       } catch (err) {
         if (err instanceof Error) {
-          setError(err.message);
+          addAlert(err.message, "error");
         } else {
-          setError("An unexpected error occurred");
+          addAlert("An unexpected error occurred", "error");
         }
       }
     };
@@ -36,13 +37,6 @@ const YourRobots = () => {
   }, []);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (error) {
-      console.log(error);
-      navigate("/404"); // Redirect to a 404 page
-    }
-  }, [error, navigate]);
-
   if (!robotsData) {
     return (
       <Container