Commit 0f545ee2 authored by Grant's avatar Grant
Browse files

[admin] add toast status & better error handling with visual feedback (related #12)

parent 6294a28c

package-lock.json

+1 −0
Original line number Diff line number Diff line
@@ -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": {

packages/admin/package.json

+1 −0
Original line number Diff line number Diff line
@@ -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": {

packages/admin/src/lib/utils.ts

+17 −0
Original line number Diff line number Diff line 
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)}`

    );

  }

};

packages/admin/src/main.tsx

+3 −0
Original line number Diff line number Diff line
@@ -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>

packages/admin/src/pages/Service/settings.tsx

+10 −6
Original line number Diff line number Diff line 
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"