refactor: replace serverdata with suspense query (#1265)

* refactor: replace serverdata with suspense query

* fix: deepsource issues

packages/widgets/src/rssFeed/component.tsx

@@ -3,15 +3,29 @@ import { Card, Flex, Group, Image, ScrollArea, Stack, Text } from "@mantine/core
 import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
+import { clientApi } from "@homarr/api/client";
+
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.scss";
 
-export default function RssFeed({ serverData, options }: WidgetComponentProps<"rssFeed">) {
-  if (serverData?.initialData === undefined) {
-    return null;
-  }
+export default function RssFeed({ options, itemId }: WidgetComponentProps<"rssFeed">) {
+  const [rssFeeds] = clientApi.widget.rssFeed.getFeeds.useSuspenseQuery(
+    {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      itemId: itemId!,
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      retry: false,
+      select(data) {
+        return data?.data ?? [];
+      },
+    },
+  );
 
-  const entries = serverData.initialData
+  const entries = rssFeeds
     .filter((feedGroup) => feedGroup.feed.entries !== undefined)
     .flatMap((feedGroup) => feedGroup.feed.entries)
     .filter((entry) => entry !== undefined)

packages/widgets/src/rssFeed/index.ts

@@ -11,7 +11,7 @@ import { optionsBuilder } from "../options";
  * - https://datatracker.ietf.org/doc/html/rfc5023
  * - https://www.jsonfeed.org/version/1.1/
  */
-export const { definition, componentLoader, serverDataLoader } = createWidgetDefinition("rssFeed", {
+export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
   icon: IconRss,
   options: optionsBuilder.from((factory) => ({
     feedUrls: factory.multiText({
@@ -27,6 +27,4 @@ export const { definition, componentLoader, serverDataLoader } = createWidgetDef
       validate: z.number().min(1).max(9999),
     }),
   })),
-})
-  .withServerData(() => import("./serverData"))
-  .withDynamicImport(() => import("./component"));
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/rssFeed/serverData.ts

@@ -1,21 +0,0 @@
-"use server";
-
-import { api } from "@homarr/api/server";
-
-import type { WidgetProps } from "../definition";
-
-export default async function getServerDataAsync({ itemId }: WidgetProps<"rssFeed">) {
-  if (!itemId) {
-    return {
-      initialData: undefined,
-      lastUpdatedAt: null,
-    };
-  }
-  const data = await api.widget.rssFeed.getFeeds({
-    itemId,
-  });
-  return {
-    initialData: data?.data,
-    lastUpdatedAt: data?.timestamp,
-  };
-}