code refactoring

frontend/src/components/Downloads.tsx

@@ -1,71 +1,31 @@
+import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
-import { useRPC } from '../hooks/useRPC'
-import { DownloadsCardView } from './DownloadsCardView'
-import { DownloadsListView } from './DownloadsListView'
-import { useEffect } from 'react'
-import { connectedState, isDownloadingState } from '../atoms/status'
-import { datetimeCompareFunc, isRPCResponse } from '../utils'
-import { RPCResponse, RPCResult } from '../types'
+import { loadingAtom } from '../atoms/ui'
+import DownloadsCardView from './DownloadsCardView'
+import DownloadsListView from './DownloadsListView'
 
 const Downloads: React.FC = () => {
-  const [active, setActive] = useRecoilState(activeDownloadsState)
-  const isConnected = useRecoilValue(connectedState)
   const listView = useRecoilValue(listViewState)
+  const active = useRecoilValue(activeDownloadsState)
 
-  const { client, socket$ } = useRPC()
-
-  const abort = (id?: string) => {
-    if (id) {
-      client.kill(id)
-      return
-    }
-    client.killAll()
-  }
-
-  useEffect(() => {
-    if (!isConnected) { return }
-
-    const sub = socket$.subscribe((event: RPCResponse<RPCResult[]>) => {
-      if (!isRPCResponse(event)) { return }
-      if (!Array.isArray(event.result)) { return }
-
-      setActive(
-        (event.result || [])
-          .filter(f => !!f.info.url)
-          .sort((a, b) => datetimeCompareFunc(
-            b.info.created_at,
-            a.info.created_at,
-          ))
-      )
-    })
-
-    return () => sub.unsubscribe()
-  }, [socket$, isConnected])
-
-  const [, setIsDownloading] = useRecoilState(isDownloadingState)
+  const [, setIsLoading] = useRecoilState(loadingAtom)
 
   useEffect(() => {
     if (active) {
-      setIsDownloading(true)
+      setIsLoading(true)
     }
   }, [active?.length])
 
   if (listView) {
     return (
-      <DownloadsListView
-        downloads={active ?? []}
-        onStop={abort}
-      />
+      <DownloadsListView />
     )
   }
 
   return (
-    <DownloadsCardView
-      downloads={active ?? []}
-      onStop={abort}
-    />
+    <DownloadsCardView />
   )
 }