refactor: replace serverdata with suspense query (#1265)

* refactor: replace serverdata with suspense query

* fix: deepsource issues

packages/widgets/src/media-requests/list/component.tsx

@@ -15,30 +15,26 @@ export default function MediaServerWidget({
   integrationIds,
   isEditMode,
   options,
-  serverData,
   itemId,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
   const t = useScopedI18n("widget.mediaRequests-requestList");
-  const isQueryEnabled = Boolean(itemId);
-  const { data: mediaRequests, isError: _isError } = clientApi.widget.mediaRequests.getLatestRequests.useQuery(
+  const [mediaRequests] = clientApi.widget.mediaRequests.getLatestRequests.useSuspenseQuery(
     {
       integrationIds,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       itemId: itemId!,
     },
     {
-      initialData: !serverData ? undefined : serverData.initialData,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
-      enabled: integrationIds.length > 0 && isQueryEnabled,
     },
   );
 
   const sortedMediaRequests = useMemo(
     () =>
       mediaRequests
-        ?.filter((group) => group != null)
+        .filter((group) => group != null)
         .flatMap((group) => group.data)
         .flatMap(({ medias, integration }) => medias.map((media) => ({ ...media, integrationId: integration.id })))
         .sort(({ status: statusA }, { status: statusB }) => {
@@ -49,7 +45,7 @@ export default function MediaServerWidget({
             return 1;
           }
           return 0;
-        }) ?? [],
+        }),
     [mediaRequests, integrationIds],
   );
 

packages/widgets/src/media-requests/list/index.ts

@@ -5,7 +5,7 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createWidgetDefinition } from "../../definition";
 import { optionsBuilder } from "../../options";
 
-export const { componentLoader, definition, serverDataLoader } = createWidgetDefinition("mediaRequests-requestList", {
+export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
   icon: IconZoomQuestion,
   options: optionsBuilder.from((factory) => ({
     linksTargetNewTab: factory.switch({
@@ -13,6 +13,4 @@ export const { componentLoader, definition, serverDataLoader } = createWidgetDef
     }),
   })),
   supportedIntegrations: getIntegrationKindsByCategory("mediaRequest"),
-})
-  .withServerData(() => import("./serverData"))
-  .withDynamicImport(() => import("./component"));
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/media-requests/list/serverData.ts

@@ -1,22 +0,0 @@
-"use server";
-
-import { api } from "@homarr/api/server";
-
-import type { WidgetProps } from "../../definition";
-
-export default async function getServerDataAsync({ integrationIds, itemId }: WidgetProps<"mediaRequests-requestList">) {
-  if (integrationIds.length === 0 || !itemId) {
-    return {
-      initialData: undefined,
-    };
-  }
-
-  const requests = await api.widget.mediaRequests.getLatestRequests({
-    integrationIds,
-    itemId,
-  });
-
-  return {
-    initialData: requests.filter((group) => group != null),
-  };
-}

packages/widgets/src/media-requests/stats/component.tsx

@@ -27,30 +27,26 @@ import classes from "./component.module.css";
 export default function MediaServerWidget({
   integrationIds,
   isEditMode,
-  serverData,
   itemId,
 }: WidgetComponentProps<"mediaRequests-requestStats">) {
   const t = useScopedI18n("widget.mediaRequests-requestStats");
-  const isQueryEnabled = Boolean(itemId);
-  const { data: requestStats, isError: _isError } = clientApi.widget.mediaRequests.getStats.useQuery(
+  const [requestStats] = clientApi.widget.mediaRequests.getStats.useSuspenseQuery(
     {
       integrationIds,
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       itemId: itemId!,
     },
     {
-      initialData: !serverData ? undefined : serverData.initialData,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
-      enabled: integrationIds.length > 0 && isQueryEnabled,
     },
   );
 
   const { width, height, ref } = useElementSize();
 
   const baseData = useMemo(
-    () => requestStats?.filter((group) => group != null).flatMap((group) => group.data) ?? [],
+    () => requestStats.filter((group) => group != null).flatMap((group) => group.data),
     [requestStats],
   );
 

packages/widgets/src/media-requests/stats/index.ts

@@ -4,10 +4,8 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
 import { createWidgetDefinition } from "../../definition";
 
-export const { componentLoader, definition, serverDataLoader } = createWidgetDefinition("mediaRequests-requestStats", {
+export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
   icon: IconChartBar,
   options: {},
   supportedIntegrations: getIntegrationKindsByCategory("mediaRequest"),
-})
-  .withServerData(() => import("./serverData"))
-  .withDynamicImport(() => import("./component"));
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/media-requests/stats/serverData.ts

@@ -1,25 +0,0 @@
-"use server";
-
-import { api } from "@homarr/api/server";
-
-import type { WidgetProps } from "../../definition";
-
-export default async function getServerDataAsync({
-  integrationIds,
-  itemId,
-}: WidgetProps<"mediaRequests-requestStats">) {
-  if (integrationIds.length === 0 || !itemId) {
-    return {
-      initialData: undefined,
-    };
-  }
-
-  const stats = await api.widget.mediaRequests.getStats({
-    integrationIds,
-    itemId,
-  });
-
-  return {
-    initialData: stats.filter((group) => group != null),
-  };
-}