From 6c36a0babcb812069f3c23acc202a582d123ec43 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 27 Jul 2021 16:19:52 -0400
Subject: [PATCH] Flash messages: Can be successive and do not re-render page
 upon closing (#1482)

---
 changes/issue-1475-flash-message-bug           |  1 +
 .../FlashMessage/FlashMessage.jsx              | 18 ++++++++++++------
 .../UserManagementPage/UserManagementPage.jsx  |  3 ++-
 3 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 changes/issue-1475-flash-message-bug

diff --git a/changes/issue-1475-flash-message-bug b/changes/issue-1475-flash-message-bug
new file mode 100644
index 0000000000..5a19645ff2
--- /dev/null
+++ b/changes/issue-1475-flash-message-bug
@@ -0,0 +1 @@
+* Does not re-render page to display flash message
\ No newline at end of file
diff --git a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx b/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
index f95adc9353..d874ef174f 100644
--- a/frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
+++ b/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`}>
diff --git a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
index 156f5b8a2e..50ed0ade01 100644
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
+++ b/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(() => {