feat: add support for multiple mounted instances of ConfirmComponentHost (#4)

Author: atheck

README.md

@@ -24,7 +24,6 @@ import { ConfirmComponentHost } from "react-confirm-service";
             <Notification
                 isOpen={props.isVisible}
                 onClose={props.onClose}
-                ...
             >
                 {props.message}
             </Notification>
@@ -34,24 +33,33 @@ import { ConfirmComponentHost } from "react-confirm-service";
                 isOpen={props.isOpen}
                 title={props.title}
             >
-                // render content, buttons, ...
+                {/* render content, buttons, ... */}
             </Dialog>
         )}
         renderChoice={props => {
-            const options = props.options.map(option => <li key={option.key} onClick={() => props.onConfirm(option)}>{option.key}</li>);
-
-            <Dialog
-                isOpen={props.isOpen}
-                title={props.title}
-            >
-                <>
-                    <ul>
-                        {options}
-                    </ul>
-                    <button onClick={props.onCancel}>Cancel</button>
-                </>
-            </Dialog>
-        )}
+            const options = props.options.map(option => (
+                <li
+                    key={option.key}
+                    onClick={() => props.onConfirm(option)}
+                >
+                    {option.key}
+                </li>
+            ));
+
+            return (
+                <Dialog
+                    isOpen={props.isOpen}
+                    title={props.title}
+                >
+                    <>
+                        <ul>
+                            {options}
+                        </ul>
+                        <button onClick={props.onCancel}>Cancel</button>
+                    </>
+                </Dialog>
+            );
+        }}
     />
 </MyApp>
 ~~~
@@ -101,6 +109,8 @@ The `ConfirmComponentHost` accepts the following props:
 | strings | no | Takes an object to provide default values for `yes`, `no`, and `cancel` button captions. Use this to localize these texts. |
 | alertDurations | no | You can provide an object to set the durations of an alert for each severity in ms. The defaults are: info: 3000, success: 3000, warning: 10000, error: 10000. |
 
+You can use the `ConfirmComponentHost` in multiple places in your application. The `ConfirmService` will use the last one which was mounted.
+
 ### renderAlert
 
 `renderAlert` is a function with one parameter of type `AlertRenderProps`:

src/Component.tsx

@@ -76,6 +76,8 @@ const defaultDurations: AlertDurations = {
 };
 
 class ConfirmComponentHost extends React.Component<Props, State> {
+    private readonly alert: Service.Handlers;
+
     public constructor (props: Props) {
         super(props);
 
@@ -106,15 +108,20 @@ class ConfirmComponentHost extends React.Component<Props, State> {
                 },
             },
         };
+
+        this.alert = {
+            alert: this.showAlert,
+            confirm: this.showConfirm,
+            choose: this.showChoice,
+        };
     }
 
     public override componentDidMount (): void {
-        Service.initAlerts(this.showAlert, this.showConfirm, this.showChoice);
+        Service.addHandlers(this.alert);
     }
 
