refactor: replace custom no integration selected logic with existing error (#1166)

packages/translation/src/lang/en.ts

@@ -532,10 +532,6 @@ export default {
     },
     beta: "Beta",
     error: "Error",
-    errors: {
-      noData: "No data to show",
-      noIntegration: "No integration selected",
-    },
     action: {
       add: "Add",
       apply: "Apply",
@@ -1098,6 +1094,7 @@ export default {
           logs: "Check logs for more details",
         },
         noIntegration: "No integration selected",
+        noData: "No integration data available",
       },
       option: {},
     },

packages/widgets/src/errors/no-data-integration.tsx

@@ -0,0 +1,19 @@
+import { IconDatabaseOff } from "@tabler/icons-react";
+
+import type { TranslationFunction } from "@homarr/translation";
+
+import { ErrorBoundaryError } from "./base";
+
+export class NoIntegrationDataError extends ErrorBoundaryError {
+  constructor() {
+    super("No integration data available");
+  }
+
+  public getErrorBoundaryData() {
+    return {
+      icon: IconDatabaseOff,
+      message: (t: TranslationFunction) => t("widget.common.error.noData"),
+      showLogsLink: false,
+    };
+  }
+}

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

@@ -1,18 +1,5 @@
 import { useMemo } from "react";
-import {
-  ActionIcon,
-  Anchor,
-  Avatar,
-  Badge,
-  Card,
-  Center,
-  Group,
-  Image,
-  ScrollArea,
-  Stack,
-  Text,
-  Tooltip,
-} from "@mantine/core";
+import { ActionIcon, Anchor, Avatar, Badge, Card, Group, Image, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconThumbDown, IconThumbUp } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -21,6 +8,8 @@ import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { NoIntegrationSelectedError } from "../../errors";
+import { NoIntegrationDataError } from "../../errors/no-data-integration";
 
 export default function MediaServerWidget({
   integrationIds,
@@ -30,7 +19,6 @@ export default function MediaServerWidget({
   itemId,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
   const t = useScopedI18n("widget.mediaRequests-requestList");
-  const tCommon = useScopedI18n("common");
   const isQueryEnabled = Boolean(itemId);
   const { data: mediaRequests, isError: _isError } = clientApi.widget.mediaRequests.getLatestRequests.useQuery(
     {
@@ -67,9 +55,9 @@ export default function MediaServerWidget({
 
   const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation();
 
-  if (integrationIds.length === 0) return <Center h="100%">{tCommon("errors.noIntegration")}</Center>;
+  if (integrationIds.length === 0) throw new NoIntegrationSelectedError();
 
-  if (sortedMediaRequests.length === 0) return <Center h="100%">{tCommon("errors.noData")}</Center>;
+  if (sortedMediaRequests.length === 0) throw new NoIntegrationDataError();
 
   return (
     <ScrollArea

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { ActionIcon, Avatar, Card, Center, Grid, Group, Space, Stack, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Avatar, Card, Grid, Group, Space, Stack, Text, Tooltip } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import type { Icon } from "@tabler/icons-react";
 import {
@@ -16,10 +16,12 @@ import {
 import combineClasses from "clsx";
 
 import { clientApi } from "@homarr/api/client";
+import type { RequestStats } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import type { RequestStats } from "../../../../integrations/src/interfaces/media-requests/media-request";
 import type { WidgetComponentProps } from "../../definition";
+import { NoIntegrationSelectedError } from "../../errors";
+import { NoIntegrationDataError } from "../../errors/no-data-integration";
 import classes from "./component.module.css";
 
 export default function MediaServerWidget({
@@ -64,19 +66,9 @@ export default function MediaServerWidget({
     [baseData],
   );
 
-  if (integrationIds.length === 0)
-    return (
-      <Center ref={ref} h="100%">
-        {tCommon("errors.noIntegration")}
-      </Center>
-    );
+  if (integrationIds.length === 0) throw new NoIntegrationSelectedError();
 
-  if (users.length === 0 || stats.length === 0)
-    return (
-      <Center ref={ref} h="100%">
-        {tCommon("errors.noData")}
-      </Center>
-    );
+  if (users.length === 0 || stats.length === 0) throw new NoIntegrationDataError();
 
   //Add processing and available
   const data = [