code refactoring

frontend/src/atoms/ui.ts

@@ -1,5 +1,6 @@
-import { atom } from 'recoil'
+import { atom, selector } from 'recoil'
 import { RPCResult } from '../types'
+import { activeDownloadsState } from './downloads'
 
 export const loadingAtom = atom({
   key: 'loadingAtom',
@@ -11,7 +12,9 @@ export const optimisticDownloadsState = atom<RPCResult[]>({
   default: []
 })
 
-export const totalDownloadSpeedState = atom<number>({
+export const totalDownloadSpeedState = selector<number>({
   key: 'totalDownloadSpeedState',
-  default: 0
+  get: ({ get }) => get(activeDownloadsState)
+    .map(d => d.progress.speed)
+    .reduce((curr, next) => curr + next, 0)
 })

frontend/src/components/Downloads.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { activeDownloadsState, loadingDownloadsState } from '../atoms/downloads'
+import { loadingDownloadsState } from '../atoms/downloads'
 import { listViewState } from '../atoms/settings'
-import { loadingAtom, totalDownloadSpeedState } from '../atoms/ui'
+import { loadingAtom } from '../atoms/ui'
 import DownloadsCardView from './DownloadsCardView'
 import DownloadsTableView from './DownloadsTableView'
 
@@ -12,15 +12,6 @@ const Downloads: React.FC = () => {
 
   const [isLoading, setIsLoading] = useRecoilState(loadingAtom)
 
-  const downloads = useRecoilValue(activeDownloadsState)
-  const [, setTotalDownloadSpeed] = useRecoilState(totalDownloadSpeedState)
-
-  useEffect(() => {
-    setTotalDownloadSpeed(
-      downloads.map(d => d.progress.speed).reduce((curr, next) => curr + next, 0)
-    )
-  }, [downloads])
-
   useEffect(() => {
     if (loadingDownloads) {
       return setIsLoading(true)