Merge pull request #543 from NBISweden/dev/replace-alerts

Replace default alerts with Toast
NBISweden · Aug 4, 2022 · f1df7ac · f1df7ac
2 parents cc48718 + 8eeeed6
commit f1df7ac
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 9 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/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";
@@ -9,8 +9,12 @@ import { PUBLIC_API_URL, headers, useEscaper } from "../utils";
 
 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);
@@ -140,17 +144,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,

diff --git a/frontend/src/pages/Report.tsx b/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} />