code refactoring, backend code optimization

frontend/src/atoms/downloads.ts

@@ -1,7 +1,22 @@
-import { atom } from 'recoil'
+import * as O from 'fp-ts/Option'
+import { pipe } from 'fp-ts/lib/function'
+import { atom, selector } from 'recoil'
 import { RPCResult } from '../types'
 
-export const activeDownloadsState = atom<RPCResult[] | undefined>({
+export const downloadsState = atom<O.Option<RPCResult[]>>({
+  key: 'downloadsState',
+  default: O.none
+})
+
+export const loadingDownloadsState = selector<boolean>({
+  key: 'loadingDownloadsState',
+  get: ({ get }) => O.isNone(get(downloadsState))
+})
+
+export const activeDownloadsState = selector<RPCResult[]>({
   key: 'activeDownloadsState',
-  default: undefined
+  get: ({ get }) => pipe(
+    get(downloadsState),
+    O.getOrElse(() => new Array<RPCResult>())
+  )
 })

frontend/src/components/Downloads.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { activeDownloadsState } from '../atoms/downloads'
+import { loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
 import { loadingAtom } from '../atoms/ui'
 import DownloadsCardView from './DownloadsCardView'
@@ -8,15 +8,17 @@ import DownloadsListView from './DownloadsListView'
 
 const Downloads: React.FC = () => {
   const listView = useRecoilValue(listViewState)
-  const active = useRecoilValue(activeDownloadsState)
+  const loadingDownloads = useRecoilValue(loadingDownloadsState)
 
   const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
 
   useEffect(() => {
-    if (active) {
-      setIsLoading(false)
+    if (loadingDownloads) {
+      setIsLoading(true)
+      return
     }
-  }, [active?.length, isLoading])
+    setIsLoading(false)
+  }, [loadingDownloads, isLoading])
 
   if (listView) {
     return (

frontend/src/components/DownloadsCardView.tsx

@@ -7,7 +7,7 @@ import { useRPC } from '../hooks/useRPC'
 import DownloadCard from './DownloadCard'
 
 const DownloadsCardView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState) ?? []
+  const downloads = useRecoilValue(activeDownloadsState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()

frontend/src/components/DownloadsListView.tsx

@@ -18,7 +18,7 @@ import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
 
 
 const DownloadsListView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState) ?? []
+  const downloads = useRecoilValue(activeDownloadsState)
 
   const { client } = useRPC()
 

frontend/src/components/SocketSubscriber.tsx

@@ -1,7 +1,8 @@
+import * as O from 'fp-ts/Option'
 import { useMemo } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { interval, share, take } from 'rxjs'
-import { activeDownloadsState } from '../atoms/downloads'
+import { downloadsState } from '../atoms/downloads'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { useSubscription } from '../hooks/observable'
@@ -14,7 +15,7 @@ interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
 
 const SocketSubscriber: React.FC<Props> = ({ children }) => {
   const [, setIsConnected] = useRecoilState(connectedState)
-  const [, setActive] = useRecoilState(activeDownloadsState)
+  const [, setDownloads] = useRecoilState(downloadsState)
 
   const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
 
@@ -38,14 +39,18 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
       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,
-          ))
-      )
+      if (event.result) {
+        return setDownloads(
+          O.of(event.result
+            .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
+              b.info.created_at,
+              a.info.created_at,
+            ))
+          )
+        )
+      }
+
+      setDownloads(O.none)
     },
     (err) => {
       console.error(err)