Address PR comments

public/locales/en/common.json

@@ -2,5 +2,10 @@
   "actions": {
     "save": "Save"
   },
-  "tip": "Tip: "
+  "tip": "Tip: ",
+  "time": {
+    "seconds": "seconds",
+    "minutes": "minutes",
+    "hours": "hours"
+  }
 }

public/locales/en/modules/usenet.json

@@ -27,7 +27,10 @@
       "progress": "Progress"
     },
     "empty": "Queue is empty.",
-    "error": "Some error has occured while fetching data:",
+    "error": {
+      "title": "Error!",
+      "message": "Some error has occured while fetching data:"
+    },
     "paused": "Paused"
   },
   "history": {
@@ -37,7 +40,10 @@
       "duration": "Download Duration"
     },
     "empty": "Queue is empty.",
-    "error": "Some error has occured while fetching data:",
+    "error": {
+      "title": "Error!",
+      "message": "Some error has occured while fetching data:"
+    },
     "paused": "Paused"
   }
 }

src/modules/usenet/UsenetHistoryList.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
 import { useGetUsenetHistory } from '../../tools/hooks/api';
 import { humanFileSize } from '../../tools/humanFileSize';
+import { parseDuration } from '../../tools/parseDuration';
 
 dayjs.extend(duration);
 
@@ -29,7 +30,7 @@ const PAGE_SIZE = 10;
 
 export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
   const [page, setPage] = useState(1);
-  const { t } = useTranslation('modules/usenet');
+  const { t } = useTranslation(['modules/usenet', 'common']);
 
   const { data, isLoading, isError, error } = useGetUsenetHistory({
     limit: PAGE_SIZE,
@@ -51,8 +52,14 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
   if (isError) {
     return (
       <Group position="center">
-        <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
+        <Alert
-          {t('history.error')}
+          icon={<IconAlertCircle size={16} />}
+          my="lg"
+          title={t('modules/usenet:history.error.title')}
+          color="red"
+          radius="md"
+        >
+          {t('modules/usenet:history.error.message')}
           <Code mt="sm" block>
             {(error as AxiosError)?.response?.data as string}
           </Code>
@@ -64,7 +71,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Title order={3}>{t('history.empty')}</Title>
+        <Title order={3}>{t('modules/usenet:history.empty')}</Title>
       </Center>
     );
   }
@@ -79,9 +86,9 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
         </colgroup>
         <thead>
           <tr>
-            <th>{t('history.header.name')}</th>
+            <th>{t('modules/usenet:history.header.name')}</th>
-            <th>{t('history.header.size')}</th>
+            <th>{t('modules/usenet:history.header.size')}</th>
-            <th>{t('history.header.duration')}</th>
+            <th>{t('modules/usenet:history.header.duration')}</th>
           </tr>
         </thead>
         <tbody>
@@ -105,11 +112,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
                 <Text size="xs">{humanFileSize(history.size)}</Text>
               </td>
               <td>
-                <Text size="xs">
+                <Text size="xs">{parseDuration(history.time, t)}</Text>
-                  {dayjs
-                    .duration(history.time, 's')
-                    .format(history.time < 60 ? 's [seconds]' : 'm [minutes] s [seconds] ')}
-                </Text>
               </td>
             </tr>
           ))}

src/modules/usenet/UsenetQueueList.tsx

@@ -55,8 +55,14 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ servi
   if (isError) {
     return (
       <Group position="center">
-        <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
+        <Alert
-          {t('queue.error')}
+          icon={<IconAlertCircle size={16} />}
+          my="lg"
+          title={t('queue.error.title')}
+          color="red"
+          radius="md"
+        >
+          {t('queue.error.message')}
           <Code mt="sm" block>
             {(error as AxiosError)?.response?.data as string}
           </Code>

src/tools/parseDuration.ts

@@ -0,0 +1,20 @@
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { TFunction } from 'next-i18next';
+
+dayjs.extend(duration);
+
+export const parseDuration = (time: number, t: TFunction): string => {
+  const etaDuration = dayjs.duration(time, 's');
+
+  let eta = etaDuration.format(`s [${t('common:time.seconds')}]`);
+
+  if (etaDuration.asMinutes() > 1) {
+    eta = etaDuration.format(`m [${t('common:time.minutes')}] `) + eta;
+  }
+  if (etaDuration.asHours() > 1) {
+    eta = etaDuration.format(`H [${t('common:time.hours')}] `) + eta;
+  }
+
+  return eta;
+};