Move alert to portal

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 }

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>
         </>

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>

src/bootstrap/Alert.css

@@ -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;
-    }
-}

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>