Replace default alerts with Toast

frontend/src/components/QuickAdd.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from "react";
-import { IdName, Issue, IssueActivityPair } from "../model";
+import { IdName, Issue, IssueActivityPair, ToastMsg } from "../model";
 import { getApiEndpoint, useDebounce } from "../utils";
 import plus from "../icons/plus.svg";
 import x from "../icons/x.svg";
@@ -10,8 +10,12 @@ import * as ReactDOM from "react-dom";
 
 export const QuickAdd = ({
   addIssueActivity,
+  toastList,
+  onToastListUpdate,
 }: {
   addIssueActivity: (pair: IssueActivityPair) => void;
+  toastList: ToastMsg[];
+  onToastListUpdate: (newToast: ToastMsg) => void;
 }) => {
   const [activities, setActivities] = useState<IdName[]>([]);
   const [issue, setIssue] = useState<Issue>(null);
@@ -141,17 +145,24 @@ export const QuickAdd = ({
         }
       })
       .catch((error) => {
-        alert(error);
+        onToastListUpdate({
+          type: "warning",
+          timeout: 5000,
+          message: error.message,
+        });
       });
     if (logout) context.setUser(null);
     return foundIssues;
   };
 
   const handleAdd = (e) => {
     if (issue === null) {
-      alert(
-        "We couldn't add anything. Make sure to type a valid issue number and choose an activity."
-      );
+      onToastListUpdate({
+        type: "warning",
+        timeout: 5000,
+        message:
+          "We couldn't add anything. Make sure to type a valid issue number and choose an activity.",
+      });
     } else {
       const pair: IssueActivityPair = {
         issue: issue,

frontend/src/pages/Report.tsx

@@ -255,7 +255,14 @@ export const Report = () => {
         }
       })
       .catch((error) => {
-        alert(error);
+        setToastList([
+          ...toastList,
+          {
+            type: "warning",
+            timeout: 5000,
+            message: error.message,
+          },
+        ]);
         const favs = [...favorites];
         setFavorites(favs);
         return false;
@@ -400,7 +407,14 @@ export const Report = () => {
         }
       })
       .catch((error) => {
-        alert(error);
+        setToastList([
+          ...toastList,
+          {
+            type: "warning",
+            timeout: 5000,
+            message: error.message,
+          },
+        ]);
         return false;
       });
     if (logout) context.setUser(null);
@@ -462,7 +476,14 @@ export const Report = () => {
       });
     }
     if (recentIssue) {
-      alert("This issue/activity pair is already added");
+      setToastList([
+        ...toastList,
+        {
+          type: "warning",
+          timeout: 5000,
+          message: "This issue/activity pair is already added.",
+        },
+      ]);
       return;
     }
     const newRecentIssues = [...filteredRecents, pair];
@@ -607,6 +628,18 @@ export const Report = () => {
     return pairs;
   };
 
+  // Forwards the option to update the toast list to child components
+  const handleToastListUpdate = (newToast: ToastMsg) => {
+    setToastList([
+      ...toastList,
+      {
+        type: newToast.type,
+        timeout: newToast.timeout,
+        message: newToast.message,
+      },
+    ]);
+  };
+
   if (context.user === null) return <></>;
 
   // Main content
@@ -812,7 +845,11 @@ export const Report = () => {
         <div className="footer">
           <section className="footer-container">
             <div className="col-8">
-              <QuickAdd addIssueActivity={addIssueActivityHandler}></QuickAdd>
+              <QuickAdd
+                addIssueActivity={addIssueActivityHandler}
+                toastList={toastList}
+                onToastListUpdate={handleToastListUpdate}
+              ></QuickAdd>
             </div>
             {toastList.length > 0 && (
               <Toast onCloseToast={handleCloseToast} toastList={toastList} />