fix: actually fix lint and query on initial integrations selection wip

homarr-labs · Aug 1, 2024 · 7ba186d · 7ba186d
1 parent 5c1b518
commit 7ba186d
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 46 deletions.
diff --git a/packages/api/src/middlewares/integration.ts b/packages/api/src/middlewares/integration.ts
@@ -198,20 +198,9 @@ export const createManyIntegrationOfOneItemMiddleware = <TKind extends Integrati
 
       await throwIfActionIsNotAllowedAsync(action, ctx.db, dbIntegrations, ctx.session);
 
-      const dbIntegrationWithItem = dbIntegrations.filter((integration) =>
-        integration.items.some((item) => item.itemId === input.itemId),
-      );
-
-      if (dbIntegrationWithItem.length === 0) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Integration for item was not found",
-        });
-      }
-
       return next({
         ctx: {
-          integrations: dbIntegrationWithItem.map(
+          integrations: dbIntegrations.map(
             ({ secrets, kind, groupPermissions: _ignore1, userPermissions: _ignore2, ...rest }) => ({
               ...rest,
               kind: kind as TKind,

diff --git a/packages/cron-jobs/src/jobs/integrations/media-requests.ts b/packages/cron-jobs/src/jobs/integrations/media-requests.ts
@@ -31,7 +31,7 @@ export const mediaRequestsJob = createCronJob("mediaRequests", EVERY_5_SECONDS).
   });
 
   for (const itemForIntegration of itemsForIntegration) {
-    for (const { integration } of itemForIntegration.integrations) {
+    for (const { integration, integrationId } of itemForIntegration.integrations) {
       const integrationWithSecrets = {
         ...integration,
         decryptedSecrets: integration.secrets.map((secret) => ({
@@ -57,7 +57,7 @@ export const mediaRequestsJob = createCronJob("mediaRequests", EVERY_5_SECONDS).
       const requestsUsers = await requestsIntegration.getUsersAsync();
       const requestListChannel = createItemAndIntegrationChannel<MediaRequestList>(
         "mediaRequests-requestList",
-        integration.id,
+        integrationId,
       );
       await requestListChannel.publishAndUpdateLastStateAsync({
         integration: { id: integration.id },
@@ -66,7 +66,7 @@ export const mediaRequestsJob = createCronJob("mediaRequests", EVERY_5_SECONDS).
 
       const requestStatsChannel = createItemAndIntegrationChannel<MediaRequestStats>(
         "mediaRequests-requestStats",
-        integration.id,
+        integrationId,
       );
       await requestStatsChannel.publishAndUpdateLastStateAsync({
         integration: { kind: integration.kind, name: integration.name },

diff --git a/packages/translation/src/type.ts b/packages/translation/src/type.ts
@@ -1,6 +1,7 @@
-import type { useI18n } from "./client";
+import type { useI18n, useScopedI18n } from "./client";
 import type enTranslation from "./lang/en";
 
 export type TranslationFunction = ReturnType<typeof useI18n>;
+export type ScopedTranslationFunction<T extends Parameters<typeof useScopedI18n>[0]> = ReturnType<typeof useScopedI18n<T>>;
 export type TranslationObject = typeof enTranslation;
 export type stringOrTranslation = string | ((t: TranslationFunction) => string);
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
@@ -23,36 +23,61 @@ import {
   MediaRequestStatus,
 } from "../../../../integrations/src/interfaces/media-requests/media-request";
 import type { WidgetComponentProps } from "../../definition";
+import type { ScopedTranslationFunction } from "@homarr/translation";
 
 export default function MediaServerWidget({
   integrationIds,
   isEditMode,
   options,
   serverData,
+  itemId
 }: WidgetComponentProps<"mediaRequests-requestList">) {
   const t = useScopedI18n("widget.mediaRequests-requestList");
   const tCommon = useScopedI18n("common");
-
-  if (!serverData?.initialData) return <Center h="100%">{tCommon("errors.noData")}</Center>;
-
-  if (integrationIds.length === 0) return <Center h="100%">{tCommon("errors.noIntegration")}</Center>;
+  const isQueryEnabled = Boolean(itemId);
+  const {
+    data: mediaRequests,
+    isError: _isError,
+  } = clientApi.widget.mediaRequests.getLatestRequests.useQuery(
+    {
+      integrationIds,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      itemId: itemId!,
+    },
+    {
+      initialData:
+        !serverData ? [] : serverData.initialData,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      enabled: integrationIds.length > 0 && isQueryEnabled,
+    },
+  );
 
   const sortedMediaRequests = useMemo(
     () =>
-      serverData.initialData.sort(({ status: statusA }, { status: statusB }) => {
-        if (statusA === MediaRequestStatus.PendingApproval) {
-          return -1;
-        }
-        if (statusB === MediaRequestStatus.PendingApproval) {
-          return 1;
-        }
-        return 0;
-      }),
-    [serverData, integrationIds],
+      mediaRequests
+        .filter((group) => group != null)
+        .flatMap((group) => group.data)
+        .flatMap(({ medias, integration }) => medias.map((media) => ({ ...media, integrationId: integration.id })))
+        .sort(({ status: statusA }, { status: statusB }) => {
+          if (statusA === MediaRequestStatus.PendingApproval) {
+            return -1;
+          }
+          if (statusB === MediaRequestStatus.PendingApproval) {
+            return 1;
+          }
+          return 0;
+        }),
+    [mediaRequests, integrationIds],
   );
 
   const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation();
 
+  if (integrationIds.length === 0) return <Center h="100%">{tCommon("errors.noIntegration")}</Center>;
+
+  if (sortedMediaRequests.length === 0) return <Center h="100%">{tCommon("errors.noData")}</Center>;
+
   return (
     <ScrollArea
       className="mediaRequests-list-scrollArea"
@@ -104,15 +129,15 @@ export default function MediaServerWidget({
                     </Text>
                     <Badge
                       className="mediaRequests-list-item-media-status"
-                      color={GetAvailabilityProperties(mediaRequest.availability).color}
+                      color={GetAvailabilityProperties(mediaRequest.availability, t).color}
                       variant="light"
                       fz="3.5cqmin"
                       lh="4cqmin"
                       size="5cqmin"
                       pt="0.75cqmin"
                       px="2cqmin"
                     >
-                      {GetAvailabilityProperties(mediaRequest.availability).label}
+                      {GetAvailabilityProperties(mediaRequest.availability, t).label}
                     </Badge>
                   </Group>
                   <Anchor
@@ -193,8 +218,7 @@ export default function MediaServerWidget({
   );
 }
 
-function GetAvailabilityProperties(mediaRequestAvailability: MediaAvailability) {
-  const t = useScopedI18n("widget.mediaRequests-requestList");
+function GetAvailabilityProperties(mediaRequestAvailability: MediaAvailability, t: ScopedTranslationFunction<"widget.mediaRequests-requestList">) {
   switch (mediaRequestAvailability) {
     case MediaAvailability.Available:
       return { color: "green", label: t("availability.available") };

diff --git a/packages/widgets/src/media-requests/list/serverData.ts b/packages/widgets/src/media-requests/list/serverData.ts
@@ -17,10 +17,6 @@ export default async function getServerDataAsync({ integrationIds, itemId }: Wid
   });
 
   return {
-    initialData: requests
-      .filter((group) => group != null)
-      .flatMap((group) =>
-        group.data.medias.flatMap((media) => ({ ...media, integrationId: group.data.integration.id })),
-      ),
+    initialData: requests.filter((group) => group != null),
   };
 }
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
@@ -29,16 +29,12 @@ export default function MediaServerWidget({
   const t = useScopedI18n("widget.mediaRequests-requestStats");
   const tCommon = useScopedI18n("common");
 
-  if (!serverData?.initialData) return <Center h="100%">{tCommon("errors.noData")}</Center>;
-
-  if (integrationIds.length === 0) return <Center h="100%">{tCommon("errors.noIntegration")}</Center>;
-
   const { width, height, ref } = useElementSize();
 
-  const stats = useMemo(() => serverData.initialData.flatMap(({ stats }) => stats), [serverData, integrationIds]);
+  const stats = useMemo(() => serverData?.initialData.flatMap(({ stats }) => stats), [serverData, integrationIds]);
   const users = useMemo(
     () =>
-      serverData.initialData
+      serverData?.initialData
         .flatMap(({ integration, users }) =>
           users.flatMap((user) => ({ ...user, appKind: integration.kind, appName: integration.name })),
         )
@@ -47,6 +43,10 @@ export default function MediaServerWidget({
     [serverData, integrationIds, width, height],
   );
 
+  if (integrationIds.length === 0) return <Center h="100%">{tCommon("errors.noIntegration")}</Center>;
+
+  if (!users || users.length === 0 || !stats || stats.length === 0) return <Center h="100%">{tCommon("errors.noData")}</Center>;
+
   //Add processing and available
   const data = [
     {

diff --git a/tooling/eslint/react.js b/tooling/eslint/react.js
@@ -14,7 +14,6 @@ export default [
       ...hooksPlugin.configs.recommended.rules,
       // context.getSource is not a function
       "react-hooks/exhaustive-deps": "off",
-      "react-hooks/rules-of-hooks": "off",
     },
     languageOptions: {
       globals: {