✨ 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',
-      defaultValue: '',
+      type: 'multiple-text',
+      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}`);
-      return response.json();
+      const responses = await Promise.all(
+        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
+    try {
       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`;
+    } 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,10 +113,10 @@ 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%">
+      <ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm">
+        {data.map((item, index) => (
           <Stack w="100%" spacing="xs">
-          {data.feed.items.map((item: any, index: number) => (
+            {item.feed.items.map((item: any, index: number) => (
               <Card
                 key={index}
                 withBorder
@@ -163,48 +167,9 @@ function RssTile({ widget }: RssTileProps) {
               </Card>
             ))}
           </Stack>
+        ))}
       </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">
-              {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"
@@ -218,13 +183,8 @@ function RssTile({ widget }: RssTileProps) {
           },
         }}
       >
-          {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;