From e416e44998921c8ee6cfde8038a82e451c51d271 Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Thu, 11 Jul 2024 09:25:33 -0600 Subject: [PATCH] Simplify ws updating (#12390) * Simplify ws updating * Simplify return values --- web/src/api/ws.tsx | 12 +++++++----- web/src/components/navigation/Bottombar.tsx | 2 +- web/src/hooks/use-camera-activity.ts | 7 ++----- web/src/hooks/use-stats.ts | 2 +- web/src/views/live/LiveDashboardView.tsx | 5 +---- web/src/views/system/CameraMetrics.tsx | 2 +- web/src/views/system/GeneralMetrics.tsx | 2 +- 7 files changed, 14 insertions(+), 18 deletions(-) diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx index f68d2b4a36..afcbaa0c04 100644 --- a/web/src/api/ws.tsx +++ b/web/src/api/ws.tsx @@ -11,6 +11,7 @@ import { import { FrigateStats } from "@/types/stats"; import useSWR from "swr"; import { createContainer } from "react-tracked"; +import useDeepMemo from "@/hooks/use-deep-memo"; type Update = { topic: string; @@ -206,18 +207,18 @@ export function useFrigateEvents(): { payload: FrigateEvent } { return { payload: JSON.parse(payload as string) }; } -export function useFrigateReviews(): { payload: FrigateReview } { +export function useFrigateReviews(): FrigateReview { const { value: { payload }, } = useWs("reviews", ""); - return { payload: JSON.parse(payload as string) }; + return useDeepMemo(JSON.parse(payload as string)); } -export function useFrigateStats(): { payload: FrigateStats } { +export function useFrigateStats(): FrigateStats { const { value: { payload }, } = useWs("stats", ""); - return { payload: JSON.parse(payload as string) }; + return useDeepMemo(JSON.parse(payload as string)); } export function useInitialCameraState( @@ -230,7 +231,8 @@ export function useInitialCameraState( value: { payload }, send: sendCommand, } = useWs("camera_activity", "onConnect"); - const data = JSON.parse(payload as string); + + const data = useDeepMemo(JSON.parse(payload as string)); useEffect(() => { let listener = undefined; diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx index c3a5ff1cab..b6432bd6cb 100644 --- a/web/src/components/navigation/Bottombar.tsx +++ b/web/src/components/navigation/Bottombar.tsx @@ -48,7 +48,7 @@ function StatusAlertNav({ className }: StatusAlertNavProps) { const { data: initialStats } = useSWR("stats", { revalidateOnFocus: false, }); - const { payload: latestStats } = useFrigateStats(); + const latestStats = useFrigateStats(); const { messages, addMessage, clearMessages } = useContext( StatusBarMessagesContext, diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts index 815bd12f35..7b6128acee 100644 --- a/web/src/hooks/use-camera-activity.ts +++ b/web/src/hooks/use-camera-activity.ts @@ -27,13 +27,10 @@ export function useCameraActivity( // init camera activity - const { payload: initialCameraState } = useInitialCameraState( + const { payload: updatedCameraState } = useInitialCameraState( camera.name, revalidateOnFocus, ); - - const updatedCameraState = useDeepMemo(initialCameraState); - useEffect(() => { if (updatedCameraState) { setObjects(updatedCameraState.objects); @@ -140,7 +137,7 @@ export function useCameraActivity( activeTracking: hasActiveObjects, activeMotion: detectingMotion ? detectingMotion === "ON" - : initialCameraState?.motion === true, + : updatedCameraState?.motion === true, objects, offline, }; diff --git a/web/src/hooks/use-stats.ts b/web/src/hooks/use-stats.ts index 099f057c0e..23b8193274 100644 --- a/web/src/hooks/use-stats.ts +++ b/web/src/hooks/use-stats.ts @@ -97,7 +97,7 @@ export function useAutoFrigateStats() { const { data: initialStats } = useSWR("stats", { revalidateOnFocus: false, }); - const { payload: latestStats } = useFrigateStats(); + const latestStats = useFrigateStats(); const stats = useMemo(() => { if (latestStats) { diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx index 06b238689f..82fbfb523c 100644 --- a/web/src/views/live/LiveDashboardView.tsx +++ b/web/src/views/live/LiveDashboardView.tsx @@ -31,7 +31,6 @@ import { cn } from "@/lib/utils"; import { LivePlayerError, LivePlayerMode } from "@/types/live"; import { FaCompress, FaExpand } from "react-icons/fa"; import { useResizeObserver } from "@/hooks/resize-observer"; -import useDeepMemo from "@/hooks/use-deep-memo"; type LiveDashboardViewProps = { cameras: CameraConfig[]; @@ -64,14 +63,12 @@ export default function LiveDashboardView({ // recent events - const { payload: reviewTopic } = useFrigateReviews(); + const eventUpdate = useFrigateReviews(); const { data: allEvents, mutate: updateEvents } = useSWR([ "review", { limit: 10, severity: "alert" }, ]); - const eventUpdate = useDeepMemo(reviewTopic); - useEffect(() => { if (!eventUpdate) { return; diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx index e54b64ddef..9b53413f2a 100644 --- a/web/src/views/system/CameraMetrics.tsx +++ b/web/src/views/system/CameraMetrics.tsx @@ -26,7 +26,7 @@ export default function CameraMetrics({ ); const [statsHistory, setStatsHistory] = useState([]); - const { payload: updatedStats } = useFrigateStats(); + const updatedStats = useFrigateStats(); useEffect(() => { if (initialStats == undefined || initialStats.length == 0) { diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx index 76bf9a5374..fa23d47b0f 100644 --- a/web/src/views/system/GeneralMetrics.tsx +++ b/web/src/views/system/GeneralMetrics.tsx @@ -40,7 +40,7 @@ export default function GeneralMetrics({ ); const [statsHistory, setStatsHistory] = useState([]); - const { payload: updatedStats } = useFrigateStats(); + const updatedStats = useFrigateStats(); useEffect(() => { if (initialStats == undefined || initialStats.length == 0) {