Rewrite websocket to use tracked state instead of context

web/package.json

@@ -51,6 +51,7 @@
  "react-hook-form": "^7.48.2",
  "react-icons": "^4.12.0",
  "react-router-dom": "^6.20.1",
+ "react-tracked": "^1.7.11",
  "react-transition-group": "^4.4.5",
  "react-use-websocket": "^4.5.0",
  "recoil": "^0.7.7",

web/src/api/index.tsx

@@ -1,9 +1,8 @@
 import { baseUrl } from "./baseUrl";
-import useSWR, { SWRConfig } from "swr";
+import { SWRConfig } from "swr";
 import { WsProvider } from "./ws";
 import axios from "axios";
 import { ReactNode } from "react";
-import { FrigateConfig } from "@/types/frigateConfig";
 
 axios.defaults.baseURL = `${baseUrl}api/`;
 
@@ -38,9 +37,7 @@ type WsWithConfigType = {
 };
 
 function WsWithConfig({ children }: WsWithConfigType) {
- const { data } = useSWR<FrigateConfig>("config");
-
- return data ? <WsProvider config={data}>{children}</WsProvider> : children;
+ return <WsProvider>{children}</WsProvider>;
 }
 
 export function useApiHost() {

web/src/api/ws.tsx

@@ -1,149 +1,104 @@
 import { baseUrl } from "./baseUrl";
-import {
- ReactNode,
- createContext,
- useCallback,
- useContext,
- useEffect,
- useReducer,
-} from "react";
-import { produce, Draft } from "immer";
+import { useCallback, useEffect, useState } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { FrigateEvent, FrigateReview, ToggleableSetting } from "@/types/ws";
 import { FrigateStats } from "@/types/stats";
+import useSWR from "swr";
+import { createContainer } from "react-tracked";
 
-type ReducerState = {
- [topic: string]: {
- lastUpdate: number;
- payload: any;
- retain: boolean;
- };
-};
-
-type ReducerAction = {
+type Update = {
  topic: string;
  payload: any;
  retain: boolean;
 };
 
-const initialState: ReducerState = {
- _initial_state: {
- lastUpdate: 0,
- payload: "",
- retain: false,
- },
+type WsState = {
+ [topic: string]: any;
 };
 
-type WebSocketContextProps = {
- state: ReducerState;
- readyState: ReadyState;
- sendJsonMessage: (message: any) => void;
-};
+type useValueReturn = [WsState, (update: Update) => void];
 
-export const WS = createContext<WebSocketContextProps>({
- state: initialState,
- readyState: ReadyState.CLOSED,
- sendJsonMessage: () => {},
-});
-
-export const useWebSocketContext = (): WebSocketContextProps => {
- const context = useContext(WS);
- if (!context) {
- throw new Error(
- "useWebSocketContext must be used within a WebSocketProvider"
- );
- }
- return context;
-};
+function useValue(): useValueReturn {
+ // basic config
+ const { data: config } = useSWR<FrigateConfig>("config", {
+ revalidateOnFocus: false,
+ });
+ const wsUrl = `${baseUrl.replace(/^http/, "ws")}ws`;
 
-function reducer(state: ReducerState, action: ReducerAction): ReducerState {
- switch (action.topic) {
- default:
- return produce(state, (draftState: Draft<ReducerState>) => {
- let parsedPayload = action.payload;
- try {
- parsedPayload = action.payload && JSON.parse(action.payload);
- } catch (e) {}
- draftState[action.topic] = {
- lastUpdate: Date.now(),
- payload: parsedPayload,
- retain: action.retain,
- };
- });
- }
-}
+ // main state
+ const [wsState, setWsState] = useState<WsState>({});
 
-type WsProviderType = {
- config: FrigateConfig;
- children: ReactNode;
- wsUrl?: string;
-};
+ useEffect(() => {
+ if (!config) {
+ return;
+ }
 
-export function WsProvider({
- config,
- children,
- wsUrl = `${baseUrl.replace(/^http/, "ws")}ws`,
-}: WsProviderType) {
- const [state, dispatch] = useReducer(reducer, initialState);
+ const cameraStates: WsState = {};
 
+ Object.keys(config.cameras).forEach((camera) => {
+ const { name, record, detect, snapshots, audio } = config.cameras[camera];
+ cameraStates[`${name}/recordings/state`] = record.enabled ? "ON" : "OFF";
+ cameraStates[`${name}/detect/state`] = detect.enabled ? "ON" : "OFF";
+ cameraStates[`${name}/snapshots/state`] = snapshots.enabled
+ ? "ON"
+ : "OFF";
+ cameraStates[`${name}/audio/state`] = audio.enabled ? "ON" : "OFF";
+ });
+
+ setWsState({ ...wsState, ...cameraStates });
+ }, [config]);
+
+ // ws handler
  const { sendJsonMessage, readyState } = useWebSocket(wsUrl, {
  onMessage: (event) => {
- dispatch(JSON.parse(event.data));
+ const data: Update = JSON.parse(event.data);
+
+ if (data) {
+ setWsState({ ...wsState, [data.topic]: data.payload });
+ }
  },
- onOpen: () => dispatch({ topic: "", payload: "", retain: false }),
+ onOpen: () => {},
  shouldReconnect: () => true,
  });
 
- useEffect(() => {
- Object.keys(config.cameras).forEach((camera) => {
- const { name, record, detect, snapshots, audio } = config.cameras[camera];
- dispatch({
- topic: `${name}/recordings/state`,
- payload: record.enabled ? "ON" : "OFF",
- retain: false,
- });
- dispatch({
- topic: `${name}/detect/state`,
- payload: detect.enabled ? "ON" : "OFF",
- retain: false,
- });
- dispatch({
- topic: `${name}/snapshots/state`,
- payload: snapshots.enabled ? "ON" : "OFF",
- retain: false,
- });
- dispatch({
- topic: `${name}/audio/state`,
- payload: audio.enabled ? "ON" : "OFF",
- retain: false,
- });
- });
- }, [config]);
-
- return (
- <WS.Provider value={{ state, readyState, sendJsonMessage }}>
- {children}
- </WS.Provider>
+ const setState = useCallback(
+ (message: Update) => {
+ if (readyState === ReadyState.OPEN) {
+ sendJsonMessage({
+ topic: message.topic,
+ payload: message.payload,
+ retain: message.retain,
+ });
+ }
+ },
+ [readyState, sendJsonMessage]
  );
+
+ return [wsState, setState];
 }
 
+export const {
+ Provider: WsProvider,
+ useTrackedState: useWsState,
+ useUpdate: useWsUpdate,
+} = createContainer(useValue, { defaultState: {}, concurrentMode: true });
+
 export function useWs(watchTopic: string, publishTopic: string) {
- const { state, readyState, sendJsonMessage } = useWebSocketContext();
+ const state = useWsState();
+ const sendJsonMessage = useWsUpdate();
 
- const value = state[watchTopic] || { payload: null };
+ const value = { payload: state[watchTopic] || null };
 
  const send = useCallback(
  (payload: any, retain = false) => {
- if (readyState === ReadyState.OPEN) {
- sendJsonMessage({
- topic: publishTopic || watchTopic,
- payload,
- retain,
- });
- }
+ sendJsonMessage({
+ topic: publishTopic || watchTopic,
+ payload,
+ retain,
+ });
  },
- [sendJsonMessage, readyState, watchTopic, publishTopic]
+ [sendJsonMessage, watchTopic, publishTopic]
  );
 
  return { value, send };
@@ -219,21 +174,21 @@ export function useFrigateEvents(): { payload: FrigateEvent } {
  const {
  value: { payload },
  } = useWs("events", "");
- return { payload };
+ return { payload: JSON.parse(payload) };
 }
 
 export function useFrigateReviews(): { payload: FrigateReview } {
  const {
  value: { payload },
  } = useWs("reviews", "");
- return { payload };
+ return { payload: JSON.parse(payload) };
 }
 
 export function useFrigateStats(): { payload: FrigateStats } {
  const {
  value: { payload },
  } = useWs("stats", "");
- return { payload };
+ return { payload: JSON.parse(payload) };
 }
 
 export function useMotionActivity(camera: string): { payload: string } {