refactor: upgrade react toastify to v9

Author: eshankvaish

package-lock.json

@@ -64,7 +64,7 @@
         "prettier": "^3.1.1",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
-        "react-toastify": "^8.2.0",
+        "react-toastify": "9.1.3",
         "typescript": "5.5.4",
         "vite": "5.4.2",
         "vite-plugin-dts": "4.0.3",

package.json

@@ -0,0 +1,20 @@
+import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
+import { ComponentSizeType } from '@Shared/constants'
+import { ToastProps } from './types'
+
+export const ToastContent = ({ title, description, buttonProps }: Omit<ToastProps, 'variant'>) => (
+    <div className="flexbox-col dc__gap-8">
+        <div className="flexbox-col dc__gap-4">
+            <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__truncate">{title}</h3>
+            {description && <p className="fs-12 fw-4 lh-18 m-0 dc__truncate--clamp-6">{description}</p>}
+        </div>
+        {buttonProps && (
+            <Button
+                {...buttonProps}
+                variant={ButtonVariantType.text}
+                size={ComponentSizeType.small}
+                style={ButtonStyleType.neutral}
+            />
+        )}
+    </div>
+)

src/Shared/Services/ToastManager/ToastContent.tsx

@@ -1,13 +1,28 @@
-import { ReactElement } from 'react'
-import { ToastOptions } from 'react-toastify'
+import { ReactElement, MouseEventHandler } from 'react'
+import { ToastOptions, ToastContainerProps } from 'react-toastify'
 import { ReactComponent as ICInfoFilled } from '@Icons/ic-info-filled.svg'
 import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
 import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICLocked } from '@Icons/ic-locked.svg'
 import { ReactComponent as ICSparkles } from '@Icons/ic-sparkles.svg'
+import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ToastVariantType } from './types'
 
+export const TOAST_BASE_CONFIG: ToastContainerProps = {
+    autoClose: 5000,
+    hideProgressBar: false,
+    pauseOnHover: true,
+    pauseOnFocusLoss: true,
+    closeOnClick: false,
+    newestOnTop: true,
+    toastClassName: 'custom-toast',
+    bodyClassName: 'custom-toast__body',
+    closeButton: ({ closeToast }) => (
+        <ICClose className="icon-dim-24 p-4 flex dc__no-shrink fcn-0" onClick={closeToast as MouseEventHandler} />
+    ),
+}
+
 export const TOAST_VARIANT_TO_CONFIG_MAP: Record<
     ToastVariantType,
     {

src/Shared/Services/ToastManager/constants.tsx

@@ -1,3 +1,3 @@
-export { default as ToastManager } from './toastManager.service'
+export { default as ToastManager, ToastManagerContainer } from './toastManager.service'
 export { ToastVariantType } from './types'
 export type { ToastProps } from './types'

src/Shared/Services/ToastManager/index.ts

@@ -1,50 +1,14 @@
-import { toast, ToastOptions } from 'react-toastify'
+import { toast, ToastContainer, ToastOptions } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
-
-import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
-import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
-import { ComponentSizeType } from '@Shared/constants'
 import { ToastProps, ToastVariantType } from './types'
+import { TOAST_BASE_CONFIG, TOAST_VARIANT_TO_CONFIG_MAP } from './constants'
+import { ToastContent } from './ToastContent'
 import './toastManager.scss'
-import { TOAST_VARIANT_TO_CONFIG_MAP } from './constants'
-
-export const ToastContent = ({ title, description, buttonProps }: Omit<ToastProps, 'variant'>) => (
-    <div className="flexbox-col dc__gap-8">
-        <div className="flexbox-col dc__gap-4">
-            <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__truncate">{title}</h3>
-            {description && <p className="fs-12 fw-4 lh-18 m-0 dc__truncate--clamp-6">{description}</p>}
-        </div>
-        {buttonProps && (
-            <Button
-                {...buttonProps}
-                variant={ButtonVariantType.text}
-                size={ComponentSizeType.small}
-                style={ButtonStyleType.neutral}
-            />
-        )}
-    </div>
-)
 
 class ToastManager {
     // eslint-disable-next-line no-use-before-define
     static #instance: ToastManager
 
-    constructor() {
-        toast.configure({
-            autoClose: 5000,
-            hideProgressBar: false,
-            pauseOnHover: true,
-            pauseOnFocusLoss: true,
-            closeOnClick: false,
-            newestOnTop: true,
-            toastClassName: 'custom-toast',
-            bodyClassName: 'custom-toast__body',
-            closeButton: ({ closeToast }) => (
-                <ICClose className="icon-dim-24 p-4 flex dc__no-shrink fcn-0" onClick={closeToast} />
-            ),
-        })
-    }
-
     public static get instance(): ToastManager {
         if (!ToastManager.#instance) {
             ToastManager.#instance = new ToastManager()
@@ -68,4 +32,6 @@ class ToastManager {
     }
 }
 
+export const ToastManagerContainer = () => <ToastContainer {...TOAST_BASE_CONFIG} />
+
 export default ToastManager.instance