Merge branch 'dev' into HEAD

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

src/components/Dashboard/Views/DashboardView.tsx

@@ -60,7 +60,7 @@ const usePrepareGridstack = () => {
   }, [width]);
 
   return {
-    isReady: !!mainAreaWidth,
+    isReady: Boolean(mainAreaWidth),
     mainAreaRef,
   };
 };

src/hooks/widgets/dashDot/api.ts

@@ -29,7 +29,7 @@ export const useGetUsenetInfo = (params: UsenetInfoRequestParams) =>
       refetchInterval: POLLING_INTERVAL,
       keepPreviousData: true,
       retry: 2,
-      enabled: !!params.appId,
+      enabled: Boolean(params.appId),
     }
   );
 

src/hooks/widgets/rss/useGetRssFeed.tsx

@@ -1,10 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-export const useGetRssFeed = (feedUrl: string, widgetId: string) =>
-  useQuery({
-    queryKey: ['rss-feed', feedUrl],
-    queryFn: async () => {
-      const response = await fetch(`/api/modules/rss?widgetId=${widgetId}`);
-      return response.json();
-    },
-  });

src/pages/api/docker/DockerSingleton.ts

@@ -9,7 +9,12 @@ export default class DockerSingleton extends Docker {
 
   public static getInstance(): DockerSingleton {
     if (!DockerSingleton.dockerInstance) {
-      DockerSingleton.dockerInstance = new DockerSingleton();
+      DockerSingleton.dockerInstance = new Docker({
+        // If env variable DOCKER_HOST is not set, it will use the default socket
+        ...(process.env.DOCKER_HOST && { host: process.env.DOCKER_HOST }),
+        // Same thing for docker port
+        ...(process.env.DOCKER_PORT && { port: process.env.DOCKER_PORT }),
+      });
     }
     return DockerSingleton.dockerInstance;
   }

src/widgets/rss/RssWidgetTile.tsx

@@ -14,7 +14,6 @@ import {
   Stack,
   Text,
   Title,
-  UnstyledButton,
 } from '@mantine/core';
 import {
   IconBulldozer,
@@ -25,11 +24,11 @@ import {
   IconRss,
   IconSpeakerphone,
 } from '@tabler/icons';
+import { useQuery } from '@tanstack/react-query';
+import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import { useState } from 'react';
-import { useGetRssFeed } from '../../hooks/widgets/rss/useGetRssFeed';
-import { sleep } from '../../tools/client/time';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 
@@ -57,6 +56,15 @@ interface RssTileProps {
   widget: IRssWidget;
 }
 
+const useGetRssFeed = (feedUrl: string) =>
+  useQuery({
+    queryKey: ['rss-feed', feedUrl],
+    queryFn: async () => {
+      const response = await fetch('/api/modules/rss');
+      return response.json();
+    },
+  });
+
 function RssTile({ widget }: RssTileProps) {
   const { t } = useTranslation('modules/rss');
   const { data, isLoading, isFetching, isError, refetch } = useGetRssFeed(
@@ -66,9 +74,21 @@ function RssTile({ widget }: RssTileProps) {
   const { classes } = useStyles();
   const [loadingOverlayVisible, setLoadingOverlayVisible] = useState(false);
 
+  function formatDate(input: string): string {
+    // Parse the input date as a local date
+    const inputDate = dayjs(new Date(input));
+    const now = dayjs(); // Current date and time
+
+    // The difference between the input date and now
+    const difference = now.diff(inputDate, 'ms');
+    const duration = dayjs.duration(difference, 'ms');
+    const humanizedDuration = duration.humanize();
+    return `${humanizedDuration} ago`;
+  }
+
   if (!data || isLoading) {
     return (
-      <Center>
+      <Center h="100%">
         <Loader />
       </Center>
     );
@@ -88,32 +108,8 @@ function RssTile({ widget }: RssTileProps) {
 
   return (
     <Stack h="100%">
-      <LoadingOverlay visible={loadingOverlayVisible} />
-      <Flex gap="md">
-        {data.feed.image ? (
-          <Image
-            src={data.feed.image.url}
-            alt={data.feed.image.title}
-            width="auto"
-            height={40}
-            mx="auto"
-          />
-        ) : (
-          <Title order={6}>{data.feed.title}</Title>
-        )}
-        <UnstyledButton
-          onClick={async () => {
-            setLoadingOverlayVisible(true);
-            await Promise.all([sleep(1500), refetch()]);
-            setLoadingOverlayVisible(false);
-          }}
-          disabled={isFetching || isLoading}
-        >
-          <ActionIcon>
-            <IconRefresh />
-          </ActionIcon>
-        </UnstyledButton>
-      </Flex>
+      <LoadingOverlay visible={isFetching} />
+      <Flex align="end">{data.feed.title && <Title order={5}>{data.feed.title}</Title>}</Flex>
       <ScrollArea className="scroll-area-w100" w="100%">
         <Stack w="100%" spacing="xs">
           {data.feed.items.map((item: any, index: number) => (
@@ -151,7 +147,7 @@ function RssTile({ widget }: RssTileProps) {
                   {item.categories && (
                     <Flex gap="xs" wrap="wrap" h={20} style={{ overflow: 'hidden' }}>
                       {item.categories.map((category: any, categoryIndex: number) => (
-                        <Badge key={categoryIndex}>{category._}</Badge>
+                        <Badge key={categoryIndex}>{category}</Badge>
                       ))}
                     </Flex>
                   )}
@@ -161,7 +157,7 @@ function RssTile({ widget }: RssTileProps) {
                     {item.content}
                   </Text>
 
-                  {item.pubDate && <TimeDisplay date={item.pubDate} />}
+                  {item.pubDate && <TimeDisplay date={formatDate(item.pubDate)} />}
                 </Flex>
               </Flex>
             </Card>
@@ -170,23 +166,27 @@ function RssTile({ widget }: RssTileProps) {
       </ScrollArea>
 
       <Flex wrap="wrap" columnGap="md">
+        {data.feed.copyright && (
           <Group spacing="sm">
             <IconCopyright size={14} />
             <Text color="dimmed" size="sm">
               {data.feed.copyright}
             </Text>
           </Group>
+        )}
+        {data.feed.pubDate && (
           <Group>
             <IconCalendarTime size={14} />
             <Text color="dimmed" size="sm">
               {data.feed.pubDate}
             </Text>
           </Group>
+        )}
         {data.feed.lastBuildDate && (
           <Group>
             <IconBulldozer size={14} />
             <Text color="dimmed" size="sm">
-              {data.feed.lastBuildDate}
+              {formatDate(data.feed.lastBuildDate)}
             </Text>
           </Group>
         )}
@@ -205,6 +205,25 @@ function RssTile({ widget }: RssTileProps) {
             </Text>
           </Group>
         )}
+        <ActionIcon
+          size="sm"
+          radius="xl"
+          pos="absolute"
+          right={10}
+          onClick={() => refetch()}
+          bottom={10}
+          styles={{
+            root: {
+              borderColor: 'red',
+            },
+          }}
+        >
+          {data.feed.image ? (
+            <Image src={data.feed.image.url} alt={data.feed.image.title} mx="auto" />
+          ) : (
+            <IconRefresh />
+          )}
+        </ActionIcon>
       </Flex>
     </Stack>
   );

src/widgets/weather/useWeatherForCity.ts

@@ -20,7 +20,7 @@ export const useWeatherForCity = (cityName: string) => {
   const weatherQuery = useQuery({
     queryKey: ['weather', { cityName }],
     queryFn: () => fetchWeather(city?.results[0]),
-    enabled: !!city,
+    enabled: Boolean(city),
     cacheTime: 1000 * 60 * 60 * 6, // the weather is cached for 6 hours
     staleTime: 1000 * 60 * 5, // the weather is considered stale after 5 minutes
   });