toast reversion

Author: JoshuaGoldberg

src/frontend/src/components/Toast/ToastProvider.tsx

@@ -5,7 +5,7 @@
 
 // Inspired by https://github.com/ryohey/use-toast-mui
 
-import { createContext, FC, ReactNode, useCallback, useMemo, useState } from 'react';
+import { createContext, FC, ReactNode, useState } from 'react';
 import Toast from './Toast';
 import { AlertColor } from '@mui/material';
 
@@ -22,11 +22,15 @@ export const ToastContext = createContext<{
 
 export const ToastProvider: FC<{ children: ReactNode }> = ({ children, ...props }) => {
   const [toasts, setToasts] = useState<ToastInputs[]>([]);
-  const removeToast = useCallback((key: number) => setToasts((toastList) => toastList.filter((t) => t.key !== key)), []);
-  const addToast = useCallback((toast: ToastInputs) => setToasts((toastList) => [...toastList, toast]), []);
-  const contextValue = useMemo(() => ({ addToast }), [addToast]);
+  const removeToast = (key: number) => setToasts((toastList) => toastList.filter((t) => t.key !== key));
   return (
-    <ToastContext.Provider value={contextValue}>
+    <ToastContext.Provider
+      value={{
+        addToast(toast) {
+          setToasts((toastList) => [...toastList, toast]);
+        }
+      }}
+    >
       {children}
       {toasts.map((t) => (
         <Toast toast={t} key={t.key} onExited={() => removeToast(t.key)} {...props} />

src/frontend/src/hooks/toasts.hooks.ts

@@ -5,7 +5,7 @@
 
 // Inspired by https://github.com/ryohey/use-toast-mui
 
-import { useCallback, useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { AlertColor } from '@mui/material';
 import { ToastContext } from '../components/Toast/ToastProvider';
 
@@ -19,20 +19,22 @@ import { ToastContext } from '../components/Toast/ToastProvider';
  */
 export const useToast = () => {
   const { addToast } = useContext(ToastContext);
-  const fire = useCallback(
-    (message: string, options: { type: AlertColor; autoHideDuration?: number }) => {
-      addToast({ message, ...options, key: new Date().getTime() });
+  const fire = (message: string, options: { type: AlertColor; autoHideDuration?: number }) => {
+    addToast({ message, ...options, key: new Date().getTime() });
+  };
+  return {
+    fire,
+    info(message: string, autoHideDuration?: number) {
+      fire(message, { type: 'info', autoHideDuration });
     },
-    [addToast]
-  );
-  return useMemo(
-    () => ({
-      fire,
-      info: (message: string, autoHideDuration?: number) => fire(message, { type: 'info', autoHideDuration }),
-      success: (message: string, autoHideDuration?: number) => fire(message, { type: 'success', autoHideDuration }),
-      warning: (message: string, autoHideDuration?: number) => fire(message, { type: 'warning', autoHideDuration }),
-      error: (message: string, autoHideDuration?: number) => fire(message, { type: 'error', autoHideDuration })
-    }),
-    [fire]
-  );
+    success(message: string, autoHideDuration?: number) {
+      fire(message, { type: 'success', autoHideDuration });
+    },
+    warning(message: string, autoHideDuration?: number) {
+      fire(message, { type: 'warning', autoHideDuration });
+    },
+    error(message: string, autoHideDuration?: number) {
+      fire(message, { type: 'error', autoHideDuration });
+    }
+  };
 };