feat(web): detect, clips, snapshots toggles

web/src/api/__tests__/index.test.jsx

@@ -1,8 +1,13 @@
 import { h } from 'preact';
+import * as Mqtt from '../mqtt';
 import { ApiProvider, useFetch, useApiHost } from '..';
 import { render, screen } from '@testing-library/preact';
 
 describe('useApiHost', () => {
+  beforeEach(() => {
+    jest.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
+  });
+
   test('is set from the baseUrl', async () => {
     function Test() {
       const apiHost = useApiHost();
@@ -17,26 +22,34 @@ describe('useApiHost', () => {
   });
 });
 
-describe('useFetch', () => {
-  function Test() {
-    const { data, status } = useFetch('/api/tacos');
-    return (
-      <div>
-        <span>{data ? data.returnData : ''}</span>
-        <span>{status}</span>
-      </div>
-    );
-  }
-  test('loads data', async () => {
-    const fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(
-      (url) =>
-        new Promise((resolve) => {
-          setTimeout(() => {
-            resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
-          }, 1);
-        })
-    );
+function Test() {
+  const { data, status } = useFetch('/api/tacos');
+  return (
+    <div>
+      <span>{data ? data.returnData : ''}</span>
+      <span>{status}</span>
+    </div>
+  );
+}
 
+describe('useFetch', () => {
+  let fetchSpy;
+
+  beforeEach(() => {
+    jest.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
+    fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(async (url, options) => {
+      if (url.endsWith('/api/config')) {
+        return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
+        }, 1);
+      });
+    });
+  });
+
+  test('loads data', async () => {
     render(
       <ApiProvider>
         <Test />
@@ -55,14 +68,16 @@ describe('useFetch', () => {
   });
 
   test('sets error if response is not okay', async () => {
-    jest.spyOn(window, 'fetch').mockImplementation(
-      (url) =>
-        new Promise((resolve) => {
-          setTimeout(() => {
-            resolve({ ok: false });
-          }, 1);
-        })
-    );
+    jest.spyOn(window, 'fetch').mockImplementation((url) => {
+      if (url.includes('/config')) {
+        return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ ok: false });
+        }, 1);
+      });
+    });
 
     render(
       <ApiProvider>
@@ -76,15 +91,6 @@ describe('useFetch', () => {
   });
 
   test('does not re-fetch if the query has already been made', async () => {
-    const fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(
-      (url) =>
-        new Promise((resolve) => {
-          setTimeout(() => {
-            resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
-          }, 1);
-        })
-    );
-
     const { rerender } = render(
       <ApiProvider>
         <Test key={0} />
@@ -109,6 +115,7 @@ describe('useFetch', () => {
 
     jest.runAllTimers();
 
-    expect(fetchSpy).toHaveBeenCalledTimes(1);
+    // once for /api/config, once for /api/tacos
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
   });
 });

web/src/api/__tests__/mqtt.test.jsx

@@ -45,7 +45,7 @@ describe('MqttProvider', () => {
 
   test('connects to the mqtt server', async () => {
     render(
-      <MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
         <Test />
       </MqttProvider>
     );
@@ -69,7 +69,7 @@ describe('MqttProvider', () => {
     }
 
     const { rerender } = render(
-      <MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
         <Test />
       </MqttProvider>
     );
@@ -78,7 +78,7 @@ describe('MqttProvider', () => {
       data: JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false }),
     });
     rerender(
-      <MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
         <Test />
       </MqttProvider>
     );
@@ -96,7 +96,7 @@ describe('MqttProvider', () => {
     }
 
     render(
-      <MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+      <MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
         <Test />
       </MqttProvider>
     );
@@ -106,4 +106,30 @@ describe('MqttProvider', () => {
       JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }) })
     );
   });
+
+  test('prefills the clips/detect/snapshots state from config', async () => {
+    jest.spyOn(Date, 'now').mockReturnValue(123456);
+    const config = {
+      cameras: {
+        front: { name: 'front', detect: { enabled: true }, clips: { enabled: false }, snapshots: { enabled: true } },
+        side: { name: 'side', detect: { enabled: false }, clips: { enabled: false }, snapshots: { enabled: false } },
+      },
+    };
+    render(
+      <MqttProvider config={config} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
+        <Test />
+      </MqttProvider>
+    );
+    await screen.findByTestId('data');
+    expect(screen.getByTestId('front/detect/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"ON"}');
+    expect(screen.getByTestId('front/clips/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
+    expect(screen.getByTestId('front/snapshots/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"ON"}');
+    expect(screen.getByTestId('side/detect/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
+    expect(screen.getByTestId('side/clips/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
+    expect(screen.getByTestId('side/snapshots/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
+  });
 });
+
+const mockConfig = {
+  cameras: {},
+};

web/src/api/index.jsx

@@ -40,14 +40,19 @@ function reducer(state, { type, payload, meta }) {
   }
 }
 
-export const ApiProvider = ({ children }) => {
+export function ApiProvider({ children }) {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
     <Api.Provider value={{ state, dispatch }}>
-      <MqttProvider>{children}</MqttProvider>
+      <MqttWithConfig>{children}</MqttWithConfig>
     </Api.Provider>
   );
-};
+}
+
+function MqttWithConfig({ children }) {
+  const { data, status } = useConfig();
+  return status === FetchStatus.LOADED ? <MqttProvider config={data}>{children}</MqttProvider> : children;
+}
 
 function shouldFetch(state, url, fetchId = null) {
   if ((fetchId && url in state.queries && state.queries[url].fetchId !== fetchId) || !(url in state.queries)) {

web/src/api/mqtt.jsx

@@ -31,6 +31,7 @@ function reducer(state, { topic, payload, retain }) {
 }
 
 export function MqttProvider({
+  config,
   children,
   createWebsocket = defaultCreateWebsocket,
   mqttUrl = `${baseUrl.replace(/^https?:/, 'ws:')}/ws`,
@@ -38,6 +39,15 @@ export function MqttProvider({
   const [state, dispatch] = useReducer(reducer, initialState);
   const wsRef = useRef();
 
+  useEffect(() => {
+    Object.keys(config.cameras).forEach((camera) => {
+      const { name, clips, detect, snapshots } = config.cameras[camera];
+      dispatch({ topic: `${name}/clips/state`, payload: clips.enabled ? 'ON' : 'OFF' });
+      dispatch({ topic: `${name}/detect/state`, payload: detect.enabled ? 'ON' : 'OFF' });
+      dispatch({ topic: `${name}/snapshots/state`, payload: snapshots.enabled ? 'ON' : 'OFF' });
+    });
+  }, [config]);
+
   useEffect(
     () => {
       const ws = createWebsocket(mqttUrl);
@@ -62,17 +72,49 @@ export function MqttProvider({
   return <Mqtt.Provider value={{ state, ws: wsRef.current }}>{children}</Mqtt.Provider>;
 }
 
-export function useMqtt(topic) {
+export function useMqtt(watchTopic, publishTopic) {
   const { state, ws } = useContext(Mqtt);
 
-  const value = state[topic] || { payload: null };
+  const value = state[watchTopic] || { payload: null };
 
   const send = useCallback(
     (payload) => {
-      ws.send(JSON.stringify({ topic, payload: typeof payload !== 'string' ? JSON.stringify(payload) : payload }));
+      ws.send(
+        JSON.stringify({
+          topic: publishTopic || watchTopic,
+          payload: typeof payload !== 'string' ? JSON.stringify(payload) : payload,
+        })
+      );
     },
-    [ws, topic]
+    [ws, watchTopic, publishTopic]
   );
 
   return { value, send, connected: state.__connected };
 }
+
+export function useDetectState(camera) {
+  const {
+    value: { payload },
+    send,
+    connected,
+  } = useMqtt(`${camera}/detect/state`, `${camera}/detect/set`);
+  return { payload, send, connected };
+}
+
+export function useClipsState(camera) {
+  const {
+    value: { payload },
+    send,
+    connected,
+  } = useMqtt(`${camera}/clips/state`, `${camera}/clips/set`);
+  return { payload, send, connected };
+}
+
+export function useSnapshotsState(camera) {
+  const {
+    value: { payload },
+    send,
+    connected,
+  } = useMqtt(`${camera}/snapshots/state`, `${camera}/snapshots/set`);
+  return { payload, send, connected };
+}