Refactor React Context with Redux Took Kit #5
@ -1,7 +0,0 @@
|
|||||||
import { NotificationContextType } from './types';
|
|
||||||
|
|
||||||
const makeDefaultNotification = (): NotificationContextType => ({
|
|
||||||
addNotificationToQueue: (_) => {},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default makeDefaultNotification
|
|
@ -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>
|
|
||||||
}
|
|
@ -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
|
|
||||||
}
|
|
@ -7,7 +7,6 @@ import { entities } from '../wailsjs/wailsjs/go/models'
|
|||||||
import '../styles/globals.css'
|
import '../styles/globals.css'
|
||||||
import { NavigationProvider } from '../context/Navigation/provider'
|
import { NavigationProvider } from '../context/Navigation/provider'
|
||||||
import { mainPages, workspaces } from '../context/Navigation/types'
|
import { mainPages, workspaces } from '../context/Navigation/types'
|
||||||
import { NotificationProvider } from '../context/Notification/provider'
|
|
||||||
import { Providers } from '../redux/provider'
|
import { Providers } from '../redux/provider'
|
||||||
|
|
||||||
const initialProjectProps = {
|
const initialProjectProps = {
|
||||||
@ -25,11 +24,9 @@ export default function MainAppLayout({ Component, pageProps }: AppProps) {
|
|||||||
return <div className='min-h-screen' >
|
return <div className='min-h-screen' >
|
||||||
<NavigationProvider navigationProps={initialNavigationProps}>
|
<NavigationProvider navigationProps={initialNavigationProps}>
|
||||||
<ProjectProvider projectProps={initialProjectProps}>
|
<ProjectProvider projectProps={initialProjectProps}>
|
||||||
<NotificationProvider>
|
|
||||||
<Providers>
|
<Providers>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</Providers>
|
</Providers>
|
||||||
</NotificationProvider>
|
|
||||||
</ProjectProvider>
|
</ProjectProvider>
|
||||||
</NavigationProvider>
|
</NavigationProvider>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user