✨ Add support for multiple RSS feeds

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

@@ -243,6 +243,25 @@ const WidgetOptionTypeSwitch: FC<{
           </DraggableList>
         </Stack>
       );
+    case 'multiple-text':
+      return (
+        <MultiSelect
+          data={value.map((v: any) => ({ value: v, label: v }))}
+          label={t(`descriptor.settings.${key}.label`)}
+          description={t(`descriptor.settings.${key}.description`)}
+          defaultValue={value as string[]}
+          withinPortal
+          searchable
+          creatable
+          getCreateLabel={(query) => `+ Add ${query}`}
+          onChange={(values) =>
+            handleChange(
+              key,
+              values.map((item: string) => item)
+            )
+          }
+        />
+      );
     /* eslint-enable no-case-declarations */
     default:
       return null;

src/widgets/rss/RssWidgetTile.tsx

@@ -1,9 +1,9 @@
+import Link from 'next/link';
 import {
   ActionIcon,
   Badge,
   Card,
   Center,
-  createStyles,
   Flex,
   Group,
   Image,
@@ -14,31 +14,27 @@ import {
   Stack,
   Text,
   Title,
+  createStyles,
 } from '@mantine/core';
 import {
-  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://japantimes.co.jp/feed'],
     },
   },
   gridstack: {
@@ -56,34 +52,42 @@ interface RssTileProps {
   widget: IRssWidget;
 }
 
-export const useGetRssFeed = (feedUrl: string, widgetId: string) =>
+export const useGetRssFeeds = (feedUrls: string[], widgetId: string) =>
   useQuery({
-    queryKey: ['rss-feed', feedUrl],
+    queryKey: ['rss-feeds', feedUrls],
     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.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
+      // 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 +98,7 @@ function RssTile({ widget }: RssTileProps) {
     );
   }
 
-  if (!data.success || isError) {
+  if (data.length < 1 || isError) {
     return (
       <Center h="100%">
         <Stack align="center">
@@ -109,122 +113,78 @@ function RssTile({ widget }: RssTileProps) {
   return (
     <Stack h="100%">
       <LoadingOverlay visible={isFetching} />
-      <Flex align="end">{data.feed.title && <Title order={5}>{data.feed.title}</Title>}</Flex>
+      <ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm">
-      <ScrollArea className="scroll-area-w100" w="100%">
+        {data.map((item, index) => (
-        <Stack w="100%" spacing="xs">
+          <Stack w="100%" spacing="xs">
-          {data.feed.items.map((item: any, index: number) => (
+            {item.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 && <TimeDisplay 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}
+        <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>
   );
 }

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;