Merge pull request #797 from ajnart/rss-multiple-feeds

Rss multiple feeds

public/locales/en/common.json

@@ -10,6 +10,7 @@
   "changePosition": "Change position",
   "remove": "Remove",
   "removeConfirm": "Are you sure that you want to remove {{item}}?",
+  "createItem": "+ create {{item}}",
   "sections": {
     "settings": "Settings",
     "dangerZone": "Danger zone"

public/locales/en/modules/rss.json

@@ -5,15 +5,19 @@
     "settings": {
       "title": "Settings for RSS widget",
       "rssFeedUrl": {
-        "label": "RSS feed url"
+        "label": "RSS feeds urls",
+        "description": "The urls of the RSS feeds you want to display from."
+      },
+      "refreshInterval": {
+        "label": "Refresh interval (in minutes)"
       }
-    }
+    },
-  },
+    "card": {
-  "card": {
+      "errors": {
-    "errors": {
+        "general": {
-      "general": {
+          "title": "Unable to retrieve RSS feed",
-        "title": "Unable to retrieve RSS feed",
+          "text": "There was a problem reaching out the RSS feed. Make sure that you have correctly configured the RSS feed using a valid URL. URLs should match the official specification. After updating the feed, you may need to refresh the dashboard."
-        "text": "There was a problem reaching out the RSS feed. Make sure that you have correctly configured the RSS feed using a valid URL. URLs should match the official specification. After updating the feed, you may need to refresh the dashboard."
+        }
       }
     }
   }

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -184,6 +184,7 @@ const WidgetOptionTypeSwitch: FC<{
     case 'slider':
       return (
         <Stack spacing="xs">
+          <Text>{t(`descriptor.settings.${key}.label`)}</Text>
           <Slider
             color={primaryColor}
             label={value}
@@ -243,6 +244,25 @@ const WidgetOptionTypeSwitch: FC<{
           </DraggableList>
         </Stack>
       );
+    case 'multiple-text':
+      return (
+        <MultiSelect
+          data={value.map((name: any) => ({ value: name, label: name }))}
+          label={t(`descriptor.settings.${key}.label`)}
+          description={t(`descriptor.settings.${key}.description`)}
+          defaultValue={value as string[]}
+          withinPortal
+          searchable
+          creatable
+          getCreateLabel={(query) => t('common:createItem', query)}
+          onChange={(values) =>
+            handleChange(
+              key,
+              values.map((item: string) => item)
+            )
+          }
+        />
+      );
     /* eslint-enable no-case-declarations */
     default:
       return null;

src/pages/api/modules/rss/index.ts

@@ -1,17 +1,13 @@
-import Consola from 'consola';
-
-import { getCookie } from 'cookies-next';
-
-import { decode } from 'html-entities';
-
 import { NextApiRequest, NextApiResponse } from 'next';
-
+import Consola from 'consola';
+import { getCookie } from 'cookies-next';
+import { decode } from 'html-entities';
 import Parser from 'rss-parser';
-
 import { z } from 'zod';
+
 import { getConfig } from '../../../../tools/config/getConfig';
-import { IRssWidget } from '../../../../widgets/rss/RssWidgetTile';
 import { Stopwatch } from '../../../../tools/shared/time/stopwatch.tool';
+import { IRssWidget } from '../../../../widgets/rss/RssWidgetTile';
 
 type CustomItem = {
   'media:content': string;
@@ -28,6 +24,7 @@ const parser: Parser<any, CustomItem> = new Parser({
 
 const getQuerySchema = z.object({
   widgetId: z.string().uuid(),
+  feedUrl: z.string(),
 });
 
 export const Get = async (request: NextApiRequest, response: NextApiResponse) => {
@@ -44,7 +41,6 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
   const rssWidget = config.widgets.find(
     (x) => x.type === 'rss' && x.id === parseResult.data.widgetId
   ) as IRssWidget | undefined;
-
   if (
     !rssWidget ||
     !rssWidget.properties.rssFeedUrl ||
@@ -54,9 +50,9 @@ export const Get = async (request: NextApiRequest, response: NextApiResponse) =>
     return;
   }
 
-  Consola.info('Requesting RSS feed...');
+  Consola.info(`Requesting RSS feed at url ${parseResult.data.feedUrl}`);
   const stopWatch = new Stopwatch();
-  const feed = await parser.parseURL(rssWidget.properties.rssFeedUrl);
+  const feed = await parser.parseURL(parseResult.data.feedUrl);
   Consola.info(`Retrieved RSS feed after ${stopWatch.getEllapsedMilliseconds()} milliseconds`);
 
   const orderedFeed = {

src/widgets/rss/RssWidgetTile.tsx

@@ -1,44 +1,42 @@
+import Link from 'next/link';
 import {
   ActionIcon,
   Badge,
   Card,
   Center,
-  createStyles,
   Flex,
   Group,
   Image,
   Loader,
-  LoadingOverlay,
   MediaQuery,
   ScrollArea,
   Stack,
   Text,
   Title,
+  createStyles,
 } from '@mantine/core';
-import {
+import { IconClock, IconRefresh, IconRss } from '@tabler/icons';
-  IconBulldozer,
-  IconCalendarTime,
-  IconClock,
-  IconCopyright,
-  IconRefresh,
-  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 { IWidget } from '../widgets';
 import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
 
 const definition = defineWidget({
   id: 'rss',
   icon: IconRss,
   options: {
     rssFeedUrl: {
-      type: 'text',
+      type: 'multiple-text',
-      defaultValue: '',
+      defaultValue: ['https://github.com/ajnart/homarr/tags.atom'],
+    },
+    refreshInterval: {
+      type: 'slider',
+      defaultValue: 30,
+      min: 15,
+      max: 300,
+      step: 15,
     },
   },
   gridstack: {
@@ -56,34 +54,45 @@ interface RssTileProps {
   widget: IRssWidget;
 }
 
-export const useGetRssFeed = (feedUrl: string, widgetId: string) =>
+export const useGetRssFeeds = (feedUrls: string[], refreshInterval: number, widgetId: string) =>
   useQuery({
-    queryKey: ['rss-feed', feedUrl],
+    queryKey: ['rss-feeds', feedUrls],
+    // Cache the results for 24 hours
+    cacheTime: 1000 * 60 * 60 * 24,
+    staleTime: 1000 * 60 * refreshInterval,
     queryFn: async () => {
-      const response = await fetch(`/api/modules/rss?widgetId=${widgetId}`);
+      const responses = await Promise.all(
-      return response.json();
+        feedUrls.map((feedUrl) =>
+          fetch(
+            `/api/modules/rss?widgetId=${widgetId}&feedUrl=${encodeURIComponent(feedUrl)}`
+          ).then((response) => response.json())
+        )
+      );
+      return responses;
     },
   });
 
 function RssTile({ widget }: RssTileProps) {
   const { t } = useTranslation('modules/rss');
-  const { data, isLoading, isFetching, isError, refetch } = useGetRssFeed(
+  const { data, isLoading, isFetching, isError, refetch } = useGetRssFeeds(
     widget.properties.rssFeedUrl,
+    widget.properties.refreshInterval,
     widget.id
   );
   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));
+    try {
-    const now = dayjs(); // Current date and time
+      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 difference = now.diff(inputDate, 'ms');
+      const duration = dayjs.duration(difference, 'ms');
-    const duration = dayjs.duration(difference, 'ms');
+      const humanizedDuration = duration.humanize();
-    const humanizedDuration = duration.humanize();
+      return `${humanizedDuration} ago`;
-    return `${humanizedDuration} ago`;
+    } catch (e) {
+      return 'Error';
+    }
   }
 
   if (!data || isLoading) {
@@ -94,7 +103,7 @@ function RssTile({ widget }: RssTileProps) {
     );
   }
 
-  if (!data.success || isError) {
+  if (data.length < 1 || isError) {
     return (
       <Center h="100%">
         <Stack align="center">
@@ -108,133 +117,95 @@ function RssTile({ widget }: RssTileProps) {
 
   return (
     <Stack h="100%">
-      <LoadingOverlay visible={isFetching} />
+      <ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm">
-      <Flex align="end">{data.feed.title && <Title order={5}>{data.feed.title}</Title>}</Flex>
+        {data.map((feed, index) => (
-      <ScrollArea className="scroll-area-w100" w="100%">
+          <Stack w="100%" spacing="xs">
-        <Stack w="100%" spacing="xs">
+            {feed.feed.items.map((item: any, index: number) => (
-          {data.feed.items.map((item: any, index: number) => (
+              <Card
-            <Card
+                key={index}
-              key={index}
+                withBorder
-              withBorder
+                component={Link ?? 'div'}
-              component={Link ?? 'div'}
+                href={item.link}
-              href={item.link}
+                radius="md"
-              radius="md"
+                target="_blank"
-              target="_blank"
+                w="100%"
-              w="100%"
+              >
-            >
-              {item.enclosure && (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  className={classes.backgroundImage}
-                  src={item.enclosure.url ?? undefined}
-                  alt="backdrop"
-                />
-              )}
-
-              <Flex gap="xs">
                 {item.enclosure && (
-                  <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
+                  // eslint-disable-next-line @next/next/no-img-element
-                    <Image
+                  <img
-                      src={item.enclosure?.url ?? undefined}
+                    className={classes.backgroundImage}
-                      width={140}
+                    src={item.enclosure.url ?? undefined}
-                      height={140}
+                    alt="backdrop"
-                      radius="md"
+                  />
-                      withPlaceholder
-                    />
-                  </MediaQuery>
                 )}
-                <Flex gap={2} direction="column" w="100%">
+
-                  {item.categories && (
+                <Flex gap="xs">
-                    <Flex gap="xs" wrap="wrap" h={20} style={{ overflow: 'hidden' }}>
+                  {item.enclosure && (
-                      {item.categories.map((category: any, categoryIndex: number) => (
+                    <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
-                        <Badge key={categoryIndex}>{category}</Badge>
+                      <Image
-                      ))}
+                        src={item.enclosure?.url ?? undefined}
-                    </Flex>
+                        width={140}
+                        height={140}
+                        radius="md"
+                        withPlaceholder
+                      />
+                    </MediaQuery>
                   )}
+                  <Flex gap={2} direction="column" w="100%">
+                    {item.categories && (
+                      <Flex gap="xs" wrap="wrap" h={20} style={{ overflow: 'hidden' }}>
+                        {item.categories.map((category: any, categoryIndex: number) => (
+                          <Badge key={categoryIndex}>{category}</Badge>
+                        ))}
+                      </Flex>
+                    )}
 
-                  <Text lineClamp={2}>{item.title}</Text>
+                    <Text lineClamp={2}>{item.title}</Text>
-                  <Text color="dimmed" size="xs" lineClamp={3}>
+                    <Text color="dimmed" size="xs" lineClamp={3}>
-                    {item.content}
+                      {item.content}
-                  </Text>
+                    </Text>
 
-                  {item.pubDate && <TimeDisplay date={formatDate(item.pubDate)} />}
+                    {item.pubDate && (
+                      <InfoDisplay title={feed.feed.title} date={formatDate(item.pubDate)} />
+                    )}
+                  </Flex>
                 </Flex>
-              </Flex>
+              </Card>
-            </Card>
+            ))}
-          ))}
+          </Stack>
-        </Stack>
+        ))}
       </ScrollArea>
 
-      <Flex wrap="wrap" columnGap="md">
+      <ActionIcon
-        {data.feed.copyright && (
+        size="sm"
-          <Group spacing="sm">
+        radius="xl"
-            <IconCopyright size={14} />
+        pos="absolute"
-            <Text color="dimmed" size="sm">
+        right={10}
-              {data.feed.copyright}
+        onClick={() => refetch()}
-            </Text>
+        bottom={10}
-          </Group>
+        styles={{
-        )}
+          root: {
-        {data.feed.pubDate && (
+            borderColor: 'red',
-          <Group>
+          },
-            <IconCalendarTime size={14} />
+        }}
-            <Text color="dimmed" size="sm">
+      >
-              {data.feed.pubDate}
+        {isFetching ? <Loader /> : <IconRefresh />}
-            </Text>
+      </ActionIcon>
-          </Group>
-        )}
-        {data.feed.lastBuildDate && (
-          <Group>
-            <IconBulldozer size={14} />
-            <Text color="dimmed" size="sm">
-              {formatDate(data.feed.lastBuildDate)}
-            </Text>
-          </Group>
-        )}
-        {data.feed.feedUrl && (
-          <Group spacing="sm">
-            <IconSpeakerphone size={14} />
-            <Text
-              color="dimmed"
-              size="sm"
-              variant="link"
-              target="_blank"
-              component={Link}
-              href={data.feed.feedUrl}
-            >
-              Feed URL
-            </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>
   );
 }
 
-const TimeDisplay = ({ date }: { date: string }) => (
+const InfoDisplay = ({ date, title }: { date: string; title: string | undefined }) => (
   <Group mt="auto" spacing="xs">
     <IconClock size={14} />
     <Text size="xs" color="dimmed">
       {date}
     </Text>
+    {title && (
+      <Badge variant="outline" size="xs">
+        {title}
+      </Badge>
+    )}
   </Group>
 );
 

src/widgets/widgets.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   MultiSelectProps,
   NumberInputProps,
@@ -7,7 +8,7 @@ import {
   TextInputProps,
 } from '@mantine/core';
 import { TablerIcon } from '@tabler/icons';
-import React from 'react';
+
 import { AreaType } from '../types/area';
 import { ShapeType } from '../types/shape';
 
@@ -37,7 +38,8 @@ export type IWidgetOptionValue =
   | ISliderInputOptionValue
   | ISelectOptionValue
   | INumberInputOptionValue
-  | IDraggableListInputValue;
+  | IDraggableListInputValue
+  | IMultipleTextInputOptionValue;
 
 // Interface for data type
 interface DataType {
@@ -105,6 +107,13 @@ export type IDraggableListInputValue = {
   >;
 };
 
+// will show a text-input with a button to add a new line
+export type IMultipleTextInputOptionValue = {
+  type: 'multiple-text';
+  defaultValue: string[];
+  inputProps?: Partial<TextInputProps>;
+};
+
 // is used to type the widget definitions which will be used to display all widgets
 export type IWidgetDefinition<TKey extends string = string> = {
   id: TKey;