Move ToastContext and utilities to shared components (#33949)

* Move ToastContext and utilities to shared components

* lint

* fix type

* cleanup

* fix broken test

* fix lint

* Add more tests for ToastContext

* Potential fix for pull request finding 'Unused variable, import, function or class'

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

packages/shared-components/src/core/utils/ToastContext.test.tsx

@@ -0,0 +1,68 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, it, expect, vitest } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import { Toast } from "@vector-im/compound-web";
+import React, { type JSX } from "react";
+
+import { ToastContext, ToastRack, useToastContext } from "./ToastContext";
+
+describe("ToastRack", () => {
+    it("should return a toast once one is displayed", () => {
+        const toastRack = new ToastRack();
+        toastRack.displayToast("Hello, world!");
+
+        expect(toastRack.getActiveToast()).toBe("Hello, world!");
+    });
+
+    it("calls update callback when a toast is added", () => {
+        const toastRack = new ToastRack();
+        const updateCallbackFn = vitest.fn();
+        toastRack.setCallback(updateCallbackFn);
+        toastRack.displayToast("Hello, world!");
+
+        expect(updateCallbackFn).toHaveBeenCalled();
+    });
+
+    it("removes toast when remove function is called", () => {
+        const toastRack = new ToastRack();
+        const removeFn = toastRack.displayToast("Hello, world!");
+        expect(toastRack.getActiveToast()).toBe("Hello, world!");
+        removeFn();
+        expect(toastRack.getActiveToast()).toBeUndefined();
+    });
+});
+
+describe("useToastContext", () => {
+    it("should fail if there is no context wrapper", () => {
+        function FailingComponent(): JSX.Element {
+            useToastContext();
+            return <p>Test</p>;
+        }
+        expect(() => render(<FailingComponent />)).toThrow(
+            "Component must be wrapped in <ToastContext.Provider /> to use useToastContext",
+        );
+    });
+    it("should succeed if there is a context wrapper", async () => {
+        function HappyComponent(): JSX.Element {
+            const toaster = useToastContext();
+            return <>{toaster.getActiveToast()}</>;
+        }
+        const rack = new ToastRack();
+        rack.displayToast(<Toast>Toast!</Toast>);
+        const { getByText } = render(
+            <ToastContext value={rack}>
+                <HappyComponent />
+            </ToastContext>,
+        );
+        await waitFor(() => {
+            expect(getByText("Toast!")).toBeInViewport();
+        });
+    });
+});

packages/shared-components/src/core/utils/ToastContext.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type ReactNode, createContext, useCallback, useContext, useEffect, useState, useMemo } from "react";
+
+/**
+ * A ToastContext helps components display any kind of toast message and can be provided
+ * by a parent component such that their children can display toasts, eg. a settings dialog
+ * can provide a ToastContext such that controls within it can display toasts at the bottom
+ * of the dialog.
+ *
+ * It is not (at time of writing) used by the *other* toasts that appear in the top right
+ * corner of the app, however the name 'toast' as used in this class refers to the component
+ * of the same name in compound that it is written to manage.
+ */
+export const ToastContext = createContext<ToastRack | null>(null);
+ToastContext.displayName = "ToastContext";
+
+/**
+ * Returns the ToastRack in context in order to display toasts
+ */
+export function useToastContext(): ToastRack {
+    const rack = useContext(ToastContext);
+    if (!rack) {
+        throw new Error("Component must be wrapped in <ToastContext.Provider /> to use useToastContext");
+    }
+    return rack;
+}
+
+/**
+ * For components that wish to display toasts, return the currently active toast and
+ * the ToastRack object that should be provided to the context
+ */
+export function useActiveToast(): [ReactNode | undefined, ToastRack] {
+    const toastRack = useMemo(() => new ToastRack(), []);
+
+    const [activeToast, setActiveToast] = useState<ReactNode | undefined>(toastRack.getActiveToast());
+
+    const updateCallback = useCallback(() => {
+        setActiveToast(toastRack.getActiveToast());
+    }, [setActiveToast, toastRack]);
+
+    useEffect(() => {
+        toastRack.setCallback(updateCallback);
+    }, [toastRack, updateCallback]);
+
+    return [activeToast, toastRack];
+}
+
+interface DisplayedToast {
+    id: number;
+    contents: ReactNode;
+}
+
+type RemoveCallback = () => void;
+
+export class ToastRack {
+    private currentToast: DisplayedToast | undefined;
+    private updateCallback?: () => void;
+    private idSeq = 0;
+
+    public setCallback(cb: () => void): void {
+        this.updateCallback = cb;
+    }
+
+    public displayToast(contents: ReactNode): RemoveCallback {
+        const newToastId = ++this.idSeq;
+
+        this.currentToast = { id: newToastId, contents: contents };
+        this.updateCallback?.();
+        const removeFn = (): void => {
+            if (this.currentToast?.id === newToastId) {
+                this.currentToast = undefined;
+                this.updateCallback?.();
+            }
+        };
+
+        return removeFn;
+    }
+
+    public getActiveToast(): ReactNode | undefined {
+        return this.currentToast?.contents;
+    }
+}

packages/shared-components/src/index.ts

@@ -86,6 +86,7 @@ export * from "./core/utils/humanize";
 export * from "./core/utils/DateUtils";
 export * from "./core/utils/numbers";
 export * from "./core/utils/FormattingUtils";
+export * from "./core/utils/ToastContext.tsx";
 export * from "./core/i18n/I18nApi";
 export * from "./core/utils/linkify";
 export type * from "./core/userStatus.ts";