refactor: add request handlers for centralized cached requests (#1504)

* feat: add object base64 hash method

* chore: add script to add package

* feat: add request-handler package

* wip: add request handlers for all jobs and widget api procedures

* wip: remove errors shown in logs, add missing decryption for secrets in cached-request-job-handler

* wip: highly improve request handler, add request handlers for calendar, media-server, indexer-manager and more, add support for multiple inputs from job handler creator

* refactor: move media-server requests to request-handler, add invalidation logic for dns-hole and media requests

* refactor: remove unused integration item middleware

* feat: add invalidation to switch entity action of smart-home

* fix: lint issues

* chore: use integration-kind-by-category instead of union for request-handlers

* fix: build not working for tasks and websocket

* refactor: add more logs

* refactor: readd timestamp logic for diconnect status

* fix: lint and typecheck issue

* chore: address pull request feedback

packages/widgets/src/smart-home/entity-state/component.tsx

@@ -1,41 +1,48 @@
 "use client";
 
-import React, { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { NoIntegrationSelectedError } from "../../errors";
 
 export default function SmartHomeEntityStateWidget({
   options,
   integrationIds,
   isEditMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
-  const [lastState, setLastState] = useState<{
-    entityId: string;
-    state: string;
-  }>();
+  const integrationId = integrationIds[0];
+
+  if (!integrationId) {
+    throw new NoIntegrationSelectedError();
+  }
+
+  return <InnerComponent options={options} integrationId={integrationId} isEditMode={isEditMode} />;
+}
+
+type InnerComponentProps = Pick<WidgetComponentProps<"smartHome-entityState">, "options" | "isEditMode"> & {
+  integrationId: string;
+};
+
+const InnerComponent = ({ options, integrationId, isEditMode }: InnerComponentProps) => {
+  const input = {
+    entityId: options.entityId,
+    integrationId,
+  };
+  const [entityState] = clientApi.widget.smartHome.entityState.useSuspenseQuery(input);
 
   const utils = clientApi.useUtils();
 
-  clientApi.widget.smartHome.subscribeEntityState.useSubscription(
-    {
-      entityId: options.entityId,
-    },
-    {
-      onData(data) {
-        setLastState(data);
-      },
-    },
-  );
-
-  const { mutate } = clientApi.widget.smartHome.switchEntity.useMutation({
-    onSettled: () => {
-      void utils.widget.smartHome.invalidate();
+  clientApi.widget.smartHome.subscribeEntityState.useSubscription(input, {
+    onData(data) {
+      utils.widget.smartHome.entityState.setData(input, data.state);
     },
   });
 
+  const { mutate } = clientApi.widget.smartHome.switchEntity.useMutation();
+
   const attribute = options.entityUnit.length > 0 ? " " + options.entityUnit : "";
 
   const handleClick = useCallback(() => {
@@ -49,9 +56,9 @@ export default function SmartHomeEntityStateWidget({
 
     mutate({
       entityId: options.entityId,
-      integrationId: integrationIds[0] ?? "",
+      integrationId,
     });
-  }, [integrationIds, isEditMode, mutate, options.clickable, options.entityId]);
+  }, [integrationId, isEditMode, mutate, options.clickable, options.entityId]);
 
   return (
     <UnstyledButton
@@ -66,11 +73,11 @@ export default function SmartHomeEntityStateWidget({
             {options.displayName}
           </Text>
           <Text ta="center">
-            {lastState?.state}
+            {entityState}
             {attribute}
           </Text>
         </Stack>
       </Center>
     </UnstyledButton>
   );
-}
+};

packages/widgets/src/smart-home/execute-automation/component.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { ActionIcon, Center, LoadingOverlay, Overlay, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useDisclosure, useTimeout } from "@mantine/hooks";