Add toast service

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",
+    "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
     "redux-saga": "^1.2.3",
     "reselect": "^4.1.8"

src/App.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
 // HOC
 import UnauthenticatedRouteHOC from 'HOC/UnauthenticatedRoute';
 import AuthenticatedRouteHOC from 'HOC/AuthenticatedRoute';
@@ -11,6 +13,13 @@ import Dashboard from 'views/Dashboard';
 
 const App: React.FC = () => (
   <Provider store={store}>
+    <ToastContainer
+      theme='dark'
+      limit={5}
+      closeButton={false}
+      pauseOnFocusLoss={false}
+      toastClassName='relative flex p-4 rounded-10 tracking-wider justify-between overflow-hidden cursor-pointer font-bold text-sm'
+    />
     <BrowserRouter>
       <Routes>
         <Route path='/login' Component={UnauthenticatedRouteHOC(Dashboard)} />

src/services/ToastService.ts

@@ -0,0 +1,54 @@
+import { toast, ToastContent, ToastOptions } from 'react-toastify';
+
+class ToastService {
+  private static _instance: ToastService;
+
+  static getInstance(): ToastService {
+    if (!this._instance) {
+      this._instance = new ToastService();
+    }
+    return this._instance;
+  }
+
+  showError(content: ToastContent, config?: ToastOptions) {
+    toast(content, {
+      ...config,
+      type: 'error',
+      position: config?.position || 'bottom-right',
+      autoClose: config?.delay || 4000,
+    });
+  }
+
+  showInfo(content: ToastContent, config?: ToastOptions) {
+    toast(content, {
+      ...config,
+      type: 'info',
+      position: config?.position || 'bottom-right',
+      autoClose: config?.autoClose || 4000,
+    });
+  }
+
+  showSuccess(content: ToastContent, config?: ToastOptions) {
+    toast(content, {
+      ...config,
+      type: 'success',
+      position: config?.position || 'bottom-right',
+      autoClose: config?.autoClose || 4000,
+    });
+  }
+
+  showWarning(content: ToastContent, config?: ToastOptions) {
+    toast(content, {
+      ...config,
+      type: 'warning',
+      position: config?.position || 'bottom-right',
+      autoClose: config?.autoClose || 4000,
+    });
+  }
+
+  dismiss(toastRef: any) {
+    toast.dismiss(toastRef);
+  }
+}
+
+export const toastService = ToastService.getInstance();

yarn.lock

@@ -1011,6 +1011,11 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2877,6 +2882,13 @@ [email protected]:
   dependencies:
     "@remix-run/router" "1.6.2"
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"