Global alert

src/alertContext/AlertContext.js

@@ -5,10 +5,10 @@
  * See /LICENSE for more information.
  */
 
-import React, { useState } from "react";
+import React, { useState, useContext, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { Alert } from "bootstrap/Alert";
+import { Alert, ALERT_TYPES } from "bootstrap/Alert";
 
 const AlertContext = React.createContext();
 
@@ -22,14 +22,28 @@ AlertContextProvider.propTypes = {
 function AlertContextProvider({ children }) {
     const [alert, setAlert] = useState(null);
 
+    const setAlertWrapper = useCallback((message, type = ALERT_TYPES.DANGER) => {
+        setAlert({ message, type });
+    }, [setAlert]);
+
+    const dismissAlert = useCallback(() => setAlert(null), [setAlert]);
+
     return (
         <>
-            {alert && <Alert type="danger" message={alert} onDismiss={() => setAlert(null)} />}
-            <AlertContext.Provider value={setAlert}>
+            {alert && (
+                <Alert type={alert.type} onDismiss={dismissAlert} floating>
+                    {alert.message}
+                </Alert>
+            )}
+            <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
                 { children }
             </AlertContext.Provider>
         </>
     );
 }
 
-export { AlertContext, AlertContextProvider };
+function useAlert() {
+    return useContext(AlertContext);
+}
+
+export { AlertContext, AlertContextProvider, useAlert };

src/alertContext/__tests__/AlertContext.test.js

@@ -5,14 +5,19 @@
  * See /LICENSE for more information.
  */
 
-import React, { useContext } from "react";
+import React from "react";
 import { render, getByText, queryByText, fireEvent } from "customTestRender";
 
-import { AlertContext, AlertContextProvider } from "../AlertContext";
+import { useAlert, AlertContextProvider } from "../AlertContext";
 
 function AlertTest() {
-    const setAlert = useContext(AlertContext);
-    return <button onClick={() => setAlert("Alert content")}>Set alert</button>;
+    const [setAlert, dismissAlert] = useAlert();
+    return (
+        <>
+            <button onClick={() => setAlert("Alert content")}>Set alert</button>
+            <button onClick={dismissAlert}>Dismiss alert</button>
+        </>
+    );
 };
 
 describe("AlertContext", () => {
@@ -36,7 +41,7 @@ describe("AlertContext", () => {
         expect(componentContainer).toMatchSnapshot();
     });
 
-    it("should dismiss alert", () => {
+    it("should dismiss alert with alert button", () => {
         fireEvent.click(getByText(componentContainer, "Set alert"));
         // Alert is present
         expect(getByText(componentContainer, "Alert content")).toBeDefined();
@@ -45,4 +50,14 @@ describe("AlertContext", () => {
         // Alert is gone
         expect(queryByText(componentContainer, "Alert content")).toBeNull();
     });
+
+    it("should dismiss alert with external button", () => {
+        fireEvent.click(getByText(componentContainer, "Set alert"));
+        // Alert is present
+        expect(getByText(componentContainer, "Alert content")).toBeDefined();
+
+        fireEvent.click(getByText(componentContainer, "Dismiss alert"));
+        // Alert is gone
+        expect(queryByText(componentContainer, "Alert content")).toBeNull();
+    });
 });

src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -3,7 +3,7 @@
 exports[`AlertContext should render alert 1`] = `
 <div>
   <div
-    class="alert alert-dismissible alert-danger"
+    class="alert alert-dismissible alert-danger fixed-top floating-alert"
   >
     <button
       class="close"
@@ -16,6 +16,9 @@ exports[`AlertContext should render alert 1`] = `
   <button>
     Set alert
   </button>
+  <button>
+    Dismiss alert
+  </button>
 </div>
 `;
 
@@ -24,5 +27,8 @@ exports[`AlertContext should render component without alert 1`] = `
   <button>
     Set alert
   </button>
+  <button>
+    Dismiss alert
+  </button>
 </div>
 `;