From 0f545ee233455e0bcfc0ce254f35cbde46beff2a Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.company>
Date: Thu, 30 May 2024 16:42:48 -0600
Subject: [PATCH] [admin] add toast status & better error handling with visual
 feedback (related #12)

---
 package-lock.json                             |  1 +
 packages/admin/package.json                   |  1 +
 packages/admin/src/lib/utils.ts               | 17 +++++++++++++++++
 packages/admin/src/main.tsx                   |  3 +++
 packages/admin/src/pages/Service/settings.tsx | 16 ++++++++++------
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b033561..1933eae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15753,6 +15753,7 @@
         "react-apexcharts": "^1.4.1",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.1",
+        "react-toastify": "^10.0.5",
         "sort-by": "^1.2.0"
       },
       "devDependencies": {
diff --git a/packages/admin/package.json b/packages/admin/package.json
index 3dea8b5..9372abe 100644
--- a/packages/admin/package.json
+++ b/packages/admin/package.json
@@ -22,6 +22,7 @@
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
+    "react-toastify": "^10.0.5",
     "sort-by": "^1.2.0"
   },
   "devDependencies": {
diff --git a/packages/admin/src/lib/utils.ts b/packages/admin/src/lib/utils.ts
index c882f8e..551ed7b 100644
--- a/packages/admin/src/lib/utils.ts
+++ b/packages/admin/src/lib/utils.ts
@@ -1,3 +1,5 @@
+import { toast } from "react-toastify";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const api = async <T = any>(
   endpoint: string,
@@ -32,3 +34,18 @@ export const api = async <T = any>(
     data,
   };
 };
+
+export const handleError = (
+  ...props: [
+    status: number,
+    data: { success: true } | { success: false; error: string },
+  ]
+) => {
+  console.error(...props);
+  if (typeof props[0] === "number") {
+    const [status, data] = props;
+    toast.error(
+      `${status} ${"error" in data ? data.error : JSON.stringify(data)}`
+    );
+  }
+};
diff --git a/packages/admin/src/main.tsx b/packages/admin/src/main.tsx
index 0a57ac3..2eff391 100644
--- a/packages/admin/src/main.tsx
+++ b/packages/admin/src/main.tsx
@@ -8,6 +8,7 @@ import { Root } from "./Root.tsx";
 import { HomePage } from "./pages/Home/page.tsx";
 import { AccountsPage } from "./pages/Accounts/Accounts/page.tsx";
 import { ServiceSettingsPage } from "./pages/Service/settings.tsx";
+import { ToastContainer } from "react-toastify";
 
 const router = createBrowserRouter(
   [
@@ -40,6 +41,8 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <NextUIProvider>
       <ThemeProvider defaultTheme="system">
         <RouterProvider router={router} />
+
+        <ToastContainer position="bottom-right" />
       </ThemeProvider>
     </NextUIProvider>
   </React.StrictMode>
diff --git a/packages/admin/src/pages/Service/settings.tsx b/packages/admin/src/pages/Service/settings.tsx
index b07a24e..7c51a27 100644
--- a/packages/admin/src/pages/Service/settings.tsx
+++ b/packages/admin/src/pages/Service/settings.tsx
@@ -1,7 +1,8 @@
 import { BreadcrumbItem, Breadcrumbs, Button, Input } from "@nextui-org/react";
 import { useEffect, useState } from "react";
-import { api } from "../../lib/utils";
+import { api, handleError } from "../../lib/utils";
 import { LoadingOverlay } from "../../components/LoadingOverlay";
+import { toast } from "react-toastify";
 
 export const ServiceSettingsPage = () => {
   return (
@@ -31,10 +32,10 @@ const CanvasSettings = () => {
             setWidth(data.size.width + "");
             setHeight(data.size.height + "");
           } else {
-            console.error(status, data);
+            handleError(status, data);
           }
         } else {
-          console.error(status, data);
+          handleError(status, data);
         }
       })
       .finally(() => {
@@ -52,12 +53,12 @@ const CanvasSettings = () => {
       .then(({ status, data }) => {
         if (status === 200) {
           if (data.success) {
-            alert("good");
+            toast.success("Canvas size has been changed");
           } else {
-            console.error(status, data);
+            handleError(status, data);
           }
         } else {
-          console.error(status, data);
+          handleError(status, data);
         }
       })
       .finally(() => {
@@ -70,6 +71,9 @@ const CanvasSettings = () => {
       <h4 className="text-l font-semibold">Canvas</h4>
       <div className="relative">
         {loading && <LoadingOverlay />}
+        <b>
+          Canvas size is resource intensive, this will take a minute to complete
+        </b>
         <Input
           type="number"
           size="sm"