Flash messages: Can be successive and do not re-render page upon closing (#1482)

changes/issue-1475-flash-message-bug

@@ -0,0 +1 @@
+* Does not re-render page to display flash message

frontend/components/flash_messages/FlashMessage/FlashMessage.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
@@ -21,6 +21,17 @@ const FlashMessage = ({
     [`${baseClass}--full-width`]: fullWidth,
   });
 
+  useEffect(() => {
+    if (alertType === "success" && isVisible) {
+      setTimeout(function () {
+        document.getElementById(`${klass}`).style.visibility = "visible";
+      }, 0); // Ensures successive, success alerts are visible
+      setTimeout(function () {
+        document.getElementById(`${klass}`).style.visibility = "hidden";
+      }, 4000); // Hides success alerts after 4 seconds
+    }
+  });
+
   if (!isVisible) {
     return false;
   }
@@ -28,11 +39,6 @@ const FlashMessage = ({
   const alertIcon =
     alertType === "success" ? "success-check" : "warning-filled";
 
-  // Success alerts will not be visible after 4 seconds
-  if (alertType === "success") {
-    setTimeout(onRemoveFlash, 4000);
-  }
-
   return (
     <div className={klass} id={klass}>
       <div className={`${baseClass}__content`}>

frontend/pages/admin/UserManagementPage/UserManagementPage.jsx

@@ -248,9 +248,10 @@ export class UserManagementPage extends Component {
     const { toggleResetSessionsUserModal } = this;
     dispatch(userActions.deleteSessions(userEditing))
       .then(() => {
-        dispatch(renderFlash("success", "Sessions reset"));
         if (currentUser.id === userEditing.id) {
           dispatch(push(LOGIN));
+        } else {
+          dispatch(renderFlash("success", "Sessions reset"));
         }
       })
       .catch(() => {