✨ Add support for multiple RSS feeds

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
-    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`;
+    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,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%">
-        <Stack w="100%" spacing="xs">
-          {data.feed.items.map((item: any, index: number) => (
-            <Card
-              key={index}
-              withBorder
-              component={Link ?? 'div'}
-              href={item.link}
-              radius="md"
-              target="_blank"
-              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">
+      <ScrollArea className="scroll-area-w100" w="100%" mt="sm" mb="sm">
+        {data.map((item, index) => (
+          <Stack w="100%" spacing="xs">
+            {item.feed.items.map((item: any, index: number) => (
+              <Card
+                key={index}
+                withBorder
+                component={Link ?? 'div'}
+                href={item.link}
+                radius="md"
+                target="_blank"
+                w="100%"
+              >
                 {item.enclosure && (
-                  <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
-                    <Image
-                      src={item.enclosure?.url ?? undefined}
-                      width={140}
-                      height={140}
-                      radius="md"
-                      withPlaceholder
-                    />
-                  </MediaQuery>
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    className={classes.backgroundImage}
+                    src={item.enclosure.url ?? undefined}
+                    alt="backdrop"
+                  />
                 )}
-                <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>
+
+                <Flex gap="xs">
+                  {item.enclosure && (
+                    <MediaQuery query="(max-width: 1200px)" styles={{ display: 'none' }}>
+                      <Image
+                        src={item.enclosure?.url ?? undefined}
+                        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 color="dimmed" size="xs" lineClamp={3}>
-                    {item.content}
-                  </Text>
+                    <Text lineClamp={2}>{item.title}</Text>
+                    <Text color="dimmed" size="xs" lineClamp={3}>
+                      {item.content}
+                    </Text>
 
-                  {item.pubDate && <TimeDisplay date={formatDate(item.pubDate)} />}
+                    {item.pubDate && <TimeDisplay date={formatDate(item.pubDate)} />}
+                  </Flex>
                 </Flex>
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
+              </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"
-          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>
+      <ActionIcon
+        size="sm"
+        radius="xl"
+        pos="absolute"
+        right={10}
+        onClick={() => refetch()}
+        bottom={10}
+        styles={{
+          root: {
+            borderColor: 'red',
+          },
+        }}
+      >
+        <IconRefresh />
+      </ActionIcon>
     </Stack>
   );
 }