From 1e04d40d7dd74c0f1d30994c03df9f02eee02d4b Mon Sep 17 00:00:00 2001
From: Joshua Shoemaker <joshuashoemaker@outlook.com>
Date: Sat, 2 Sep 2023 14:06:55 -0500
Subject: [PATCH] refact: removed Notification Context

---
 .../Notification/makeDefaultNotification.ts   |   7 --
 frontend/context/Notification/provider.tsx    | 113 ------------------
 frontend/context/Notification/types.ts        |  14 ---
 frontend/pages/_app.tsx                       |   3 -
 4 files changed, 137 deletions(-)
 delete mode 100644 frontend/context/Notification/makeDefaultNotification.ts
 delete mode 100644 frontend/context/Notification/provider.tsx
 delete mode 100644 frontend/context/Notification/types.ts

diff --git a/frontend/context/Notification/makeDefaultNotification.ts b/frontend/context/Notification/makeDefaultNotification.ts
deleted file mode 100644
index a668a31..0000000
--- a/frontend/context/Notification/makeDefaultNotification.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { NotificationContextType } from './types';
-
-const makeDefaultNotification = (): NotificationContextType => ({
-  addNotificationToQueue: (_) => {},
-})
-
-export default makeDefaultNotification
diff --git a/frontend/context/Notification/provider.tsx b/frontend/context/Notification/provider.tsx
deleted file mode 100644
index 491c824..0000000
--- a/frontend/context/Notification/provider.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-'use client'
-
-import { createContext, Fragment, ReactNode, useContext, useEffect, useState } from 'react'
-import { XMarkIcon, InformationCircleIcon, ExclamationTriangleIcon, ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { NotificationContextType, NotificationProps } from './types'
-import makeDefaultNotification from './makeDefaultNotification'
-import { Transition } from '@headlessui/react'
-
-const NotificationContext = createContext<NotificationContextType>(makeDefaultNotification())
-
-export function useNotification() {
-  return useContext(NotificationContext)
-}
-
-const notificationTimeInMilliseconds = 3000
-const queue: NotificationProps[] = []
-
-const renderIcon = (level: NotificationProps['level'] = 'info') => {
-  switch (level) {
-    default: return <InformationCircleIcon className='w-6 h-6 text-blue-400' />
-    case 'info': return <InformationCircleIcon className='w-6 h-6 text-blue-400' />
-    case 'warning': return <ExclamationTriangleIcon className='w-6 h-6 text-orange-400' />
-    case 'error': return <ExclamationCircleIcon className='w-6 h-6 text-red-600' />
-  }
-}
-
-type Props = { children: ReactNode }
-export function NotificationProvider({ children }: Props) {
-  const [currentNotification, setCurrentNotification] = useState<NotificationProps | undefined>()
-
-  const addNotificationToQueue = (notificationProps: NotificationProps) => {
-    if (!queue.length) {
-      queue.push(notificationProps)
-      setCurrentNotification(notificationProps)
-    } else {
-      queue.push(notificationProps)
-    }
-  }
-
-  const dismissCurrentNotification = () => {
-    queue.shift()
-    setCurrentNotification(queue[0])
-  }
-
-  useEffect(() => {
-    if (!queue.length) return
-    setTimeout(dismissCurrentNotification, notificationTimeInMilliseconds)
-  }, [currentNotification])
-
-  const handleOnClick = () => {
-    if (currentNotification?.onActionClickCallback) currentNotification?.onActionClickCallback()
-    if (currentNotification?.closeOnAction) dismissCurrentNotification()
-  }
-
-
-  const value = { addNotificationToQueue }
-
-  return <NotificationContext.Provider value={value}>
-    { children }
-    <>
-      <div
-        aria-live="assertive"
-        className="pointer-events-none absolute block top-0 left-0 w-full h-full"
-      >
-        <div className="absolute items-center" style={{ bottom: '12px', right: '16px' }}>
-          <Transition
-            show={!!currentNotification}
-            as={Fragment}
-            enter="transform ease-out duration-1300 transition"
-            enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-            enterTo="translate-y-0 opacity-100 sm:translate-x-0"
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
-              <div className="p-4">
-                <div className="flex items-center">
-                  {renderIcon(currentNotification?.level)}
-                  <div className="flex w-0 content-center flex-1 justify-between">
-                    <p className="w-0 flex-1 text-sm font-medium text-gray-900 ml-2">{currentNotification?.message}</p>
-                    {currentNotification?.actionButtonText ? <button
-                      type="button"
-                      className="ml-3 flex-shrink-0 rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                      onClick={() => handleOnClick()}
-                    >
-                      {currentNotification?.actionButtonText}
-                    </button>
-                      : <></>
-                    }
-                  </div>
-                  <div className="ml-4 flex flex-shrink-0">
-                    <button
-                      type="button"
-                      className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                      onClick={() => {
-                        dismissCurrentNotification()
-                      }}
-                    >
-                      <span className="sr-only">Close</span>
-                      <XMarkIcon className="h-5 w-5" aria-hidden="true" />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Transition>
-        </div>
-      </div>
-    </>
-
-  </NotificationContext.Provider>
-}
diff --git a/frontend/context/Notification/types.ts b/frontend/context/Notification/types.ts
deleted file mode 100644
index 8d03953..0000000
--- a/frontend/context/Notification/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export type NotificationLevel = 'info' | 'warning' | 'error'
-
-export type NotificationProps = {
-  shouldShow?: boolean,
-  message: string,
-  actionButtonText?: string,
-  onActionClickCallback?: Function,
-  closeOnAction?: boolean,
-  level?: NotificationLevel,
-}
-
-export type NotificationContextType = {
-  addNotificationToQueue: (notificationProps: NotificationProps) => void
-}
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index 87452cb..9bdb5ac 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -7,7 +7,6 @@ import { entities } from '../wailsjs/wailsjs/go/models'
 import '../styles/globals.css'
 import { NavigationProvider } from '../context/Navigation/provider'
 import { mainPages, workspaces } from '../context/Navigation/types'
-import { NotificationProvider } from '../context/Notification/provider'
 import { Providers } from '../redux/provider'
 
 const initialProjectProps = {
@@ -25,11 +24,9 @@ export default function MainAppLayout({ Component, pageProps }: AppProps) {
   return <div className='min-h-screen' >
     <NavigationProvider navigationProps={initialNavigationProps}>
       <ProjectProvider projectProps={initialProjectProps}>
-        <NotificationProvider>
           <Providers>
             <Component {...pageProps} />
           </Providers>
-        </NotificationProvider>
       </ProjectProvider>
     </NavigationProvider>
   </div>