feat: Added toast notification

Hasnainahmad04 · Aug 17, 2024 · d215fb8 · d215fb8
1 parent 94d2291
commit d215fb8
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/app/dashboard/issue/[id]/loading.tsx b/app/dashboard/issue/[id]/loading.tsx
@@ -15,7 +15,17 @@ function IssuePageSkeleton() {
           </div>
         </div>
 
-        <Skeleton className="mb-4 aspect-video h-72 w-full rounded-md" />
+        <Skeleton className="mb-4 flex aspect-video h-72 items-center justify-center rounded-md text-center">
+          <svg
+            className="size-36 text-gray-300"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            fill="currentColor"
+            viewBox="0 0 640 512"
+          >
+            <path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" />
+          </svg>
+        </Skeleton>
 
         <div className="flex gap-4 overflow-x-auto">
           <Skeleton className="h-24 w-36 rounded-md" />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import NextTopLoader from 'nextjs-toploader';
+import { Toaster } from 'react-hot-toast';
 
 import ReactQueryProvider from '@/components/Providers/ReactQueryProvider';
 
@@ -23,6 +24,7 @@ export default function RootLayout({
       <body
         className={`${inter.className} h-screen max-h-screen overflow-hidden`}
       >
+        <Toaster position="top-center" reverseOrder={false} />
         <NextTopLoader showSpinner={false} color="#1a1b1a" />
         <ReactQueryProvider>{children}</ReactQueryProvider>
       </body>

diff --git a/components/IssueForm/index.tsx b/components/IssueForm/index.tsx
@@ -9,6 +9,7 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
 import type { z } from 'zod';
 
 import { Button } from '@/components/ui/button';
@@ -78,11 +79,22 @@ const IssueForm = ({ issue }: { issue?: Issue }) => {
     );
 
     if (issue?.id) {
-      await updateIssue({ id: issue.id, data }, { onSuccess });
+      toast.promise(updateIssue({ id: issue.id, data }, { onSuccess }), {
+        error: 'Failed to update',
+        loading: 'Updating',
+        success: 'Updated',
+      });
     } else {
-      await createNewIssue(
-        { ...data, assets: assets.filter((asset) => asset !== null) },
-        { onSuccess },
+      toast.promise(
+        createNewIssue(
+          { ...data, assets: assets.filter((asset) => asset !== null) },
+          { onSuccess },
+        ),
+        {
+          error: 'Failed to update',
+          loading: 'Submitting',
+          success: 'Created',
+        },
       );
     }
   };

diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "react-hot-toast": "^2.4.1",
     "react-markdown": "^9.0.1",
     "react-simplemde-editor": "^5.2.0",
     "tailwind-merge": "^2.4.0",

diff --git a/yarn.lock b/yarn.lock
@@ -2260,6 +2260,11 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -3658,6 +3663,13 @@ react-hook-form@^7.52.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.52.2.tgz#ff40f4776250b86ddfcde6be68d34aa82b1c60fe"
   integrity sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -3973,6 +3985,7 @@ string-argv@~0.3.2:
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==