refactor: snackbar

goelshobhit · Nov 6, 2022 · e0cefac · e0cefac
1 parent a17cd23
commit e0cefac
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 24 deletions.
diff --git a/...nents/shared/snackbar/SnackbarWrapper.jsx → ...nents/shared/snackbar/SnackbarWrapper.tsx b/...nents/shared/snackbar/SnackbarWrapper.jsx → ...nents/shared/snackbar/SnackbarWrapper.tsx
@@ -1,12 +1,17 @@
-/* eslint-disable unicorn/no-unused-properties */
-import React, { useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { ToastContainer, toast, Slide, Zoom, Flip, Bounce } from 'react-toastify';
 
 import { SNACKBAR_POSITIONS, SNACKBAR_TYPES } from 'constants/Snackbar';
 
 import 'react-toastify/dist/ReactToastify.min.css';
 
-const TOAST_COLOR_TYPES = {
+export type SnackBarType = 'info' | 'error' | 'warn' | 'success' | 'message';
+
+const TOAST_COLOR_TYPES: {
+  DARK: 'dark';
+  LIGHT: 'light';
+  COLORED: 'colored';
+} = {
   DARK: 'dark',
   LIGHT: 'light',
   COLORED: 'colored'
@@ -19,12 +24,27 @@ const TOAST_TRANSITION_TYPES = {
   BOUNCE: Bounce
 };
 
+interface SnackBarEvent {
+  detail: {
+    delay?: number;
+    message: string;
+    type?: SnackBarType;
+    icon?: null | ReactNode;
+    position?:
+      | 'top-left'
+      | 'top-right'
+      | 'top-center'
+      | 'bottom-right'
+      | 'bottom-center'
+      | 'bottom-left';
+  };
+}
+
 export function SnackbarWrapper() {
-  // eslint-disable-next-line unicorn/consistent-function-scoping, consistent-return
-  const createSnackBar = (event) => {
+  const createSnackBar = (event: SnackBarEvent) => {
     const {
+      icon,
       message,
-      icon = null,
       delay = 3000,
       type = SNACKBAR_TYPES.MESSAGE,
       position = SNACKBAR_POSITIONS.BOTTOM_CENTER
@@ -33,28 +53,30 @@ export function SnackbarWrapper() {
 
     if (type === SNACKBAR_TYPES.MESSAGE) {
       return toast(message, {
+        icon,
         toastId,
         position,
         autoClose: delay,
-        icon: () => icon,
         theme: TOAST_COLOR_TYPES.DARK,
         transition: TOAST_TRANSITION_TYPES.SLIDE
       });
     }
 
     toast[type]?.(message, {
+      icon,
       toastId,
       position,
       autoClose: delay,
-      icon: () => icon,
       theme: TOAST_COLOR_TYPES.COLORED,
       transition: TOAST_TRANSITION_TYPES.SLIDE
     });
   };
 
   useEffect(() => {
+    // @ts-ignore: Unreachable code error
     window.addEventListener('GenerateSnackbar', createSnackBar);
     return () => {
+      // @ts-ignore: Unreachable code error
       window.removeEventListener('GenerateSnackbar', createSnackBar);
     };
   }, []);

diff --git a/src/constants/Snackbar.js b/src/constants/Snackbar.js
diff --git a/src/constants/Snackbar.ts b/src/constants/Snackbar.ts
@@ -0,0 +1,29 @@
+export const SNACKBAR_TYPES: {
+  INFO: 'info';
+  ERROR: 'error';
+  WARNING: 'warn';
+  MESSAGE: 'message';
+  SUCCESS: 'success';
+} = {
+  INFO: 'info',
+  ERROR: 'error',
+  WARNING: 'warn',
+  MESSAGE: 'message',
+  SUCCESS: 'success'
+};
+
+export const SNACKBAR_POSITIONS: {
+  TOP_LEFT: 'top-left';
+  TOP_RIGHT: 'top-right';
+  TOP_CENTER: 'top-center';
+  BOTTOM_LEFT: 'bottom-left';
+  BOTTOM_RIGHT: 'bottom-right';
+  BOTTOM_CENTER: 'bottom-center';
+} = {
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  TOP_CENTER: 'top-center',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  BOTTOM_CENTER: 'bottom-center'
+};