From fb78736a83020028c122747319c177a9986c1f34 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 22 Nov 2022 18:15:37 +0900
Subject: [PATCH] Address PR comments

---
 src/modules/docker/DockerTable.tsx      | 13 +++++++------
 src/modules/torrents/TorrentsModule.tsx | 22 +++++++++-------------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx
index feebe5123..10196ac5c 100644
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -1,4 +1,4 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, useMantineTheme } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
@@ -24,6 +24,7 @@ export default function DockerTable({
   containers: Dockerode.ContainerInfo[];
   selection: Dockerode.ContainerInfo[];
 }) {
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');
@@ -69,8 +70,8 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        {width > 576 ? <td>{element.Image}</td> : null}
-        {width > 576 ? (
+        {width > MIN_WIDTH_MOBILE && <td>{element.Image}</td>}
+        {width > MIN_WIDTH_MOBILE && (
           <td>
             <Group>
               {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -92,7 +93,7 @@ export default function DockerTable({
               )}
             </Group>
           </td>
-        ) : null}
+        )}
         <td>
           <ContainerState state={element.State} />
         </td>
@@ -123,8 +124,8 @@ export default function DockerTable({
               />
             </th>
             <th>{t('table.header.name')}</th>
-            {width > 576 ? <th>{t('table.header.image')}</th> : null}
-            {width > 576 ? <th>{t('table.header.ports')}</th> : null}
+            {width > MIN_WIDTH_MOBILE ? <th>{t('table.header.image')}</th> : null}
+            {width > MIN_WIDTH_MOBILE ? <th>{t('table.header.ports')}</th> : null}
             <th>{t('table.header.state')}</th>
           </tr>
         </thead>
diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx
index 674979f61..cd010992c 100644
--- a/src/modules/torrents/TorrentsModule.tsx
+++ b/src/modules/torrents/TorrentsModule.tsx
@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Center,
   Stack,
+  useMantineTheme,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
@@ -23,8 +24,6 @@ import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
 import { humanFileSize } from '../../tools/humanFileSize';
 
-const MIM_WIDTH_MOBILE = 576;
-
 export const TorrentsModule: IModule = {
   id: 'torrents-status',
   title: 'Torrent',
@@ -54,6 +53,7 @@ export default function TorrentsComponent() {
   const setSafeInterval = useSetSafeInterval();
   const [isLoading, setIsLoading] = useState(true);
   const { ref, width, height } = useElementSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
 
   const { t } = useTranslation(`modules/${TorrentsModule.id}`);
 
@@ -114,9 +114,9 @@ export default function TorrentsComponent() {
     <tr ref={ref}>
       <th>{t('card.table.header.name')}</th>
       <th>{t('card.table.header.size')}</th>
-      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
-      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
-      {width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
+      {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
+      {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
+      {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
       <th>{t('card.table.header.progress')}</th>
     </tr>
   );
@@ -161,25 +161,21 @@ export default function TorrentsComponent() {
           <td>
             <Text size="xs">{humanFileSize(size)}</Text>
           </td>
-          {width > 576 ? (
+          {width > MIN_WIDTH_MOBILE && (
             <td>
               <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
             </td>
-          ) : (
-            ''
           )}
-          {width > 576 ? (
+          {width > MIN_WIDTH_MOBILE && (
             <td>
               <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
             </td>
-          ) : (
-            ''
           )}
-          {width > 576 ? (
+          {width > MIN_WIDTH_MOBILE && (
             <td>
               <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
             </td>
-          ) : null}
+          )}
           <td>
             <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
             <Progress