feat: add useNotification wrapper

Signed-off-by: Jeroen Branje <[email protected]>
ASCS-eV · Jan 31, 2024 · f53799e · f53799e
1 parent 4ebce65
commit f53799e
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 24 deletions.
diff --git a/apps/envited.ascs.digital/app/layout.tsx b/apps/envited.ascs.digital/app/layout.tsx
@@ -1,4 +1,4 @@
-import { NotifiactionContainer } from '../modules/Notifications'
+import { NotificationContainer } from '../modules/Notifications'
 import { Providers } from '../modules/Theme/Providers'
 import './global.css'
 
@@ -22,7 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta name="theme-color" content="#ffffff"></meta>
       </head>
       <body className="bg-white dark:bg-gray-800">
-        <NotifiactionContainer />
+        <NotificationContainer />
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/apps/envited.ascs.digital/common/notifications/useNotification.hook.test.ts b/apps/envited.ascs.digital/common/notifications/useNotification.hook.test.ts
@@ -1,7 +1,7 @@
 /**
  * @jest-environment node
  */
-import { useNotification } from './useNotification.hook'
+import { notification } from './useNotification.hook'
 
 jest.mock('react-toastify', () => ({
   toast: {
@@ -14,13 +14,14 @@ jest.mock('react-toastify', () => ({
 describe('common/notification', () => {
   describe('info', () => {
     it('should return as expected', async () => {
-      const { info } = useNotification()
+      const toastifyStub = jest.fn().mockImplementation(x => x)
+
+      const { info } = notification(toastifyStub)
 
       const result = info('INFO_TOAST')
 
       // when ... we want to get the notification
       // then ... it returns the content as expected
-      expect(result).toHaveBeenCalledWith()
       expect(result).toEqual('INFO_TOAST')
     })
   })
@@ -33,13 +34,12 @@ describe('common/notification', () => {
         warning: jest.fn().mockImplementation(x => x),
       }
 
-      const { success } = useNotification()
+      const { success } = notification(toastifyStub)
 
       const result = success('SUCCESS_TOAST')
 
       // when ... we want to get the notification
       // then ... it returns the content as expected
-
       expect(result).toEqual('SUCCESS_TOAST')
     })
   })
@@ -52,7 +52,7 @@ describe('common/notification', () => {
         warning: jest.fn().mockImplementation(x => x),
       }
 
-      const { warning } = useNotification()
+      const { warning } = notification(toastifyStub)
 
       const result = warning('WARNING_TOAST')
 
@@ -70,7 +70,7 @@ describe('common/notification', () => {
         warning: jest.fn().mockImplementation(x => x),
       }
 
-      const { error } = useNotification()
+      const { error } = notification(toastifyStub)
 
       const result = error('ERROR_TOAST')
 

diff --git a/apps/envited.ascs.digital/common/notifications/useNotification.hook.ts b/apps/envited.ascs.digital/common/notifications/useNotification.hook.ts
@@ -1,16 +1,15 @@
 import { toast } from 'react-toastify'
 
-// export const notification = (notify: typeof toast) => {
-export const useNotification = () => {
-  const info = (content: string) => toast(content)
+export const notification = (notify: typeof toast) => {
+  const info = (content: string) => notify(content)
 
-  const success = (content: string) => toast.success(content)
+  const success = (content: string) => notify.success(content)
 
-  const error = (content: string) => toast.error(content)
+  const error = (content: string) => notify.error(content)
 
-  const warning = (content: string) => toast.warning(content)
+  const warning = (content: string) => notify.warning(content)
 
   return { info, success, error, warning }
 }
 
-// export const useNotification = notification(toast)
+export const useNotification = () => notification(toast)
diff --git a/apps/envited.ascs.digital/modules/Notifications/Notifications.tsx b/apps/envited.ascs.digital/modules/Notifications/Notifications.tsx
@@ -5,7 +5,7 @@ import React, { FC } from 'react'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
 
-export const NotifiactionContainer: FC = () => (
+export const NotificationContainer: FC = () => (
   <ToastContainer
     toastClassName="dark:bg-gray-900 dark:text-gray-300"
     closeButton={({ closeToast }) => (

diff --git a/apps/envited.ascs.digital/modules/Notifications/index.ts b/apps/envited.ascs.digital/modules/Notifications/index.ts
@@ -1 +1 @@
-export { NotifiactionContainer } from './Notifications'
+export { NotificationContainer } from './Notifications'
diff --git a/package-lock.json b/package-lock.json
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { NotifiactionContainer } from './Notifications'
		export { NotificationContainer } from './Notifications'