fix: Improve notification clearing (#1398)

RedHatInsights · Dec 2, 2021 · 0f98a25 · 0f98a25
1 parent fbaaaf9
commit 0f98a25
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js b/src/Components/SmartComponents/CVEDetailsPage/CVEDetailsPage.js
@@ -21,6 +21,7 @@ import GroupedCVELabels from '../../PresentationalComponents/Snippets/GroupedCVE
 import ErrorHandler from '../../PresentationalComponents/ErrorHandler/ErrorHandler';
 import { useRbac } from '../../../Helpers/Hooks';
 import { NotAuthorized } from '../../PresentationalComponents/EmptyStates/EmptyStates';
+import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 
 export const CVEPageContext = React.createContext({ isLoading: true });
 
@@ -77,6 +78,7 @@ const CVEDetailsPage = ({ match }) => {
     useEffect(() => {
         return () => {
             dispatch(clearCveStore());
+            dispatch(clearNotifications());
         };
     }, [dispatch]);
 

diff --git a/src/Components/SmartComponents/Modals/BaseModal.js b/src/Components/SmartComponents/Modals/BaseModal.js
@@ -1,10 +1,9 @@
 import { Button, FormGroup, FormSelect, FormSelectOption, Modal, TextArea } from '@patternfly/react-core';
 import {
-    addNotification,
-    clearNotifications
+    addNotification
 } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import propTypes from 'prop-types';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { ReadOnlyNotification, STATUS_OPTIONS } from '../../../Helpers/constants';
 import messages from '../../../Messages';
@@ -64,12 +63,6 @@ export const BaseModal = ({ items, title, onSave, onSuccessNotification, onFailu
         handleClose();
     };
 
-    useEffect(() => {
-        return () => {
-            dispatch(clearNotifications());
-        };
-    }, [dispatch]);
-
     return (
         <Modal
             variant="small"

diff --git a/src/Components/SmartComponents/SystemDetailsPage/SystemDetailsPage.js b/src/Components/SmartComponents/SystemDetailsPage/SystemDetailsPage.js
@@ -1,8 +1,8 @@
 import { Main } from '@redhat-cloud-services/frontend-components/Main';
-import { addNotification } from '@redhat-cloud-services/frontend-components-notifications/redux';
+import { addNotification, clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 import propTypes from 'prop-types';
 import React, { useEffect } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { fetchSystemDetails, optOutSystemsAction } from '../../../Store/Actions/Actions';
 import { systemDetailsPageStore } from '../../../Store/Reducers/SystemDetailsPageStore';
@@ -15,12 +15,20 @@ import messages from '../../../Messages';
 import { AppInfo, DetailWrapper, InventoryDetailHead } from '@redhat-cloud-services/frontend-components/Inventory';
 
 const InventoryDetail = ({ fetchSystemDetails, systemDetails = {}, optOutSystem, match, addNotification, intl, errors }) => {
+    const dispatch = useDispatch();
+
     const inventoryId = match.params.inventoryId;
 
     useEffect(() => {
         fetchSystemDetails(inventoryId);
     }, [fetchSystemDetails, inventoryId]);
 
+    useEffect(() => {
+        return () => {
+            dispatch(clearNotifications());
+        };
+    }, [dispatch]);
+
     const notifications = systemName => ({
         exclude: {
             success: {
@@ -67,6 +75,7 @@ const InventoryDetail = ({ fetchSystemDetails, systemDetails = {}, optOutSystem,
     };
 
     const { opt_out: isOptOut = false, entity, loaded } = systemDetails;
+
     return (
         <DetailWrapper>
             <Header

diff --git a/src/Components/SmartComponents/SystemsPage/SystemsPage.js b/src/Components/SmartComponents/SystemsPage/SystemsPage.js
@@ -24,6 +24,7 @@ import { useGetEntities, useOptOutSystems } from '../../../Helpers/Hooks';
 import * as APIHelper from '../../../Helpers/APIHelper';
 import { EmptyStateNoSystems } from '../../PresentationalComponents/EmptyStates/EmptyStates';
 import ColumnManagementModal from '../Modals/ColumnManagementModal';
+import { clearNotifications } from '@redhat-cloud-services/frontend-components-notifications/redux';
 
 const SystemsPage = () => {
     const inventoryRef = React.createRef();
@@ -55,6 +56,7 @@ const SystemsPage = () => {
         return () => {
             dispatch(clearSystemStore());
             dispatch(clearInventoryStore());
+            dispatch(clearNotifications());
         };
     }, [dispatch]);