diff --git a/keep-ui/app/alerts/alerts.tsx b/keep-ui/app/alerts/alerts.tsx index e975da424..3aa011e64 100644 --- a/keep-ui/app/alerts/alerts.tsx +++ b/keep-ui/app/alerts/alerts.tsx @@ -19,6 +19,7 @@ import AlertChangeStatusModal from "./alert-change-status-modal"; import { useAlertPolling } from "utils/hooks/usePusher"; import NotFound from "@/app/not-found"; import { useMounted } from "@/shared/lib/hooks/useMounted"; +import { useSession } from "next-auth/react"; const defaultPresets: Preset[] = [ { @@ -102,7 +103,6 @@ export default function Alerts({ presetName }: AlertsProps) { (preset) => preset.name.toLowerCase() === decodeURIComponent(presetName) ); - const isMounted = useMounted(); const { data: pollAlerts } = useAlertPolling(); const { data: alerts = [], @@ -111,7 +111,9 @@ export default function Alerts({ presetName }: AlertsProps) { error: alertsError, } = usePresetAlerts(selectedPreset ? selectedPreset.name : ""); - const isLoading = isAsyncLoading || !isMounted; + // const isMounted = useMounted(); + const { status: sessionStatus } = useSession(); + const isLoading = isAsyncLoading || sessionStatus === "loading"; useEffect(() => { const fingerprint = searchParams?.get("alertPayloadFingerprint"); diff --git a/keep-ui/utils/hooks/useAlerts.ts b/keep-ui/utils/hooks/useAlerts.ts index 28fa523d0..4bbe5fd65 100644 --- a/keep-ui/utils/hooks/useAlerts.ts +++ b/keep-ui/utils/hooks/useAlerts.ts @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { AlertDto } from "app/alerts/models"; import { useSession } from "next-auth/react"; import useSWR, { SWRConfiguration } from "swr"; @@ -53,40 +53,37 @@ export const useAlerts = () => { presetName: string, options: SWRConfiguration = { revalidateOnFocus: false } ) => { - const [alertsMap, setAlertsMap] = useState>( - new Map() - ); - const { data: alertsFromEndpoint = [], mutate, isLoading, - error, + error: alertsError, } = useAllAlerts(presetName, options); - useEffect(() => { - if (alertsFromEndpoint.length) { - const newAlertsMap = new Map( - alertsFromEndpoint.map((alertFromEndpoint) => [ - alertFromEndpoint.fingerprint, - { - ...alertFromEndpoint, - lastReceived: toDateObjectWithFallback( - alertFromEndpoint.lastReceived - ), - }, - ]) - ); - - setAlertsMap(newAlertsMap); + const alertsValue = useMemo(() => { + if (!alertsFromEndpoint.length) { + return []; } + + const alertsMap = new Map( + alertsFromEndpoint.map((alertFromEndpoint) => [ + alertFromEndpoint.fingerprint, + { + ...alertFromEndpoint, + lastReceived: toDateObjectWithFallback( + alertFromEndpoint.lastReceived + ), + }, + ]) + ); + return Array.from(alertsMap.values()); }, [alertsFromEndpoint]); return { - data: Array.from(alertsMap.values()), + data: alertsValue, mutate: mutate, isLoading: isLoading, - error: error, + error: alertsError, }; }; diff --git a/keep-ui/utils/hooks/usePresets.ts b/keep-ui/utils/hooks/usePresets.ts index 00e49588f..a0a0d76e2 100644 --- a/keep-ui/utils/hooks/usePresets.ts +++ b/keep-ui/utils/hooks/usePresets.ts @@ -8,8 +8,7 @@ import { useLocalStorage } from "utils/hooks/useLocalStorage"; import { useConfig } from "./useConfig"; import useSWRSubscription from "swr/subscription"; import { useWebsocket } from "./usePusher"; -import { usePathname, useSearchParams } from "next/navigation"; -import moment from "moment"; +import { useSearchParams } from "next/navigation"; export const usePresets = (type?: string, useFilters?: boolean) => { const { data: session } = useSession();