diff --git a/web/src/ToastNotifications.jsx b/web/src/ToastNotifications.jsx index cdddacd..93eb0d1 100644 --- a/web/src/ToastNotifications.jsx +++ b/web/src/ToastNotifications.jsx @@ -1,5 +1,4 @@ -import { useState } from 'react'; -import { ACTION_DISMISS_FLUX_EVENT } from './redux'; +import { useState, useEffect } from 'react'; import { XMarkIcon } from '@heroicons/react/24/outline'; import { Transition } from '@headlessui/react' import { NavigationButton } from './NavigationButton'; @@ -9,23 +8,33 @@ function ToastNotifications(props) { let reduxState = store.getState(); const [fluxEvents, setFluxEvents] = useState(reduxState.fluxEvents); - const [dismissedFluxEvents, setDismissedFluxEvents] = useState(reduxState.dismissedFluxEvents); + const [dismissed, setDismissed] = useState(JSON.parse(localStorage.getItem("dismissed")) ?? []) store.subscribe(() => setFluxEvents(reduxState.fluxEvents)); - store.subscribe(() => setDismissedFluxEvents(reduxState.dismissedFluxEvents)); - const warningEvents = fluxEvents.filter(e => e.type === "Warning" && !dismissedFluxEvents.some(de => isSameEvent(e, de))).slice(0, 3); + useEffect(() => { + localStorage.setItem("dismissed", JSON.stringify(dismissed)); + }, [dismissed]); + + useEffect(() => { + setDismissed(dismissed.filter(d => { + const parsed = Date.parse(d.firstTimestamp, "yyyy-MM-dd'T'HH:mm:ss"); + const day = 24 * 60 * 60 * 1000; + return (Date.now() - parsed) < day + })) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const dismiss = (event) => { - store.dispatch({ - type: ACTION_DISMISS_FLUX_EVENT, payload: event - }); + setDismissed([...dismissed, event]); } + const warningEvents = fluxEvents.filter(e => e.type === "Warning" && !dismissed.some(d => isSameEvent(e, d))).slice(0, 3); + return (
{warningEvents.map((e, index) => { return ( - + ) })}
@@ -33,7 +42,7 @@ function ToastNotifications(props) { } function ToastElement(props) { - const { event, index, dismiss, handleNavigationSelect } = props; + const { event, dismiss, handleNavigationSelect } = props; return ( -
+
handleNavigationSelect(event.involvedObjectKind === "Kustomization" ? "Kustomizations" : "Sources", event.involvedObjectNamespace, event.involvedObject, event.involvedObjectKind)}> - {event.involvedObjectKind} {event.involvedObjectNamespace}/{event.involvedObject}: {event.message} +

{event.involvedObjectKind} {event.involvedObjectNamespace}/{event.involvedObject}: {event.message}