From e0cefac557a3e8b59902d2da4495e13a9113c427 Mon Sep 17 00:00:00 2001
From: Ramin <r.rezaie@digikala.com>
Date: Sun, 6 Nov 2022 20:10:12 +0330
Subject: [PATCH] refactor: snackbar

---
 ...nackbarWrapper.jsx => SnackbarWrapper.tsx} | 38 +++++++++++++++----
 src/constants/Snackbar.js                     | 16 --------
 src/constants/Snackbar.ts                     | 29 ++++++++++++++
 3 files changed, 59 insertions(+), 24 deletions(-)
 rename src/components/shared/snackbar/{SnackbarWrapper.jsx => SnackbarWrapper.tsx} (67%)
 delete mode 100644 src/constants/Snackbar.js
 create mode 100644 src/constants/Snackbar.ts

diff --git a/src/components/shared/snackbar/SnackbarWrapper.jsx b/src/components/shared/snackbar/SnackbarWrapper.tsx
similarity index 67%
rename from src/components/shared/snackbar/SnackbarWrapper.jsx
rename to src/components/shared/snackbar/SnackbarWrapper.tsx
index 41106d8..56e8fec 100644
--- a/src/components/shared/snackbar/SnackbarWrapper.jsx
+++ b/src/components/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
deleted file mode 100644
index 97c4e4a..0000000
--- a/src/constants/Snackbar.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export const SNACKBAR_TYPES = {
-  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'
-};
diff --git a/src/constants/Snackbar.ts b/src/constants/Snackbar.ts
new file mode 100644
index 0000000..d7b8ab9
--- /dev/null
+++ 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'
+};