use zustand for toast state

Author: david-crespo

app/hooks/use-toast/ToastStack.tsx

@@ -2,14 +2,11 @@ import { animated, useTransition } from '@react-spring/web'
 
 import { Toast } from '@oxide/ui'
 
-import type { Toast as ToastModel } from './types'
+import { useToastStore } from './index'
 
-interface ToastStackProps {
-  toasts: ToastModel[]
-  onRemoveToast: (id: string) => void
-}
+export function ToastStack() {
+  const { toasts, remove } = useToastStore(({ toasts, remove }) => ({ toasts, remove }))
 
-export const ToastStack = ({ toasts, onRemoveToast }: ToastStackProps) => {
   const transition = useTransition(toasts, {
     keys: (toast) => toast.id,
     from: { opacity: 0, y: 10, scale: 95 },
@@ -32,7 +29,7 @@ export const ToastStack = ({ toasts, onRemoveToast }: ToastStackProps) => {
             key={item.id}
             {...item.options}
             onClose={() => {
-              onRemoveToast(item.id)
+              remove(item.id)
               item.options.onClose?.()
             }}
           />

app/hooks/use-toast/index.tsx

@@ -1,31 +1,23 @@
-import type { FC } from 'react'
-import { createContext, useContext, useState } from 'react'
 import { v4 as uuid } from 'uuid'
+import create from 'zustand'
 
-import { ToastStack } from './ToastStack'
-import type { Toast } from './types'
+import type { ToastProps } from '@oxide/ui'
 
-type AddToast = (options: Toast['options']) => void
-
-const ToastContext = createContext<AddToast>(() => {})
-
-export const useToast = () => useContext(ToastContext)
-
-export const ToastProvider: FC = ({ children }) => {
-  const [toasts, setToasts] = useState<Toast[]>([])
+type Toast = {
+  id: string
+  options: Optional<ToastProps, 'onClose'>
+}
 
-  const addToast: AddToast = (options) => {
-    setToasts((toasts) => [...toasts, { id: uuid(), options }])
-  }
+type StoreState = {
+  toasts: Toast[]
+  add: (options: Toast['options']) => void
+  remove: (id: Toast['id']) => void
+}
 
-  const removeToast = (id: string) => {
-    setToasts((toasts) => toasts.filter((t) => t.id !== id))
-  }
+export const useToastStore = create<StoreState>((set) => ({
+  toasts: [],
+  add: (options) => set(({ toasts }) => ({ toasts: [...toasts, { id: uuid(), options }] })),
+  remove: (id) => set(({ toasts }) => ({ toasts: toasts.filter((t) => t.id !== id) })),
+}))
 
-  return (
-    <ToastContext.Provider value={addToast}>
-      {children}
-      <ToastStack toasts={toasts} onRemoveToast={removeToast} />
-    </ToastContext.Provider>
-  )
-}
+export const useToast = () => useToastStore(({ add }) => add)

app/hooks/use-toast/types.ts

@@ -5,7 +5,8 @@ import ReactDOM from 'react-dom'
 import { SkipLink } from '@oxide/ui'
 
 import { ErrorBoundary } from './components/ErrorBoundary'
-import { QuickActions, ReduceMotion, ToastProvider } from './hooks'
+import { QuickActions, ReduceMotion } from './hooks'
+import { ToastStack } from './hooks/use-toast/ToastStack'
 import { Router } from './routes'
 
 if (process.env.SHA) {
@@ -28,16 +29,15 @@ const queryClient = new QueryClient({
 function render() {
   ReactDOM.render(
     <StrictMode>
-      <ToastProvider>
-        <QueryClientProvider client={queryClient}>
-          <ErrorBoundary>
-            <QuickActions />
-            <SkipLink id="skip-nav" />
-            <ReduceMotion />
-            <Router />
-          </ErrorBoundary>
-        </QueryClientProvider>
-      </ToastProvider>
+      <QueryClientProvider client={queryClient}>
+        <ErrorBoundary>
+          <QuickActions />
+          <SkipLink id="skip-nav" />
+          <ReduceMotion />
+          <Router />
+        </ErrorBoundary>
+      </QueryClientProvider>
+      <ToastStack />
     </StrictMode>,
     document.getElementById('root')
   )