From ca37a8861d6a20c65f01491b2f61ee011b138d8a Mon Sep 17 00:00:00 2001
From: Dennis Chen <41879777+chennisden@users.noreply.github.com>
Date: Thu, 13 Jun 2024 15:15:01 -0700
Subject: [PATCH] Display error (#123)

* add error alert when trying to login

* Add Sidebar errors
---
 frontend/src/components/nav/Sidebar.tsx | 24 +++++++++++++++++++++---
 frontend/src/pages/Login.tsx            |  9 ++++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/nav/Sidebar.tsx b/frontend/src/components/nav/Sidebar.tsx
index cdaf33d8..c2bd8eea 100644
--- a/frontend/src/components/nav/Sidebar.tsx
+++ b/frontend/src/components/nav/Sidebar.tsx
@@ -1,3 +1,4 @@
+import { useAlertQueue } from "hooks/alerts";
 import { api } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { FormEvent, useEffect, useState } from "react";
@@ -10,6 +11,8 @@ interface Props {
 }
 
 const Sidebar = ({ show, onHide }: Props) => {
+  const { addAlert } = useAlertQueue();
+
   const [needToCall, setNeedToCall] = useState<boolean>(true);
   const [email, setEmail] = useState<string>("");
   const [verified, setVerified] = useState<boolean>(false);
@@ -27,7 +30,14 @@ const Sidebar = ({ show, onHide }: Props) => {
     try {
       await auth_api.send_verify_email();
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        addAlert(error.message, "error");
+      } else {
+        addAlert(
+          "Unexpected error when trying to send verification email",
+          "error",
+        );
+      }
     }
   };
 
@@ -37,7 +47,11 @@ const Sidebar = ({ show, onHide }: Props) => {
       await auth_api.send_change_email(newEmail);
       setChangeEmailSuccess(true);
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        addAlert(error.message, "error");
+      } else {
+        addAlert("Unexpected error when trying to change email", "error");
+      }
     }
   };
 
@@ -47,7 +61,11 @@ const Sidebar = ({ show, onHide }: Props) => {
       await auth_api.change_password(oldPassword, newPassword);
       setChangePasswordSuccess(true);
     } catch (error) {
-      console.error(error);
+      if (error instanceof Error) {
+        addAlert(error.message, "error");
+      } else {
+        addAlert("Unexpected error when trying to change password", "error");
+      }
     }
   };
 
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index ea7b3b9c..a71c6f6f 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,3 +1,4 @@
+import { useAlertQueue } from "hooks/alerts";
 import { api } from "hooks/api";
 import { setLocalStorageAuth, useAuthentication } from "hooks/auth";
 import { FormEvent, useState } from "react";
@@ -8,6 +9,8 @@ const Login = () => {
   const auth = useAuthentication();
   const auth_api = new api(auth.api);
 
+  const { addAlert } = useAlertQueue();
+
   const navigate = useNavigate();
 
   const [password, setPassword] = useState<string>("");
@@ -20,7 +23,11 @@ const Login = () => {
       setLocalStorageAuth(email);
       navigate("/");
     } catch (err) {
-      console.error(err);
+      if (err instanceof Error) {
+        addAlert(err.message, "error");
+      } else {
+        addAlert("Unexpected error when trying to log in", "error");
+      }
     }
   };