fix: Use the event bus for toast instead of a context (#126)

* Use the event bus for toast instead of a context

* Added a dedicated toast listener function

samples/basic/local-module/src/MessagePage.tsx

@@ -1,4 +1,4 @@
-import { useApplicationEventBusDispatcher, useShowToast } from "@basic/shared";
+import { useApplicationEventBusDispatcher, useToast } from "@basic/shared";
 import { useCallback, useState, type ChangeEvent } from "react";
 import { Link } from "react-router-dom";
 
@@ -10,7 +10,7 @@ export function MessagePage() {
     }, []);
 
     const dispatch = useApplicationEventBusDispatcher();
-    const showToast = useShowToast();
+    const showToast = useToast();
 
     const handleSendMessage = useCallback(() => {
         dispatch("write-to-host", message);

samples/basic/shared/src/eventBus.ts

@@ -1,6 +1,6 @@
 import { useEventBusDispatcher, useEventBusListener } from "@squide/firefly";
 
-export type MessageTypes = "write-to-host";
+export type MessageTypes = "write-to-host" | "show-toast";
 
 export const useApplicationEventBusDispatcher = useEventBusDispatcher<MessageTypes>;
 export const useApplicationEventBusListener = useEventBusListener<MessageTypes>;

samples/basic/shared/src/index.ts

@@ -1,8 +1,8 @@
 export * from "./BackgroundColorContext.ts";
-export * from "./ToastContext.ts";
 export * from "./appContext.ts";
 export * from "./eventBus.ts";
 export * from "./isNetlify.ts";
 export * from "./layouts/registerLayouts.tsx";
 export * from "./session.ts";
+export * from "./useToast.ts";
 

samples/basic/shared/src/useToast.ts

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useApplicationEventBusDispatcher, useApplicationEventBusListener } from "./eventBus.ts";
+
+export function useToast() {
+    const dispatch = useApplicationEventBusDispatcher();
+
+    return useCallback((message: string) => {
+        dispatch("show-toast", message);
+    }, [dispatch]);
+}
+
+export function useToastListener(callback: (message: string) => void) {
+    useApplicationEventBusListener("show-toast", callback as (message: unknown) => void);
+}

samples/basic/shell/src/AppRouter.tsx

@@ -1,6 +1,8 @@
+import { useToastListener } from "@basic/shared";
 import { AppRouter as FireflyAppRouter } from "@squide/firefly";
+import { useCallback } from "react";
 import { AppRouterErrorBoundary } from "./AppRouterErrorBoundary.tsx";
-import { ToastProvider } from "./toast.tsx";
+import { ToastContainer, useToastContainer } from "./toast.tsx";
 
 function Loading() {
     return (
@@ -9,13 +11,21 @@ function Loading() {
 }
 
 export function AppRouter() {
+    const { toastState, addToast } = useToastContainer();
+
+    const handleShowToast = useCallback((message: string) => {
+        addToast(message);
+    }, [addToast]);
+
+    useToastListener(handleShowToast);
+
     return (
-        <ToastProvider>
+        <ToastContainer state={toastState}>
             <FireflyAppRouter
                 fallbackElement={<Loading />}
                 errorElement={<AppRouterErrorBoundary />}
                 waitForMsw={false}
             />
-        </ToastProvider>
+        </ToastContainer>
     );
 }

samples/basic/shell/src/toast.tsx

@@ -1,4 +1,3 @@
-import { ToastContext } from "@basic/shared";
 import type { AriaToastProps, AriaToastRegionProps } from "@react-aria/toast";
 import { useToast, useToastRegion } from "@react-aria/toast";
 import { useToastState, type ToastState, type ToastStateProps } from "@react-stately/toast";
@@ -50,26 +49,36 @@ export function ToastRegion<T extends ReactNode>({ state, ...props }: ToastRegio
     );
 }
 
-export interface ToastProviderProps extends ToastStateProps {
-    children: ReactNode;
-}
+export type UseToastContainerProps = ToastStateProps;
 
-export function ToastProvider({ children, ...props }: ToastProviderProps) {
+export function useToastContainer(props: UseToastContainerProps = {}) {
     const state = useToastState<ReactNode>({
         maxVisibleToasts: 5,
         ...props
     });
 
-    const showToast = useCallback((text: string) => {
-        state.add(text, { timeout: 5000 });
+    const addToast = useCallback((message: string) => {
+        state.add(message, { timeout: 5000 });
     }, [state]);
 
+    return {
+        toastState: state,
+        addToast
+    };
+}
+
+export interface ToastContainerProps extends AriaToastRegionProps {
+    children: ReactNode;
+    state: ToastState<ReactNode>;
+}
+
+export function ToastContainer({ children, state, ...props }: ToastContainerProps) {
     return (
-        <ToastContext.Provider value={{ showToast }}>
+        <>
             {children}
             {state.visibleToasts.length > 0 && (
-                <ToastRegion {...props} state={state} />
+                <ToastRegion state={state} {...props} />
             )}
-        </ToastContext.Provider>
+        </>
     );
 }