Move contexts in a context folder

src/context/alertContext/AlertContext.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React, { useState, useContext, useCallback } from "react";
+import PropTypes from "prop-types";
+
+import { Alert, ALERT_TYPES } from "../../bootstrap/Alert";
+import { Portal } from "../../utils/Portal";
+
+AlertContextProvider.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
+    ]),
+};
+
+function AlertContextProvider({ children }) {
+    const { AlertContext } = window;
+    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 && (
+                <Portal containerId="alert-container">
+                    <Alert type={alert.type} onDismiss={dismissAlert}>
+                        {alert.message}
+                    </Alert>
+                </Portal>
+            )}
+            <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
+                {children}
+            </AlertContext.Provider>
+        </>
+    );
+}
+
+function useAlert() {
+    const { AlertContext } = window;
+    return useContext(AlertContext);
+}
+
+export { AlertContextProvider, useAlert };

src/context/alertContext/AlertContext.md

@@ -0,0 +1,5 @@
+It provides alert context to children. `AlertContext` allows using `useAlert` in
+components.
+
+Notice that `<div id="alert-container"/>` should be presented in HTML doc to get
+it work (In reForis it's already done with base Jinja2 templates).

src/context/alertContext/__tests__/AlertContext.test.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import React from "react";
+import { render, getByText, queryByText, fireEvent } from "customTestRender";
+
+import { useAlert, AlertContextProvider } from "../AlertContext";
+
+function AlertTest() {
+    const [setAlert, dismissAlert] = useAlert();
+    // alert-container serves as an output for Portal which renders Alert
+    return (
+        <>
+            <div id="alert-container" />
+            <button onClick={() => setAlert("Alert content")}>Set alert</button>
+            <button onClick={dismissAlert}>Dismiss alert</button>
+        </>
+    );
+}
+
+describe("AlertContext", () => {
+    let componentContainer;
+
+    beforeEach(() => {
+        const { container } = render(
+            <AlertContextProvider>
+                <AlertTest />
+            </AlertContextProvider>
+        );
+        componentContainer = container;
+    });
+
+    it("should render component without alert", () => {
+        expect(componentContainer).toMatchSnapshot();
+    });
+
+    it("should render alert", () => {
+        fireEvent.click(getByText(componentContainer, "Set alert"));
+        expect(componentContainer).toMatchSnapshot();
+    });
+
+    it("should dismiss alert with alert button", () => {
+        fireEvent.click(getByText(componentContainer, "Set alert"));
+        // Alert is present
+        expect(getByText(componentContainer, "Alert content")).toBeDefined();
+
+        fireEvent.click(componentContainer.querySelector(".close"));
+        // 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/context/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertContext should render alert 1`] = `
+<div>
+  <div
+    id="alert-container"
+  >
+    <div
+      class="alert alert-dismissible alert-danger"
+    >
+      <button
+        class="close"
+        type="button"
+      >
+        ×
+      </button>
+      Alert content
+    </div>
+  </div>
+  <button>
+    Set alert
+  </button>
+  <button>
+    Dismiss alert
+  </button>
+</div>
+`;
+
+exports[`AlertContext should render component without alert 1`] = `
+<div>
+  <div
+    id="alert-container"
+  />
+  <button>
+    Set alert
+  </button>
+  <button>
+    Dismiss alert
+  </button>
+</div>
+`;