✨ Switch docker module to tanstack/react-query

src/components/layout/header/Header.tsx

@@ -42,7 +42,7 @@ export function Header(props: any) {
         >
           <Search />
           {!editModeEnabled && <ToggleEditModeAction />}
-          {!editModeEnabled && <DockerMenuButton />}
+          <DockerMenuButton />
           <Indicator
             size={15}
             color="blue"

src/modules/Docker/ContainerActionBar.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { Button, Group } from '@mantine/core';
-import { showNotification, updateNotification } from '@mantine/notifications';
+import { notifications } from '@mantine/notifications';
 import {
   IconCheck,
   IconPlayerPlay,
@@ -29,7 +29,7 @@ function sendDockerCommand(
   containerName: string,
   reload: () => void
 ) {
-  showNotification({
+  notifications.show({
     id: containerId,
     loading: true,
     title: `${t(`actions.${action}.start`)} ${containerName}`,
@@ -40,7 +40,7 @@ function sendDockerCommand(
   axios
     .get(`/api/docker/container/${containerId}?action=${action}`)
     .then((res) => {
-      updateNotification({
+      notifications.show({
         id: containerId,
         title: containerName,
         message: `${t(`actions.${action}.end`)} ${containerName}`,
@@ -49,7 +49,7 @@ function sendDockerCommand(
       });
     })
     .catch((err) => {
-      updateNotification({
+      notifications.update({
         id: containerId,
         color: 'red',
         title: t('errors.unknownError.title'),
@@ -73,6 +73,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
   const { name: configName, config } = useConfigContext();
   const getLowestWrapper = () => config?.wrappers.sort((a, b) => a.position - b.position)[0];
 
+  if (process.env.DISABLE_EDIT_MODE === 'true') {
+    return null;
+  }
+
   return (
     <Group spacing="xs">
       <Button

src/modules/Docker/DockerModule.tsx

@@ -1,11 +1,11 @@
-import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Drawer, Tooltip } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
+import { IconBrandDocker } from '@tabler/icons-react';
-import { IconBrandDocker, IconX } from '@tabler/icons-react';
 import axios from 'axios';
 import Docker from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useCardStyles } from '../../components/layout/useCardStyles';
 import { useConfigContext } from '../../config/provider';
 
@@ -14,49 +14,32 @@ import DockerTable from './DockerTable';
 
 export default function DockerMenuButton(props: any) {
   const [opened, setOpened] = useState(false);
-  const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);
-  useHotkeys([['mod+B', () => setOpened(!opened)]]);
 
   const dockerEnabled = config?.settings.customization.layout.enabledDocker || false;
 
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ['containers'],
+    queryFn: async () => {
+      const containers = await axios.get('/api/docker/containers');
+      return containers.data;
+    },
+    enabled: dockerEnabled,
+  });
+  useHotkeys([['mod+B', () => setOpened(!opened)]]);
+
   const { t } = useTranslation('modules/docker');
 
   useEffect(() => {
-    reload();
+    refetch();
   }, [config?.settings]);
 
-  function reload() {
+  const reload = () => {
-    if (!dockerEnabled) {
+    refetch();
-      return;
-    }
-    setTimeout(() => {
-      axios
-        .get('/api/docker/containers')
-        .then((res) => {
-          setContainers(res.data);
     setSelection([]);
-        })
+  };
-        .catch(() => {
-          // Remove containers from the list
-          setContainers([]);
-          // Send an Error notification
-          showNotification({
-            autoClose: 1500,
-            title: <Text>{t('errors.integrationFailed.title')}</Text>,
-            color: 'red',
-            icon: <IconX />,
-            message: t('errors.integrationFailed.message'),
-          });
-        });
-    }, 300);
-  }
-
-  if (!dockerEnabled || process.env.DISABLE_EDIT_MODE === 'true') {
-    return null;
-  }
 
   return (
     <>
@@ -81,7 +64,7 @@ export default function DockerMenuButton(props: any) {
           },
         }}
       >
-        <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
+        <DockerTable containers={data} selection={selection} setSelection={setSelection} />
       </Drawer>
       <Tooltip label={t('actionIcon.tooltip')}>
         <ActionIcon