🚧 wip migrate to next-i18n

src/modules/docker/ContainerActionBar.tsx

@@ -11,9 +11,10 @@ import {
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
+import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
 import { tryMatchService } from '../../tools/addToHomarr';
 import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
-import { useState } from 'react';
 
 function sendDockerCommand(
   action: string,
@@ -21,6 +22,8 @@ function sendDockerCommand(
   containerName: string,
   reload: () => void
 ) {
+  const { t } = useTranslation('modules/docker-module');
+
   showNotification({
     id: containerId,
     loading: true,
@@ -34,8 +37,8 @@ function sendDockerCommand(
     .then((res) => {
       updateNotification({
         id: containerId,
-        title: `Container ${containerName} ${action}ed`,
-        message: `Your container was successfully ${action}ed`,
+        title: t('messages.successfullyExecuted.message', { containerName, action }),
+        message: t('messages.successfullyExecuted.message', { action }),
         icon: <IconCheck />,
         autoClose: 2000,
       });
@@ -44,7 +47,7 @@ function sendDockerCommand(
       updateNotification({
         id: containerId,
         color: 'red',
-        title: 'There was an error',
+        title: t('errors.unknownError.title'),
         message: err.response.data.reason,
         autoClose: 2000,
       });
@@ -61,6 +64,8 @@ export interface ContainerActionBarProps {
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   const [opened, setOpened] = useState<boolean>(false);
+  const { t } = useTranslation('modules/docker-module');
+
   return (
     <Group>
       <Modal
@@ -68,12 +73,12 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         radius="md"
         opened={opened}
         onClose={() => setOpened(false)}
-        title="Add service"
+        title={t('actionBar.addService.title')}
       >
         <AddAppShelfItemForm
           setOpened={setOpened}
           {...tryMatchService(selected.at(0))}
-          message="Add service to homarr"
+          message={t('actionBar.addService.message')}
         />
       </Modal>
       <Button
@@ -89,7 +94,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         color="orange"
         radius="md"
       >
-        Restart
+        {t('actionBar.restart.title')}
       </Button>
       <Button
         leftIcon={<IconPlayerStop />}
@@ -104,7 +109,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         color="red"
         radius="md"
       >
-        Stop
+        {t('actionBar.stop.title')}
       </Button>
       <Button
         leftIcon={<IconPlayerPlay />}
@@ -119,10 +124,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         color="green"
         radius="md"
       >
-        Start
+        {t('actionBar.start.title')}
       </Button>
       <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
-        Refresh data
+        {t('actionBar.refreshData.title')}
       </Button>
       <Button
         leftIcon={<IconPlus />}
@@ -133,7 +138,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
           if (selected.length !== 1) {
             showNotification({
               autoClose: 5000,
-              title: <Title order={5}>Please only add one service at a time!</Title>,
+              title: <Title order={5}>{t('errors.oneServiceAtATime')}</Title>,
               color: 'red',
               message: undefined,
             });
@@ -142,7 +147,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
           }
         }}
       >
-        Add to Homarr
+        {t('actionBar.addToHomarr.title')}
       </Button>
       <Button
         leftIcon={<IconTrash />}
@@ -157,7 +162,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
           )
         }
       >
-        Remove
+        {t('actionBar.remove.title')}
       </Button>
     </Group>
   );

src/modules/docker/ContainerState.tsx

@@ -1,4 +1,5 @@
 import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import Dockerode from 'dockerode';
 
 export interface ContainerStateProps {
@@ -7,6 +8,9 @@ export interface ContainerStateProps {
 
 export default function ContainerState(props: ContainerStateProps) {
   const { state } = props;
+
+  const { t } = useTranslation('modules/docker-module');
+
   const options: {
     size: MantineSize;
     radius: MantineSize;
@@ -20,28 +24,28 @@ export default function ContainerState(props: ContainerStateProps) {
     case 'running': {
       return (
         <Badge color="green" {...options}>
-          Running
+          {t('table.states.running')}
         </Badge>
       );
     }
     case 'created': {
       return (
         <Badge color="cyan" {...options}>
-          Created
+          {t('table.states.created')}
         </Badge>
       );
     }
     case 'exited': {
       return (
         <Badge color="red" {...options}>
-          Stopped
+          {t('table.states.stopped')}
         </Badge>
       );
     }
     default: {
       return (
         <Badge color="purple" {...options}>
-          Unknown
+          {t('table.states.unknown')}
         </Badge>
       );
     }

src/modules/docker/DockerModule.tsx

@@ -1,10 +1,10 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
 import { IconBrandDocker, IconX } from '@tabler/icons';
 import { showNotification } from '@mantine/notifications';
-import { t } from 'i18next';
+import { useTranslation } from 'next-i18next';
 
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
@@ -25,6 +25,8 @@ export default function DockerMenuButton(props: any) {
   const { config } = useConfig();
   const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
 
+  const { t } = useTranslation('modules/docker-module');
+
   useEffect(() => {
     reload();
   }, [config.modules]);
@@ -44,10 +46,10 @@ export default function DockerMenuButton(props: any) {
           // Send an Error notification
           showNotification({
             autoClose: 1500,
-            title: <Text>{t('layout.header.docker.errors.integrationFailed.title')}</Text>,
+            title: <Text>{t('errors.integrationFailed.title')}</Text>,
             color: 'red',
             icon: <IconX />,
-            message: t('layout.header.docker.errors.integrationFailed.message'),
+            message: t('errors.integrationFailed.message'),
           })
         );
     }, 300);
@@ -69,7 +71,7 @@ export default function DockerMenuButton(props: any) {
       >
         <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
       </Drawer>
-      <Tooltip label={t('layout.header.docker.actionIcon.tooltip')}>
+      <Tooltip label={t('actionIcon.tooltip')}>
         <ActionIcon
           variant="default"
           radius="md"

src/modules/docker/DockerTable.tsx

@@ -1,6 +1,6 @@
 import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons';
-import { t } from 'i18next';
+import { useTranslation } from 'next-i18next';
 
 import Dockerode from 'dockerode';
 import { useEffect, useState } from 'react';
@@ -28,6 +28,8 @@ export default function DockerTable({
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');
 
+  const { t } = useTranslation('modules/docker-module');
+
   useEffect(() => {
     setContainers(containers);
   }, [containers]);
@@ -83,7 +85,7 @@ export default function DockerTable({
               ))}
             {element.Ports.length > 3 && (
               <Badge variant="filled">
-                {t('modules.docker.table.body.portCollapse', { ports: element.Ports.length - 3 })}
+                {t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
               </Badge>
             )}
           </Group>
@@ -98,7 +100,7 @@ export default function DockerTable({
   return (
     <ScrollArea style={{ height: '80vh' }}>
       <TextInput
-        placeholder={t('modules.docker.search.placeholder')}
+        placeholder={t('search.placeholder')}
         mt="md"
         icon={<IconSearch size={14} />}
         value={search}
@@ -115,10 +117,10 @@ export default function DockerTable({
                 transitionDuration={0}
               />
             </th>
-            <th>{t('modules.docker.table.header.name')}</th>
-            <th>{t('modules.docker.table.header.image')}</th>
-            <th>{t('modules.docker.table.header.ports')}</th>
-            <th>{t('modules.docker.table.header.state')}</th>
+            <th>{t('table.header.name')}</th>
+            <th>{t('table.header.image')}</th>
+            <th>{t('table.header.ports')}</th>
+            <th>{t('table.header.state')}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>