From a51ba0630df6b38ceff8585064edd8d952ce4986 Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Tue, 12 Nov 2019 12:50:29 +0000
Subject: [PATCH] Move alert to portal

---
 src/alertContext/AlertContext.js              |  9 +++++---
 .../__tests__/AlertContext.test.js            |  2 ++
 .../__snapshots__/AlertContext.test.js.snap   | 21 ++++++++++++-------
 src/bootstrap/Alert.css                       | 17 ---------------
 src/bootstrap/Alert.js                        |  9 ++------
 5 files changed, 24 insertions(+), 34 deletions(-)
 delete mode 100644 src/bootstrap/Alert.css

diff --git a/src/alertContext/AlertContext.js b/src/alertContext/AlertContext.js
index 48f64bd..c262dba 100644
--- a/src/alertContext/AlertContext.js
+++ b/src/alertContext/AlertContext.js
@@ -9,6 +9,7 @@ import React, { useState, useContext, useCallback } from "react";
 import PropTypes from "prop-types";
 
 import { Alert, ALERT_TYPES } from "bootstrap/Alert";
+import { Portal } from "utils/Portal";
 
 const AlertContext = React.createContext();
 
@@ -31,9 +32,11 @@ function AlertContextProvider({ children }) {
     return (
         <>
             {alert && (
-                <Alert type={alert.type} onDismiss={dismissAlert} floating>
-                    {alert.message}
-                </Alert>
+                <Portal containerId="alert-container">
+                    <Alert type={alert.type} onDismiss={dismissAlert}>
+                        {alert.message}
+                    </Alert>
+                </Portal>
             )}
             <AlertContext.Provider value={[setAlertWrapper, dismissAlert]}>
                 { children }
diff --git a/src/alertContext/__tests__/AlertContext.test.js b/src/alertContext/__tests__/AlertContext.test.js
index 7801731..012b692 100644
--- a/src/alertContext/__tests__/AlertContext.test.js
+++ b/src/alertContext/__tests__/AlertContext.test.js
@@ -12,8 +12,10 @@ 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>
         </>
diff --git a/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap b/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap
index 9f13a93..8117aa5 100644
--- a/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap
+++ b/src/alertContext/__tests__/__snapshots__/AlertContext.test.js.snap
@@ -3,15 +3,19 @@
 exports[`AlertContext should render alert 1`] = `
 <div>
   <div
-    class="alert alert-dismissible alert-danger fixed-top floating-alert"
+    id="alert-container"
   >
-    <button
-      class="close"
-      type="button"
+    <div
+      class="alert alert-dismissible alert-danger"
     >
-      ×
-    </button>
-    Alert content
+      <button
+        class="close"
+        type="button"
+      >
+        ×
+      </button>
+      Alert content
+    </div>
   </div>
   <button>
     Set alert
@@ -24,6 +28,9 @@ exports[`AlertContext should render alert 1`] = `
 
 exports[`AlertContext should render component without alert 1`] = `
 <div>
+  <div
+    id="alert-container"
+  />
   <button>
     Set alert
   </button>
diff --git a/src/bootstrap/Alert.css b/src/bootstrap/Alert.css
deleted file mode 100644
index 520d6fb..0000000
--- a/src/bootstrap/Alert.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.floating-alert {
-    /* Display alert above other components */
-    z-index: 2000;
-}
-
-@media(max-width: 768px) {
-    .floating-alert {
-        margin: 0.5rem;
-    }
-}
-
-@media(min-width: 769px) {
-    .floating-alert {
-        width: 75%;
-        margin: 0.5rem auto;
-    }
-}
diff --git a/src/bootstrap/Alert.js b/src/bootstrap/Alert.js
index a63a6f7..5671f89 100644
--- a/src/bootstrap/Alert.js
+++ b/src/bootstrap/Alert.js
@@ -8,8 +8,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import "./Alert.css";
-
 export const ALERT_TYPES = Object.freeze({
     PRIMARY: "primary",
     SECONDARY: "secondary",
@@ -31,20 +29,17 @@ Alert.propTypes = {
     ]),
     /** onDismiss handler. */
     onDismiss: PropTypes.func,
-    /** Floating alerts stay on top of the page */
-    floating: PropTypes.bool,
 };
 
 Alert.defaultProps = {
     type: ALERT_TYPES.DANGER,
-    floating: false,
 };
 
 export function Alert({
-    type, onDismiss, floating, children,
+    type, onDismiss, children,
 }) {
     return (
-        <div className={`alert alert-dismissible alert-${type} ${floating ? "fixed-top floating-alert" : ""}`.trim()}>
+        <div className={`alert alert-dismissible alert-${type}`}>
             {onDismiss ? <button type="button" className="close" onClick={onDismiss}>&times;</button> : false}
             {children}
         </div>