code refacoring

frontend/src/components/DownloadCard.tsx

@@ -0,0 +1,110 @@
+import EightK from '@mui/icons-material/EightK'
+import FourK from '@mui/icons-material/FourK'
+import Hd from '@mui/icons-material/Hd'
+import Sd from '@mui/icons-material/Sd'
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  LinearProgress,
+  Skeleton,
+  Stack,
+  Typography
+} from '@mui/material'
+import { RPCResult } from '../types'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
+
+type Props = {
+  download: RPCResult
+  onStop: () => void
+  onCopy: () => void
+}
+
+const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
+  if (!resolution) return null
+  if (resolution.includes('4320')) return <EightK color="primary" />
+  if (resolution.includes('2160')) return <FourK color="primary" />
+  if (resolution.includes('1080')) return <Hd color="primary" />
+  if (resolution.includes('720')) return <Sd color="primary" />
+  return null
+}
+
+const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
+  const isCompleted = () => download.progress.percentage === '-1'
+
+  const percentageToNumber = () => isCompleted()
+    ? 100
+    : Number(download.progress.percentage.replace('%', ''))
+
+  return (
+    <Card>
+      <CardActionArea onClick={() => {
+        navigator.clipboard.writeText(download.info.url)
+        onCopy()
+      }}>
+        {download.info.thumbnail !== '' ?
+          <CardMedia
+            component="img"
+            height={180}
+            image={download.info.thumbnail}
+          /> :
+          <Skeleton variant="rectangular" height={180} />
+        }
+        <CardContent>
+          {download.info.title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(download.info.title, 54)}
+            </Typography> :
+            <Skeleton />
+          }
+          <Stack direction="row" spacing={1} py={2}>
+            <Chip
+              label={
+                isCompleted()
+                  ? 'Completed'
+                  : mapProcessStatus(download.progress.process_status)
+              }
+              color="primary"
+              size="small"
+            />
+            <Typography>
+              {!isCompleted() ? download.progress.percentage : ''}
+            </Typography>
+            <Typography>
+              &nbsp;
+              {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
+            </Typography>
+            <Typography>
+              {roundMiB(download.info.filesize_approx ?? 0)}
+            </Typography>
+            <Resolution resolution={download.info.resolution} />
+          </Stack>
+          {download.progress.percentage ?
+            <LinearProgress
+              variant="determinate"
+              value={percentageToNumber()}
+              color={isCompleted() ? "secondary" : "primary"}
+            /> :
+            null
+          }
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Button
+          variant="contained"
+          size="small"
+          color="primary"
+          onClick={onStop}
+        >
+          {isCompleted() ? "Clear" : "Stop"}
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default DownloadCard

frontend/src/components/DownloadsCardView.tsx

@@ -1,11 +1,10 @@
-import { Grid } from "@mui/material"
+import { Grid } from '@mui/material'
-import { Fragment } from "react"
 import { useRecoilValue } from 'recoil'
 import { activeDownloadsState } from '../atoms/downloads'
-import { useToast } from "../hooks/toast"
+import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
-import { StackableResult } from "./StackableResult"
+import DownloadCard from './DownloadCard'
 
 const DownloadsCardView: React.FC = () => {
   const downloads = useRecoilValue(activeDownloadsState) ?? []
@@ -21,20 +20,13 @@ const DownloadsCardView: React.FC = () => {
       {
         downloads.map(download => (
           <Grid item xs={4} sm={8} md={6} key={download.id}>
-            <Fragment>
+            <>
-              <StackableResult
+              <DownloadCard
-                url={download.info.url}
+                download={download}
-                title={download.info.title}
-                thumbnail={download.info.thumbnail}
-                percentage={download.progress.percentage}
                 onStop={() => abort(download.id)}
                 onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
-                resolution={download.info.resolution ?? ''}
-                speed={download.progress.speed}
-                size={download.info.filesize_approx ?? 0}
-                status={download.progress.process_status}
               />
-            </Fragment>
+            </>
           </Grid>
         ))
       }

frontend/src/components/StackableResult.tsx

@@ -1,111 +0,0 @@
-import { EightK, FourK, Hd, Sd } from '@mui/icons-material'
-import {
-  Button,
-  Card,
-  CardActionArea,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Chip,
-  LinearProgress,
-  Skeleton,
-  Stack,
-  Typography
-} from '@mui/material'
-import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
-
-type Props = {
-  title: string
-  url: string
-  thumbnail: string
-  resolution: string
-  percentage: string
-  size: number
-  speed: number
-  status: number
-  onStop: () => void
-  onCopy: () => void
-}
-
-export function StackableResult({
-  title,
-  url,
-  thumbnail,
-  resolution,
-  percentage,
-  speed,
-  size,
-  status,
-  onStop,
-  onCopy,
-}: Props) {
-  const isCompleted = () => percentage === '-1'
-
-  const percentageToNumber = () => isCompleted()
-    ? 100
-    : Number(percentage.replace('%', ''))
-
-  const guessResolution = (xByY: string): any => {
-    if (!xByY) return null
-    if (xByY.includes('4320')) return (<EightK color="primary" />)
-    if (xByY.includes('2160')) return (<FourK color="primary" />)
-    if (xByY.includes('1080')) return (<Hd color="primary" />)
-    if (xByY.includes('720')) return (<Sd color="primary" />)
-    return null
-  }
-
-  return (
-    <Card>
-      <CardActionArea onClick={() => {
-        navigator.clipboard.writeText(url)
-        onCopy()
-      }}>
-        {thumbnail !== '' ?
-          <CardMedia
-            component="img"
-            height={180}
-            image={thumbnail}
-          /> :
-          <Skeleton variant="rectangular" height={180} />
-        }
-        <CardContent>
-          {title !== '' ?
-            <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(title, 54)}
-            </Typography> :
-            <Skeleton />
-          }
-          <Stack direction="row" spacing={1} py={2}>
-            <Chip
-              label={isCompleted() ? 'Completed' : mapProcessStatus(status)}
-              color="primary"
-              size="small"
-            />
-            <Typography>{!isCompleted() ? percentage : ''}</Typography>
-            <Typography> {!isCompleted() ? formatSpeedMiB(speed) : ''}</Typography>
-            <Typography>{roundMiB(size ?? 0)}</Typography>
-            {guessResolution(resolution)}
-          </Stack>
-          {percentage ?
-            <LinearProgress
-              variant="determinate"
-              value={percentageToNumber()}
-              color={isCompleted() ? "secondary" : "primary"}
-            /> :
-            null
-          }
-        </CardContent>
-      </CardActionArea>
-      <CardActions>
-        <Button
-          variant="contained"
-          size="small"
-          color="primary"
-          onClick={onStop}
-        >
-          {isCompleted() ? "Clear" : "Stop"}
-        </Button>
-      </CardActions>
-    </Card>
-  )
-}