fix: Fix typecheck, lint issues and errors brought to dnshole summary. (#916)

packages/widgets/src/dns-hole/summary/component.tsx

@@ -1,12 +1,12 @@
 "use client";
 
+import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
 import { Box, Card, Flex, Text } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
 import { formatNumber } from "@homarr/common";
 import type { stringOrTranslation, TranslationFunction } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
@@ -16,27 +16,23 @@ import type { TablerIcon } from "@homarr/ui";
 import type { WidgetComponentProps, WidgetProps } from "../../definition";
 import { NoIntegrationSelectedError } from "../../errors";
 
-export default function DnsHoleSummaryWidget({ options, integrationIds }: WidgetComponentProps<"dnsHoleSummary">) {
+export default function DnsHoleSummaryWidget({
+  options,
+  integrationIds,
+  serverData,
+}: WidgetComponentProps<"dnsHoleSummary">) {
   const integrationId = integrationIds.at(0);
 
   if (!integrationId) {
     throw new NoIntegrationSelectedError();
   }
 
-  const [data] = clientApi.widget.dnsHole.summary.useSuspenseQuery(
-    {
-      integrationIds,
-    },
-    {
-      refetchOnMount: false,
-      retry: false,
-    },
-  );
+  const data = useMemo(() => (serverData?.initialData ?? []).flatMap((summary) => summary.summary), [serverData]);
 
   return (
     <Box h="100%" {...boxPropsByLayout(options.layout)}>
       {stats.map((item, index) => (
-        <StatCard key={index} item={item} usePiHoleColors={options.usePiHoleColors} data={data[0]?.summary} />
+        <StatCard key={index} item={item} usePiHoleColors={options.usePiHoleColors} data={data} />
       ))}
     </Box>
   );
@@ -45,15 +41,22 @@ export default function DnsHoleSummaryWidget({ options, integrationIds }: Widget
 const stats = [
   {
     icon: IconBarrierBlock,
-    value: ({ adsBlockedToday }) => formatNumber(adsBlockedToday, 2),
+    value: (data) =>
+      formatNumber(
+        data.reduce((count, { adsBlockedToday }) => count + adsBlockedToday, 0),
+        2,
+      ),
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedToday"),
     color: "rgba(240, 82, 60, 0.4)", // RED
   },
   {
     icon: IconPercentage,
-    value: ({ adsBlockedTodayPercentage }, t) =>
+    value: (data, t) =>
       t("common.rtl", {
-        value: formatNumber(adsBlockedTodayPercentage, 2),
+        value: formatNumber(
+          data.reduce((count, { adsBlockedTodayPercentage }) => count + adsBlockedTodayPercentage, 0),
+          2,
+        ),
         symbol: "%",
       }),
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedTodayPercentage"),
@@ -61,13 +64,21 @@ const stats = [
   },
   {
     icon: IconSearch,
-    value: ({ dnsQueriesToday }) => formatNumber(dnsQueriesToday, 2),
+    value: (data) =>
+      formatNumber(
+        data.reduce((count, { dnsQueriesToday }) => count + dnsQueriesToday, 0),
+        2,
+      ),
     label: (t) => t("widget.dnsHoleSummary.data.dnsQueriesToday"),
     color: "rgba(0, 175, 218, 0.4)", // BLUE
   },
   {
     icon: IconWorldWww,
-    value: ({ domainsBeingBlocked }) => formatNumber(domainsBeingBlocked, 2),
+    value: (data) =>
+      formatNumber(
+        data.reduce((count, { domainsBeingBlocked }) => count + domainsBeingBlocked, 0),
+        2,
+      ),
     label: (t) => t("widget.dnsHoleSummary.data.domainsBeingBlocked"),
     color: "rgba(0, 176, 96, 0.4)", // GREEN
   },
@@ -75,14 +86,14 @@ const stats = [
 
 interface StatItem {
   icon: TablerIcon;
-  value: (x: RouterOutputs["widget"]["dnsHole"]["summary"], t: TranslationFunction) => string;
+  value: (x: RouterOutputs["widget"]["dnsHole"]["summary"][number]["summary"][], t: TranslationFunction) => string;
   label: stringOrTranslation;
   color: string;
 }
 
 interface StatCardProps {
   item: StatItem;
-  data: RouterOutputs["widget"]["dnsHole"]["summary"];
+  data: RouterOutputs["widget"]["dnsHole"]["summary"][number]["summary"][];
   usePiHoleColors: boolean;
 }
 const StatCard = ({ item, data, usePiHoleColors }: StatCardProps) => {

packages/widgets/src/dns-hole/summary/serverData.ts

@@ -21,7 +21,7 @@ export default async function getServerDataAsync({ integrationIds }: WidgetProps
     };
   } catch {
     return {
-      initialData: undefined,
+      initialData: [],
     };
   }
 }