From fa05e5533356c443bc939fcc19d30891ac54b174 Mon Sep 17 00:00:00 2001 From: Nick Mowen Date: Tue, 22 Nov 2022 14:46:40 -0700 Subject: [PATCH] Rename mqtt to ws on web --- web/src/AppBar.jsx | 2 +- web/src/api/__tests__/index.test.jsx | 4 +-- .../__tests__/{mqtt.test.jsx => ws.test.jsx} | 36 +++++++++---------- web/src/api/index.jsx | 8 ++--- web/src/api/{mqtt.jsx => ws.jsx} | 24 ++++++------- web/src/context/__tests__/index.test.jsx | 4 +-- web/src/routes/Cameras.jsx | 2 +- web/src/routes/System.jsx | 4 +-- web/src/routes/__tests__/Camera.test.jsx | 4 +-- web/src/routes/__tests__/Cameras.test.jsx | 10 +++--- web/src/routes/__tests__/Recording.test.jsx | 4 +-- 11 files changed, 51 insertions(+), 51 deletions(-) rename web/src/api/__tests__/{mqtt.test.jsx => ws.test.jsx} (80%) rename web/src/api/{mqtt.jsx => ws.jsx} (79%) diff --git a/web/src/AppBar.jsx b/web/src/AppBar.jsx index 09fc2e9d8..95a6bfbf2 100644 --- a/web/src/AppBar.jsx +++ b/web/src/AppBar.jsx @@ -9,7 +9,7 @@ import FrigateRestartIcon from './icons/FrigateRestart'; import Prompt from './components/Prompt'; import { useDarkMode } from './context'; import { useCallback, useRef, useState } from 'preact/hooks'; -import { useRestart } from './api/mqtt'; +import { useRestart } from './api/ws'; export default function AppBar() { const [showMoreMenu, setShowMoreMenu] = useState(false); diff --git a/web/src/api/__tests__/index.test.jsx b/web/src/api/__tests__/index.test.jsx index 4c3b18fe2..3e803c3a5 100644 --- a/web/src/api/__tests__/index.test.jsx +++ b/web/src/api/__tests__/index.test.jsx @@ -1,11 +1,11 @@ import { h } from 'preact'; -import * as Mqtt from '../mqtt'; +import * as WS from '../ws'; import { ApiProvider, useApiHost } from '..'; import { render, screen } from 'testing-library'; describe('useApiHost', () => { beforeEach(() => { - vi.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children); + vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children); }); test('is set from the baseUrl', async () => { diff --git a/web/src/api/__tests__/mqtt.test.jsx b/web/src/api/__tests__/ws.test.jsx similarity index 80% rename from web/src/api/__tests__/mqtt.test.jsx rename to web/src/api/__tests__/ws.test.jsx index b97631abc..3b0e3420a 100644 --- a/web/src/api/__tests__/mqtt.test.jsx +++ b/web/src/api/__tests__/ws.test.jsx @@ -1,10 +1,10 @@ import { h } from 'preact'; -import { Mqtt, MqttProvider, useMqtt } from '../mqtt'; +import { WS, WsProvider, useWs } from '../ws'; import { useCallback, useContext } from 'preact/hooks'; import { fireEvent, render, screen } from 'testing-library'; function Test() { - const { state } = useContext(Mqtt); + const { state } = useContext(WS); return state.__connected ? (
{Object.keys(state).map((key) => ( @@ -18,7 +18,7 @@ function Test() { const TEST_URL = 'ws://test-foo:1234/ws'; -describe('MqttProvider', () => { +describe('WsProvider', () => { let createWebsocket, wsClient; beforeEach(() => { wsClient = { @@ -45,23 +45,23 @@ describe('MqttProvider', () => { }); }); - test('connects to the mqtt server', async () => { + test('connects to the ws server', async () => { render( - + - + ); await screen.findByTestId('data'); expect(wsClient.args).toEqual([TEST_URL]); expect(screen.getByTestId('__connected')).toHaveTextContent('true'); }); - test('receives data through useMqtt', async () => { + test('receives data through useWs', async () => { function Test() { const { value: { payload, retain }, connected, - } = useMqtt('tacos'); + } = useWs('tacos'); return connected ? (
{JSON.stringify(payload)}
@@ -71,26 +71,26 @@ describe('MqttProvider', () => { } const { rerender } = render( - + - + ); await screen.findByTestId('payload'); wsClient.onmessage({ data: JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false }), }); rerender( - + - + ); expect(screen.getByTestId('payload')).toHaveTextContent('{"yes":true}'); expect(screen.getByTestId('retain')).toHaveTextContent('false'); }); - test('can send values through useMqtt', async () => { + test('can send values through useWs', async () => { function Test() { - const { send, connected } = useMqtt('tacos'); + const { send, connected } = useWs('tacos'); const handleClick = useCallback(() => { send({ yes: true }); }, [send]); @@ -98,9 +98,9 @@ describe('MqttProvider', () => { } render( - + - + ); await screen.findByRole('button'); fireEvent.click(screen.getByRole('button')); @@ -118,9 +118,9 @@ describe('MqttProvider', () => { }, }; render( - + - + ); await screen.findByTestId('data'); expect(screen.getByTestId('front/detect/state')).toHaveTextContent( diff --git a/web/src/api/index.jsx b/web/src/api/index.jsx index 00c78db48..9f256dbbb 100644 --- a/web/src/api/index.jsx +++ b/web/src/api/index.jsx @@ -1,7 +1,7 @@ import { h } from 'preact'; import { baseUrl } from './baseUrl'; import useSWR, { SWRConfig } from 'swr'; -import { MqttProvider } from './mqtt'; +import { WsProvider } from './ws'; import axios from 'axios'; axios.defaults.baseURL = `${baseUrl}api/`; @@ -14,14 +14,14 @@ export function ApiProvider({ children, options }) { ...options, }} > - {children} + {children} ); } -function MqttWithConfig({ children }) { +function WsWithConfig({ children }) { const { data } = useSWR('config'); - return data ? {children} : children; + return data ? {children} : children; } export function useApiHost() { diff --git a/web/src/api/mqtt.jsx b/web/src/api/ws.jsx similarity index 79% rename from web/src/api/mqtt.jsx rename to web/src/api/ws.jsx index 600cd1fc1..734200215 100644 --- a/web/src/api/mqtt.jsx +++ b/web/src/api/ws.jsx @@ -4,7 +4,7 @@ import produce from 'immer'; import { useCallback, useContext, useEffect, useRef, useReducer } from 'preact/hooks'; const initialState = Object.freeze({ __connected: false }); -export const Mqtt = createContext({ state: initialState, connection: null }); +export const WS = createContext({ state: initialState, connection: null }); const defaultCreateWebsocket = (url) => new WebSocket(url); @@ -30,11 +30,11 @@ function reducer(state, { topic, payload, retain }) { } } -export function MqttProvider({ +export function WsProvider({ config, children, createWebsocket = defaultCreateWebsocket, - mqttUrl = `${baseUrl.replace(/^http/, 'ws')}ws`, + wsUrl = `${baseUrl.replace(/^http/, 'ws')}ws`, }) { const [state, dispatch] = useReducer(reducer, initialState); const wsRef = useRef(); @@ -50,7 +50,7 @@ export function MqttProvider({ useEffect( () => { - const ws = createWebsocket(mqttUrl); + const ws = createWebsocket(wsUrl); ws.onopen = () => { dispatch({ topic: '__CLIENT_CONNECTED' }); }; @@ -66,14 +66,14 @@ export function MqttProvider({ }; }, // Forces reconnecting - [state.__reconnectAttempts, mqttUrl] // eslint-disable-line react-hooks/exhaustive-deps + [state.__reconnectAttempts, wsUrl] // eslint-disable-line react-hooks/exhaustive-deps ); - return {children}; + return {children}; } -export function useMqtt(watchTopic, publishTopic) { - const { state, ws } = useContext(Mqtt); +export function useWs(watchTopic, publishTopic) { + const { state, ws } = useContext(WS); const value = state[watchTopic] || { payload: null }; @@ -98,7 +98,7 @@ export function useDetectState(camera) { value: { payload }, send, connected, - } = useMqtt(`${camera}/detect/state`, `${camera}/detect/set`); + } = useWs(`${camera}/detect/state`, `${camera}/detect/set`); return { payload, send, connected }; } @@ -107,7 +107,7 @@ export function useRecordingsState(camera) { value: { payload }, send, connected, - } = useMqtt(`${camera}/recordings/state`, `${camera}/recordings/set`); + } = useWs(`${camera}/recordings/state`, `${camera}/recordings/set`); return { payload, send, connected }; } @@ -116,7 +116,7 @@ export function useSnapshotsState(camera) { value: { payload }, send, connected, - } = useMqtt(`${camera}/snapshots/state`, `${camera}/snapshots/set`); + } = useWs(`${camera}/snapshots/state`, `${camera}/snapshots/set`); return { payload, send, connected }; } @@ -125,6 +125,6 @@ export function useRestart() { value: { payload }, send, connected, - } = useMqtt('restart', 'restart'); + } = useWs('restart', 'restart'); return { payload, send, connected }; } diff --git a/web/src/context/__tests__/index.test.jsx b/web/src/context/__tests__/index.test.jsx index 844fb6e8e..a02383a16 100644 --- a/web/src/context/__tests__/index.test.jsx +++ b/web/src/context/__tests__/index.test.jsx @@ -3,7 +3,7 @@ import { set as setData } from 'idb-keyval'; import { DarkModeProvider, useDarkMode, usePersistence } from '..'; import { fireEvent, render, screen } from 'testing-library'; import { useCallback } from 'preact/hooks'; -import * as Mqtt from '../../api/mqtt'; +import * as WS from '../../api/ws'; function DarkModeChecker() { const { currentMode } = useDarkMode(); @@ -12,7 +12,7 @@ function DarkModeChecker() { describe('DarkMode', () => { beforeEach(() => { - vi.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children); + vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children); }); test('uses media by default', async () => { diff --git a/web/src/routes/Cameras.jsx b/web/src/routes/Cameras.jsx index 7e75d1da7..d195a5bdc 100644 --- a/web/src/routes/Cameras.jsx +++ b/web/src/routes/Cameras.jsx @@ -5,7 +5,7 @@ import CameraImage from '../components/CameraImage'; import ClipIcon from '../icons/Clip'; import MotionIcon from '../icons/Motion'; import SnapshotIcon from '../icons/Snapshot'; -import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/mqtt'; +import { useDetectState, useRecordingsState, useSnapshotsState } from '../api/ws'; import { useMemo } from 'preact/hooks'; import useSWR from 'swr'; diff --git a/web/src/routes/System.jsx b/web/src/routes/System.jsx index 96b3523c2..964e8f47a 100644 --- a/web/src/routes/System.jsx +++ b/web/src/routes/System.jsx @@ -3,7 +3,7 @@ import ActivityIndicator from '../components/ActivityIndicator'; import Button from '../components/Button'; import Heading from '../components/Heading'; import Link from '../components/Link'; -import { useMqtt } from '../api/mqtt'; +import { useWs } from '../api/ws'; import useSWR from 'swr'; import axios from 'axios'; import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table'; @@ -18,7 +18,7 @@ export default function System() { const { value: { payload: stats }, - } = useMqtt('stats'); + } = useWs('stats'); const { data: initialStats } = useSWR('stats'); const { cpu_usages, detectors, service = {}, detection_fps: _, ...cameras } = stats || initialStats || emptyObject; diff --git a/web/src/routes/__tests__/Camera.test.jsx b/web/src/routes/__tests__/Camera.test.jsx index 3a32735fc..ef679681c 100644 --- a/web/src/routes/__tests__/Camera.test.jsx +++ b/web/src/routes/__tests__/Camera.test.jsx @@ -1,6 +1,6 @@ import { h } from 'preact'; import * as AutoUpdatingCameraImage from '../../components/AutoUpdatingCameraImage'; -import * as Mqtt from '../../api/mqtt'; +import * as WS from '../../api/ws'; import Camera from '../Camera'; import { set as setData } from 'idb-keyval'; import * as JSMpegPlayer from '../../components/JSMpegPlayer'; @@ -14,7 +14,7 @@ describe('Camera Route', () => { vi.spyOn(JSMpegPlayer, 'default').mockImplementation(() => { return
; }); - vi.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children); + vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children); }); // eslint-disable-next-line jest/no-disabled-tests diff --git a/web/src/routes/__tests__/Cameras.test.jsx b/web/src/routes/__tests__/Cameras.test.jsx index 28673d12b..7dfaa8d53 100644 --- a/web/src/routes/__tests__/Cameras.test.jsx +++ b/web/src/routes/__tests__/Cameras.test.jsx @@ -1,13 +1,13 @@ import { h } from 'preact'; import * as CameraImage from '../../components/CameraImage'; -import * as Mqtt from '../../api/mqtt'; +import * as WS from '../../api/ws'; import Cameras from '../Cameras'; import { fireEvent, render, screen, waitForElementToBeRemoved } from 'testing-library'; describe('Cameras Route', () => { beforeEach(() => { vi.spyOn(CameraImage, 'default').mockImplementation(() =>
); - vi.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: vi.fn() })); + vi.spyOn(WS, 'useWs').mockImplementation(() => ({ value: { payload: 'OFF' }, send: vi.fn() })); }); test('shows an ActivityIndicator if not yet loaded', async () => { @@ -39,13 +39,13 @@ describe('Cameras Route', () => { const sendDetect = vi.fn(); const sendRecordings = vi.fn(); const sendSnapshots = vi.fn(); - vi.spyOn(Mqtt, 'useDetectState').mockImplementation(() => { + vi.spyOn(WS, 'useDetectState').mockImplementation(() => { return { payload: 'ON', send: sendDetect }; }); - vi.spyOn(Mqtt, 'useRecordingsState').mockImplementation(() => { + vi.spyOn(WS, 'useRecordingsState').mockImplementation(() => { return { payload: 'OFF', send: sendRecordings }; }); - vi.spyOn(Mqtt, 'useSnapshotsState').mockImplementation(() => { + vi.spyOn(WS, 'useSnapshotsState').mockImplementation(() => { return { payload: 'ON', send: sendSnapshots }; }); diff --git a/web/src/routes/__tests__/Recording.test.jsx b/web/src/routes/__tests__/Recording.test.jsx index de71ec625..8dc33fdaf 100644 --- a/web/src/routes/__tests__/Recording.test.jsx +++ b/web/src/routes/__tests__/Recording.test.jsx @@ -1,13 +1,13 @@ import { h } from 'preact'; import * as CameraImage from '../../components/CameraImage'; -import * as Mqtt from '../../api/mqtt'; +import * as WS from '../../api/ws'; import Cameras from '../Cameras'; import { render, screen, waitForElementToBeRemoved } from 'testing-library'; describe('Recording Route', () => { beforeEach(() => { vi.spyOn(CameraImage, 'default').mockImplementation(() =>
); - vi.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() })); + vi.spyOn(WS, 'useWs').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() })); }); test('shows an ActivityIndicator if not yet loaded', async () => {