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>