refactor(proxies): use ws request

src/pages/Connections.tsx

@@ -1,8 +1,6 @@
 import { writeClipboard } from '@solid-primitives/clipboard'
-import { createEventSignal } from '@solid-primitives/event-listener'
 import { useI18n } from '@solid-primitives/i18n'
 import { makePersisted } from '@solid-primitives/storage'
-import { createReconnectingWS } from '@solid-primitives/websocket'
 import {
   IconCircleX,
   IconPlayerPause,
@@ -38,11 +36,10 @@ import {
 } from '~/constants'
 import { formatTimeFromNow } from '~/helpers'
 import {
-  secret,
   tableSize,
   tableSizeClassName,
   useRequest,
-  wsEndpointURL,
+  useWsRequest,
 } from '~/signals'
 import type { Connection } from '~/types'
 
@@ -66,13 +63,7 @@ export default () => {
   const [search, setSearch] = createSignal('')
   const [activeTab, setActiveTab] = createSignal(ActiveTab.activeConnections)
 
-  const ws = createReconnectingWS(
+  const connections = useWsRequest<{ connections: Connection[] }>('connections')
-    `${wsEndpointURL()}/connections?token=${secret()}`,
-  )
-
-  const messageEvent = createEventSignal<{
-    message: WebSocketEventMap['message']
-  }>(ws, 'message')
 
   const [closedConnectionsWithSpeed, setClosedConnectionsWithSpeed] =
     createSignal<ConnectionWithSpeed[]>([])
@@ -87,7 +78,7 @@ export default () => {
     createSignal<ConnectionWithSpeed[]>([])
 
   createEffect(() => {
-    const data = messageEvent()?.data
+    const data = connections()?.connections
 
     if (!data) {
       return
@@ -97,9 +88,7 @@ export default () => {
       const prevMap = new Map<string, Connection>()
       prevConnections.forEach((prev) => prevMap.set(prev.id, prev))
 
-      const connections = (
+      const connections = data.map((connection) => {
-        JSON.parse(data) as { connections: Connection[] }
-      ).connections.map((connection) => {
         const prevConn = prevMap.get(connection.id)
 
         if (!prevConn) {

src/pages/Logs.tsx

@@ -1,6 +1,4 @@
-import { createEventSignal } from '@solid-primitives/event-listener'
 import { useI18n } from '@solid-primitives/i18n'
-import { createReconnectingWS } from '@solid-primitives/websocket'
 import {
   ColumnDef,
   createSolidTable,
@@ -9,7 +7,7 @@ import {
 } from '@tanstack/solid-table'
 import { For, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { secret, tableSize, tableSizeClassName, wsEndpointURL } from '~/signals'
+import { tableSize, tableSizeClassName, useWsRequest } from '~/signals'
 import { Log } from '~/types'
 
 type LogWithSeq = Log & { seq: number }
@@ -20,22 +18,16 @@ export default () => {
   const [search, setSearch] = createSignal('')
   const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
-  const ws = createReconnectingWS(`${wsEndpointURL()}/logs?token=${secret()}`)
+  const logsData = useWsRequest<Log>('logs')
-
-  const messageEvent = createEventSignal<{
-    message: WebSocketEventMap['message']
-  }>(ws, 'message')
 
   createEffect(() => {
-    const data = messageEvent()?.data
+    const data = logsData()
 
     if (!data) {
       return
     }
 
-    setLogs((logs) =>
+    setLogs((logs) => [{ ...data, seq }, ...logs].slice(0, 100))
-      [{ ...(JSON.parse(data) as Log), seq }, ...logs].slice(0, 100),
-    )
 
     seq++
   })

src/pages/Overview.tsx

@@ -1,7 +1,5 @@
-import { createEventSignal } from '@solid-primitives/event-listener'
 import { useI18n } from '@solid-primitives/i18n'
 import { makeTimer } from '@solid-primitives/timer'
-import { createReconnectingWS } from '@solid-primitives/websocket'
 import type { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
 import { merge } from 'lodash'
@@ -15,7 +13,7 @@ import {
   createSignal,
 } from 'solid-js'
 import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
-import { secret, wsEndpointURL } from '~/signals'
+import { useWsRequest } from '~/signals'
 import type { Connection } from '~/types'
 
 const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
@@ -47,17 +45,7 @@ export default () => {
     setInterval,
   )
 
-  const trafficWS = createReconnectingWS(
+  const traffic = useWsRequest<{ down: number; up: number }>('traffic')
-    `${wsEndpointURL()}/traffic?token=${secret()}`,
-  )
-
-  const trafficWSMessageEvent = createEventSignal(trafficWS, 'message')
-
-  const traffic = () => {
-    const data = trafficWSMessageEvent()?.data
-
-    return data ? (JSON.parse(data) as { down: number; up: number }) : null
-  }
 
   createEffect(() => {
     const t = traffic()
@@ -80,20 +68,10 @@ export default () => {
     },
   ])
 
-  const memoryWS = createReconnectingWS(
+  const memory = useWsRequest<{ inuse: number }>('memory')
-    `${wsEndpointURL()}/memory?token=${secret()}`,
-  )
-
-  const memoryWSMessageEvent = createEventSignal(memoryWS, 'message')
-
-  const memory = () => {
-    const data = memoryWSMessageEvent()?.data
-
-    return data ? (JSON.parse(data) as { inuse: number }).inuse : null
-  }
 
   createEffect(() => {
-    const m = memory()
+    const m = memory()?.inuse
 
     if (m) setMemories((memories) => [...memories, m])
   })
@@ -106,25 +84,11 @@ export default () => {
     { name: t('memory'), data: memories() },
   ])
 
-  const connectionsWS = createReconnectingWS(
+  const connection = useWsRequest<{
-    `${wsEndpointURL()}/connections?token=${secret()}`,
+    downloadTotal: number
-  )
+    uploadTotal: number
-
+    connections: Connection[]
-  const connectionsWSMessageEvent = createEventSignal<{
+  }>('connections')
-    message: WebSocketEventMap['message']
-  }>(connectionsWS, 'message')
-
-  const connection = () => {
-    const data = connectionsWSMessageEvent()?.data
-
-    return data
-      ? (JSON.parse(data) as {
-          downloadTotal: number
-          uploadTotal: number
-          connections: Connection[]
-        })
-      : null
-  }
 
   return (
     <div class="flex flex-col gap-4">
@@ -150,7 +114,7 @@ export default () => {
         </TrafficWidget>
 
         <TrafficWidget label={t('memoryUsage')}>
-          {byteSize(memory() || 0).toString()}
+          {byteSize(memory()?.inuse || 0).toString()}
         </TrafficWidget>
       </div>
 

src/signals/request.ts

@@ -1,6 +1,8 @@
+import { createEventSignal } from '@solid-primitives/event-listener'
 import { makePersisted } from '@solid-primitives/storage'
+import { createReconnectingWS } from '@solid-primitives/websocket'
 import ky from 'ky'
-import { createSignal } from 'solid-js'
+import { createMemo, createSignal } from 'solid-js'
 
 export const [selectedEndpoint, setSelectedEndpoint] = makePersisted(
   createSignal(''),
@@ -37,3 +39,23 @@ export const secret = () => endpoint()?.secret
 
 export const wsEndpointURL = () =>
   new URL(endpoint()?.url ?? '').origin.replace('http', 'ws')
+
+export const useWsRequest = <T>(path: string) => {
+  const ws = createReconnectingWS(
+    `${wsEndpointURL()}/${path}?token=${secret()}`,
+  )
+
+  const event = createEventSignal<{
+    message: MessageEvent
+  }>(ws, 'message')
+
+  return createMemo<T | null>(() => {
+    const e = event()
+
+    if (!e) {
+      return null
+    }
+
+    return JSON.parse(event()?.data)
+  })
+}