-    // eslint-disable-next-line class-methods-use-this
     public override componentWillUnmount (): void {
-        Service.initAlerts(null, null, null);
+        Service.removeHandlers(this.alert);
     }
 
     public override render (): React.ReactNode {

src/Service.ts

@@ -51,14 +51,29 @@ interface ChooseOptions<TData extends Option = Option> {
     cancelCaption?: string,
 }
 
-let globalAlert: AlertFunc | null;
-let globalConfirm: ConfirmFunc | null;
-let globalChoose: ChooseFunc | null;
-
-function initAlerts (alert: AlertFunc | null, confirm: ConfirmFunc | null, choose: ChooseFunc | null): void {
-    globalAlert = alert;
-    globalConfirm = confirm;
-    globalChoose = choose;
+interface Handlers {
+    alert: AlertFunc,
+    confirm: ConfirmFunc,
+    choose: ChooseFunc,
+}
+
+const globalHandlers: Handlers [] = [];
+
+function addHandlers (handlers: Handlers): void {
+    removeHandlers(handlers);
+    globalHandlers.push(handlers);
+}
+
+function removeHandlers (handlers: Handlers): void {
+    const index = globalHandlers.indexOf(handlers);
+
+    if (index >= 0) {
+        globalHandlers.splice(index, 1);
+    }
+}
+
+function getCurrentHandlers (): Handlers | undefined {
+    return globalHandlers.at(-1);
 }
 
 const ConfirmService = {
@@ -68,29 +83,35 @@ const ConfirmService = {
      * @param severity The severity of the alert.
      */
     alert (this: void, message: string, severity: AlertSeverity): void {
-        if (globalAlert) {
-            globalAlert(message, severity);
-        } else {
+        const handlers = getCurrentHandlers();
+
+        if (!handlers) {
             throw new Error("ConfirmService is not initialized.");
         }
+
+        handlers.alert(message, severity);
     },
     /**
      * Shows a confirmation.
      * @param options The options for the confirmation.
      */
     async confirm (this: void, options: ConfirmOptions): Promise<void> {
         return new Promise((resolve, reject) => {
-            if (globalConfirm) {
-                globalConfirm(options, result => {
-                    if (result) {
-                        resolve();
-                    } else {
-                        reject(new Error("Canceled"));
-                    }
-                });
-            } else {
+            const handlers = getCurrentHandlers();
+
+            if (!handlers) {
                 reject(new Error("ConfirmService is not initialized."));
+
+                return;
             }
+
+            handlers.confirm(options, result => {
+                if (result) {
+                    resolve();
+                } else {
+                    reject(new Error("Canceled"));
+                }
+            });
         });
     },
 
@@ -101,29 +122,35 @@ const ConfirmService = {
      */
     async choose<TData extends Option> (this: void, options: ChooseOptions<TData>): Promise<TData> {
         return new Promise<TData>((resolve, reject) => {
-            if (globalChoose) {
-                globalChoose(options as ChooseOptions, result => {
-                    if (result) {
-                        resolve(result as TData);
-                    } else {
-                        reject(new Error("Canceled"));
-                    }
-                });
-            } else {
+            const handlers = getCurrentHandlers();
+
+            if (!handlers) {
                 reject(new Error("ConfirmService is not initialized."));
+
+                return;
             }
+
+            handlers.choose(options as ChooseOptions, result => {
+                if (result) {
+                    resolve(result as TData);
+                } else {
+                    reject(new Error("Canceled"));
+                }
+            });
         });
     },
 };
 
 export type {
     AlertSeverity,
+    Handlers,
     ConfirmOptions,
     Option,
     ChooseOptions,
 };
 
 export {
-    initAlerts,
+    addHandlers,
+    removeHandlers,
     ConfirmService,
 };

tests/Service.spec.ts

@@ -1,16 +1,21 @@
-import { ChooseOptions, ConfirmOptions, ConfirmService, initAlerts, Option } from "../src/Service";
+import { addHandlers, ChooseOptions, ConfirmOptions, ConfirmService, Handlers, Option, removeHandlers } from "../src/Service";
 
 describe("Service", () => {
     const mockAlert = jest.fn();
     const mockConfirm = jest.fn();
     const mockChoose = jest.fn();
+    const alert: Handlers = {
+        alert: mockAlert,
+        confirm: mockConfirm,
+        choose: mockChoose,
+    };
 
     beforeEach(() => {
         mockAlert.mockReset();
         mockConfirm.mockReset();
         mockChoose.mockReset();
 
-        initAlerts(mockAlert, mockConfirm, mockChoose);
+        addHandlers(alert);
     });
 
     describe("alert", () => {
@@ -22,13 +27,13 @@ describe("Service", () => {
             ConfirmService.alert(message, severity);
 
             // assert
-            expect(mockAlert).toHaveBeenCalledTimes(1);
+            expect(alert.alert).toHaveBeenCalledTimes(1);
             expect(mockAlert).toHaveBeenCalledWith(message, severity);
         });
 
         it("throws if not initialized", () => {
             // arrange
-            initAlerts(null, mockConfirm, mockChoose);
+            removeHandlers(alert);
 
             // act
             const fails = (): void => ConfirmService.alert("Message", "info");
@@ -82,7 +87,7 @@ describe("Service", () => {
 
         it("throws if not initialized", async () => {
             // arrange
-            initAlerts(mockAlert, null, mockChoose);
+            removeHandlers(alert);
 
             // act
             const fails = async (): Promise<void> => ConfirmService.confirm({
@@ -149,7 +154,7 @@ describe("Service", () => {
 
         it("throws if not initialized", async () => {
             // arrange
-            initAlerts(mockAlert, mockConfirm, null);
+            removeHandlers(alert);
 
             // act
             const fails = async (): Promise<Option> => ConfirmService.choose({