feat: Load data on integration selection

homarr-labs · Aug 1, 2024 · 3db45e0 · 3db45e0
1 parent 7ba186d
commit 3db45e0
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
@@ -46,7 +46,7 @@ export default function MediaServerWidget({
     },
     {
       initialData:
-        !serverData ? [] : serverData.initialData,
+        !serverData ? undefined : serverData.initialData,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
@@ -57,7 +57,7 @@ export default function MediaServerWidget({
   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 }) => {
@@ -68,7 +68,7 @@ export default function MediaServerWidget({
             return 1;
           }
           return 0;
-        }),
+        }) ?? [],
     [mediaRequests, integrationIds],
   );
 

diff --git a/packages/widgets/src/media-requests/list/serverData.ts b/packages/widgets/src/media-requests/list/serverData.ts
@@ -7,7 +7,7 @@ import type { WidgetProps } from "../../definition";
 export default async function getServerDataAsync({ integrationIds, itemId }: WidgetProps<"mediaRequests-requestList">) {
   if (integrationIds.length === 0 || !itemId) {
     return {
-      initialData: [],
+      initialData: undefined,
     };
   }
 

diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
@@ -15,6 +15,7 @@ import {
 } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
+import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { RequestStats } from "../../../../integrations/src/interfaces/media-requests/media-request";
@@ -25,27 +26,47 @@ export default function MediaServerWidget({
   integrationIds,
   isEditMode,
   serverData,
+  itemId,
 }: WidgetComponentProps<"mediaRequests-requestStats">) {
   const t = useScopedI18n("widget.mediaRequests-requestStats");
   const tCommon = useScopedI18n("common");
+  const isQueryEnabled = Boolean(itemId);
+  const { data: requestStats, isError: _isError } = clientApi.widget.mediaRequests.getStats.useQuery(
+    {
+      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 stats = useMemo(() => serverData?.initialData.flatMap(({ stats }) => stats), [serverData, integrationIds]);
+  const baseData = useMemo(
+    () => requestStats?.filter((group) => group != null).flatMap((group) => group.data) ?? [],
+    [requestStats],
+  );
+
+  const stats = useMemo(() => baseData.flatMap(({ stats }) => stats), [baseData]);
   const users = useMemo(
     () =>
-      serverData?.initialData
+      baseData
         .flatMap(({ integration, users }) =>
           users.flatMap((user) => ({ ...user, appKind: integration.kind, appName: integration.name })),
         )
-        .sort(({ requestCount: countA }, { requestCount: countB }) => countB - countA)
-        .slice(0, Math.max(Math.trunc((height / width) * 5), 1)),
-    [serverData, integrationIds, width, height],
+        .sort(({ requestCount: countA }, { requestCount: countB }) => countB - countA),
+    [baseData],
   );
 
-  if (integrationIds.length === 0) return <Center h="100%">{tCommon("errors.noIntegration")}</Center>;
+  if (integrationIds.length === 0) return <Center ref={ref} h="100%">{tCommon("errors.noIntegration")}</Center>;
 
-  if (!users || users.length === 0 || !stats || stats.length === 0) return <Center h="100%">{tCommon("errors.noData")}</Center>;
+  if (users.length === 0 || stats.length === 0) return <Center ref={ref} h="100%">{tCommon("errors.noData")}</Center>;
 
   //Add processing and available
   const data = [
@@ -138,7 +159,7 @@ export default function MediaServerWidget({
         gap="2cqmin"
         style={{ overflow: "hidden" }}
       >
-        {users.map((user) => (
+        {users.slice(0, Math.max(Math.floor((height / width) * 5), 1)).map((user) => (
           <Card
             className={combineClasses(
               "mediaRequests-stats-users-user-wrapper",

diff --git a/packages/widgets/src/media-requests/stats/serverData.ts b/packages/widgets/src/media-requests/stats/serverData.ts
@@ -10,7 +10,7 @@ export default async function getServerDataAsync({
 }: WidgetProps<"mediaRequests-requestStats">) {
   if (integrationIds.length === 0 || !itemId) {
     return {
-      initialData: [],
+      initialData: undefined,
     };
   }
 
@@ -20,6 +20,6 @@ export default async function getServerDataAsync({
   });
 
   return {
-    initialData: stats.filter((group) => group != null).flatMap((group) => group.data),
+    initialData: stats.filter((group) => group != null),
   };
 }