From 4bdfcce060498095a4b21af6bb126ae0688118b1 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Wed, 31 Aug 2022 15:52:16 +0200
Subject: [PATCH] :pencil2: Fix locales, button order and add reload state

---
 next-i18next.config.js                    |  1 -
 public/locales/en/modules/docker.json     |  8 ++---
 src/modules/docker/ContainerActionBar.tsx | 22 +++++++++---
 src/modules/docker/DockerTable.tsx        | 44 ++++++++++++-----------
 4 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/next-i18next.config.js b/next-i18next.config.js
index a503cd30c..d46000123 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   // https://www.i18next.com/overview/configuration-options#logging
-  debug: process.env.NODE_ENV === 'development',
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de', 'es', 'fr', 'it', 'ja', 'nl', 'ru', 'sv', 'zh'],
diff --git a/public/locales/en/modules/docker.json b/public/locales/en/modules/docker.json
index a4d738b61..8e8bfa590 100644
--- a/public/locales/en/modules/docker.json
+++ b/public/locales/en/modules/docker.json
@@ -11,7 +11,8 @@
       "name": "Name",
       "image": "Image",
       "ports": "Ports",
-      "state": "State"
+      "state": "State",
+      "addToHomarr": "Add to homarr"
     },
     "body": {
       "portCollapse": "{{ports}} more"
@@ -37,9 +38,8 @@
     "start": {
       "title": "Start"
     },
-    "refreshData": "Refresh data",
-    "addToHomarr": {
-      "title": "Add to Homarr"
+    "refreshData": {
+      "title": "Refresh data"
     },
     "remove": {
       "title": "Remove"
diff --git a/src/modules/docker/ContainerActionBar.tsx b/src/modules/docker/ContainerActionBar.tsx
index 392246a2c..cca2970b7 100644
--- a/src/modules/docker/ContainerActionBar.tsx
+++ b/src/modules/docker/ContainerActionBar.tsx
@@ -11,6 +11,7 @@ import {
 import axios from 'axios';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
 import { TFunction } from 'react-i18next';
 
 let t: TFunction<'modules/docker', undefined>;
@@ -61,9 +62,25 @@ export interface ContainerActionBarProps {
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   t = useTranslation('modules/docker').t;
-
+  const [isLoading, setisLoading] = useState(false);
   return (
     <Group>
+      <Button
+        leftIcon={<IconRefresh />}
+        onClick={() => {
+          setisLoading(true);
+          setTimeout(() => {
+            reload();
+            setisLoading(false);
+          }, 750);
+        }}
+        variant="light"
+        color="violet"
+        loading={isLoading}
+        radius="md"
+      >
+        {t('actionBar.refreshData.title')}
+      </Button>
       <Button
         leftIcon={<IconRotateClockwise />}
         onClick={() =>
@@ -112,9 +129,6 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
       >
         {t('actionBar.start.title')}
       </Button>
-      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" color="violet" radius="md">
-        {t('actionBar.refreshData.title')}
-      </Button>
       <Button
         leftIcon={<IconTrash />}
         color="red"
diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx
index 85c8c94dd..6d4d7b2c9 100644
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -1,4 +1,14 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, Modal, ActionIcon, Tooltip } from '@mantine/core';
+import {
+  Table,
+  Checkbox,
+  Group,
+  Badge,
+  createStyles,
+  ScrollArea,
+  TextInput,
+  Modal,
+  ActionIcon,
+} from '@mantine/core';
 import { IconPlus, IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
@@ -71,9 +81,7 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        <td>
-          {element.Image}
-        </td>
+        <td>{element.Image}</td>
         <td>
           <Group>
             {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -99,21 +107,17 @@ export default function DockerTable({
           <ContainerState state={element.State} />
         </td>
         <td>
-          <Group>
-            <Tooltip label={t('table.body.action.addToHomarr')}>
-              <ActionIcon
-                color="indigo"
-                variant="light"
-                radius="md"
-                onClick={() => {
-                  setRowSelected(element);
-                  setOpened(true);
-                }}
-              >
-                <IconPlus />
-              </ActionIcon>
-            </Tooltip>
-          </Group>
+          <ActionIcon
+            color="indigo"
+            variant="light"
+            radius="md"
+            onClick={() => {
+              setRowSelected(element);
+              setOpened(true);
+            }}
+          >
+            <IconPlus />
+          </ActionIcon>
         </td>
       </tr>
     );
@@ -158,7 +162,7 @@ export default function DockerTable({
             <th>{t('table.header.image')}</th>
             <th>{t('table.header.ports')}</th>
             <th>{t('table.header.state')}</th>
-            <th>{t('table.header.action')}</th>
+            <th>{t('table.header.addToHomarr')}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>