added react-query

web/src/components/DialogTorrentDetailsContent/TorrentCache/LargeSnake.jsx

@@ -1,9 +1,10 @@
 import { FixedSizeGrid as Grid } from 'react-window'
 import AutoSizer from 'react-virtualized-auto-sizer'
+import { memo } from 'react'
 
 import { getLargeSnakeColors } from './colors'
 
-const Cell = ({ columnIndex, rowIndex, style, data }) => {
+const Cell = memo(({ columnIndex, rowIndex, style, data }) => {
   const { columnCount, cacheMap, gutterSize, borderSize, pieces } = data
   const itemIndex = rowIndex * columnCount + columnIndex
 
@@ -21,7 +22,7 @@ const Cell = ({ columnIndex, rowIndex, style, data }) => {
   }
 
   return <div style={newStyle} />
-}
+})
 
 const gutterSize = 2
 const borderSize = 1

web/src/components/TorrentCard/index.jsx

@@ -1,5 +1,5 @@
 import 'fontsource-roboto'
-import { forwardRef, useState } from 'react'
+import { forwardRef, memo, useState } from 'react'
 import { UnfoldMore as UnfoldMoreIcon, Close as CloseIcon, Delete as DeleteIcon } from '@material-ui/icons'
 import { getPeerString, humanizeSize, shortenText } from 'utils/Utils'
 import { torrentsHost } from 'utils/Hosts'
@@ -16,7 +16,7 @@ import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription,
 
 const Transition = forwardRef((props, ref) => <Slide direction='up' ref={ref} {...props} />)
 
-export default function Torrent({ torrent }) {
+const Torrent = ({ torrent }) => {
   const { t } = useTranslation()
   const [isDetailedInfoOpened, setIsDetailedInfoOpened] = useState(false)
   const [isDeleteTorrentOpened, setIsDeleteTorrentOpened] = useState(false)
@@ -121,3 +121,5 @@ export default function Torrent({ torrent }) {
     </>
   )
 }
+
+export default memo(Torrent)

web/src/components/TorrentList.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import { Typography } from '@material-ui/core'
 import { torrentsHost } from 'utils/Hosts'
 import TorrentCard from 'components/TorrentCard'
@@ -6,34 +6,26 @@ import axios from 'axios'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { TorrentListWrapper, CenteredGrid } from 'components/App/style'
 import { useTranslation } from 'react-i18next'
+import { useQuery } from 'react-query'
+
+const getTorrents = async () => {
+  try {
+    const { data } = await axios.post(torrentsHost(), { action: 'list' })
+    return data
+  } catch (error) {
+    throw new Error(null)
+  }
+}
 
 export default function TorrentList() {
   const { t } = useTranslation()
-  const [torrents, setTorrents] = useState([])
-  const [isLoading, setIsLoading] = useState(true)
   const [isOffline, setIsOffline] = useState(true)
-  const timerID = useRef(-1)
-
-  useEffect(() => {
-    timerID.current = setInterval(() => {
-      // getting torrent list
-      axios
-        .post(torrentsHost(), { action: 'list' })
-        .then(({ data }) => {
-          // updating torrent list
-          setTorrents(data)
-          setIsOffline(false)
-        })
-        .catch(() => {
-          // resetting torrent list
-          setTorrents([])
-          setIsOffline(true)
-        })
-        .finally(() => setIsLoading(false))
-    }, 1000)
-
-    return () => clearInterval(timerID.current)
-  }, [])
+  const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
+    retry: 1,
+    refetchInterval: 1000,
+    onError: () => setIsOffline(true),
+    onSuccess: () => setIsOffline(false),
+  })
 
   if (isLoading || isOffline || !torrents.length) {
     return (