diff --git a/src/hooks/widgets/rss/useGetRssFeed.tsx b/src/hooks/widgets/rss/useGetRssFeed.tsx deleted file mode 100644 index 2fc9e07e3..000000000 --- a/src/hooks/widgets/rss/useGetRssFeed.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; - -export const useGetRssFeed = (feedUrl: string) => - useQuery({ - queryKey: ['rss-feed', feedUrl], - queryFn: async () => { - const response = await fetch('/api/modules/rss'); - return response.json(); - }, - }); diff --git a/src/widgets/rss/RssWidgetTile.tsx b/src/widgets/rss/RssWidgetTile.tsx index 6c6e53b4e..b594803e6 100644 --- a/src/widgets/rss/RssWidgetTile.tsx +++ b/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( @@ -65,9 +73,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 ( -
+
); @@ -87,32 +107,8 @@ function RssTile({ widget }: RssTileProps) { return ( - - - {data.feed.image ? ( - {data.feed.image.title} - ) : ( - {data.feed.title} - )} - { - setLoadingOverlayVisible(true); - await Promise.all([sleep(1500), refetch()]); - setLoadingOverlayVisible(false); - }} - disabled={isFetching || isLoading} - > - - - - - + + {data.feed.title && {data.feed.title}} {data.feed.items.map((item: any, index: number) => ( @@ -150,7 +146,7 @@ function RssTile({ widget }: RssTileProps) { {item.categories && ( {item.categories.map((category: any, categoryIndex: number) => ( - {category._} + {category} ))} )} @@ -160,7 +156,7 @@ function RssTile({ widget }: RssTileProps) { {item.content} - {item.pubDate && } + {item.pubDate && } @@ -169,23 +165,27 @@ function RssTile({ widget }: RssTileProps) { - - - - {data.feed.copyright} - - - - - - {data.feed.pubDate} - - + {data.feed.copyright && ( + + + + {data.feed.copyright} + + + )} + {data.feed.pubDate && ( + + + + {data.feed.pubDate} + + + )} {data.feed.lastBuildDate && ( - {data.feed.lastBuildDate} + {formatDate(data.feed.lastBuildDate)} )} @@ -204,6 +204,25 @@ function RssTile({ widget }: RssTileProps) { )} + refetch()} + bottom={10} + styles={{ + root: { + borderColor: 'red', + }, + }} + > + {data.feed.image ? ( + {data.feed.image.title} + ) : ( + + )} + );