Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Improve hiding of UI flash messages (#1728)

Browse source 
Use the React hooks for modifying state rather than operating directly
on the DOM for hiding of the flash messages.
This commit is contained in:
Zach Wasserman 2021-08-26 17:07:16 -07:00 committed by GitHub
parent aa588bc1ae
commit 780a728f05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
frontend/components/flash_messages/FlashMessage/FlashMessage.jsx
View file

@ -1,7 +1,6 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import { connect } from "react-redux";
import notificationInterface from "interfaces/notification";
import FleetIcon from "components/icons/FleetIcon";
@ -22,26 +21,27 @@ const FlashMessage = ({
[`${baseClass}--full-width`]: fullWidth,
});
useEffect(() => {
if (alertType === "success" && isVisible) {
setTimeout(() => {
const elt = document.getElementById(`${klass}`);
if (!elt) {
return;
}
elt.style.visibility = "visible";
}, 0); // Ensures successive, success alerts are visible
setTimeout(() => {
const elt = document.getElementById(`${klass}`);
if (!elt) {
return;
}
elt.style.visibility = "hidden";
}, 4000); // Hides success alerts after 4 seconds
}
});
const [hide, setHide] = useState(false);
if (!isVisible) {
// This useEffect handles hiding successful flash messages after a 4s timeout. By putting the
// notification in the dependency array, we can properly reset whenever a new flash message comes through.
useEffect(() => {
// Any time this hook runs, we reset the hide to false (so that subsequent messages that will be
// using this same component instance will be visible).
setHide(false);
if (alertType === "success" && isVisible) {
// After 4 seconds, set hide to true.
const timer = setTimeout(() => setHide(true), 4000);
// Return a cleanup function that will clear this reset, in case another render happens
// after this. We want that render to set a new timeout (if needed).
return () => clearTimeout(timer);
}
return undefined; // No cleanup when we don't set a timeout.
}, [notification, alertType, isVisible, setHide]);
if (hide || !isVisible) {
return false;
}