only poll tree if websocket connection is unavailable

commafeed-client/src/app/slices/server.ts

@@ -1,18 +1,25 @@
-import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"
+import { PayloadAction, createAsyncThunk, createSlice } from "@reduxjs/toolkit"
 import { client } from "app/client"
 import { ServerInfo } from "app/types"
 
 interface ServerState {
     serverInfos?: ServerInfo
+    webSocketConnected: boolean
 }
 
-const initialState: ServerState = {}
+const initialState: ServerState = {
+    webSocketConnected: false,
+}
 
 export const reloadServerInfos = createAsyncThunk("server/infos", () => client.server.getServerInfos().then(r => r.data))
 export const serverSlice = createSlice({
     name: "server",
     initialState,
-    reducers: {},
+    reducers: {
+        setWebSocketConnected: (state, action: PayloadAction<boolean>) => {
+            state.webSocketConnected = action.payload
+        },
+    },
     extraReducers: builder => {
         builder.addCase(reloadServerInfos.fulfilled, (state, action) => {
             state.serverInfos = action.payload
@@ -20,4 +27,5 @@ export const serverSlice = createSlice({
     },
 })
 
+export const { setWebSocketConnected } = serverSlice.actions
 export default serverSlice.reducer

commafeed-client/src/hooks/useWebSocket.ts

@@ -1,3 +1,4 @@
+import { setWebSocketConnected } from "app/slices/server"
 import { reloadTree } from "app/slices/tree"
 import { useAppDispatch } from "app/store"
 import { useEffect } from "react"
@@ -12,6 +13,8 @@ export const useWebSocket = () => {
         const wsUrl = `${wsProtocol}://${currentUrl.hostname}:${currentUrl.port}/ws`
 
         const ws = new WebsocketHeartbeatJs({ url: wsUrl, pingMsg: "ping" })
+        ws.onopen = () => dispatch(setWebSocketConnected(true))
+        ws.onclose = () => dispatch(setWebSocketConnected(false))
         ws.onmessage = event => {
             const { data } = event
             if (typeof data === "string") {

commafeed-client/src/pages/app/Layout.tsx

@@ -94,6 +94,7 @@ export default function Layout(props: LayoutProps) {
     const { loading } = useAppLoading()
     const mobile = useMobile()
     const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
+    const webSocketConnected = useAppSelector(state => state.server.webSocketConnected)
     const sidebarHidden = props.sidebarWidth === 0
     const dispatch = useAppDispatch()
     useWebSocket()
@@ -106,10 +107,12 @@ export default function Layout(props: LayoutProps) {
         dispatch(reloadTree())
         dispatch(reloadTags())
 
-        // reload tree periodically
+        // reload tree periodically if not receiving websocket events
-        const id = setInterval(() => dispatch(reloadTree()), 30000)
+        const id = setInterval(() => {
+            if (!webSocketConnected) dispatch(reloadTree())
+        }, 30000)
         return () => clearInterval(id)
-    }, [dispatch])
+    }, [dispatch, webSocketConnected])
 
     const burger = (
         <Center>