refactor: replace serverdata with suspense query (#1265)

* refactor: replace serverdata with suspense query

* fix: deepsource issues

packages/widgets/src/indexer-manager/component.tsx

@@ -1,25 +1,26 @@
 "use client";
 
-import { useState } from "react";
 import { Anchor, Button, Card, Container, Flex, Group, ScrollArea, Text } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import type { Indexer } from "@homarr/integrations/types";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationSelectedError } from "../errors";
 
-export default function IndexerManagerWidget({
-  options,
-  integrationIds,
-  serverData,
-}: WidgetComponentProps<"indexerManager">) {
+export default function IndexerManagerWidget({ options, integrationIds }: WidgetComponentProps<"indexerManager">) {
   const t = useI18n();
-  const [indexersData, setIndexersData] = useState<{ integrationId: string; indexers: Indexer[] }[]>(
-    serverData?.initialData ?? [],
+  const [indexersData] = clientApi.widget.indexerManager.getIndexersStatus.useSuspenseQuery(
+    { integrationIds },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      retry: false,
+    },
   );
+  const utils = clientApi.useUtils();
 
   const { mutate: testAll, isPending } = clientApi.widget.indexerManager.testAllIndexers.useMutation();
 
@@ -27,11 +28,11 @@ export default function IndexerManagerWidget({
     { integrationIds },
     {
       onData(newData) {
-        setIndexersData((prevData) => {
-          return prevData.map((item) =>
+        utils.widget.indexerManager.getIndexersStatus.setData({ integrationIds }, (previousData) =>
+          previousData?.map((item) =>
             item.integrationId === newData.integrationId ? { ...item, indexers: newData.indexers } : item,
-          );
-        });
+          ),
+        );
       },
     },
   );

packages/widgets/src/indexer-manager/index.ts

@@ -5,7 +5,7 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader, serverDataLoader } = createWidgetDefinition("indexerManager", {
+export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
   icon: IconReportSearch,
   options: optionsBuilder.from((factory) => ({
     openIndexerSiteInNewTab: factory.switch({
@@ -19,6 +19,4 @@ export const { definition, componentLoader, serverDataLoader } = createWidgetDef
       message: (t) => t("widget.indexerManager.error.internalServerError"),
     },
   },
-})
-  .withServerData(() => import("./serverData"))
-  .withDynamicImport(() => import("./component"));
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/indexer-manager/serverData.ts

@@ -1,27 +0,0 @@
-"use server";
-
-import { api } from "@homarr/api/server";
-
-import type { WidgetProps } from "../definition";
-
-export default async function getServerDataAsync({ integrationIds }: WidgetProps<"indexerManager">) {
-  if (integrationIds.length === 0) {
-    return {
-      initialData: [],
-    };
-  }
-
-  try {
-    const currentIndexers = await api.widget.indexerManager.getIndexersStatus({
-      integrationIds,
-    });
-
-    return {
-      initialData: currentIndexers,
-    };
-  } catch {
-    return {
-      initialData: [],
-    };
-  }
-}