refactor: replace serverdata with suspense query (#1265)

* refactor: replace serverdata with suspense query

* fix: deepsource issues

packages/widgets/src/calendar/component.tsx

@@ -11,7 +11,20 @@ import type { WidgetComponentProps } from "../definition";
 import { CalendarDay } from "./calender-day";
 import classes from "./component.module.css";
 
-export default function CalendarWidget({ isEditMode, serverData }: WidgetComponentProps<"calendar">) {
+export default function CalendarWidget({ isEditMode, integrationIds, itemId }: WidgetComponentProps<"calendar">) {
+  const [events] = clientApi.widget.calendar.findAllEvents.useSuspenseQuery(
+    {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      itemId: itemId!,
+      integrationIds,
+    },
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      retry: false,
+    },
+  );
   const [month, setMonth] = useState(new Date());
   const params = useParams();
   const locale = params.locale as string;
@@ -68,7 +81,7 @@ export default function CalendarWidget({ isEditMode, serverData }: WidgetCompone
         },
       }}
       renderDay={(date) => {
-        const eventsForDate = (serverData?.initialData ?? []).filter((event) => dayjs(event.date).isSame(date, "day"));
+        const eventsForDate = events.filter((event) => dayjs(event.date).isSame(date, "day"));
         return <CalendarDay date={date} events={eventsForDate} disabled={isEditMode} />;
       }}
     />

packages/widgets/src/calendar/index.ts

@@ -6,7 +6,7 @@ import { z } from "@homarr/validation";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader, serverDataLoader } = createWidgetDefinition("calendar", {
+export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
   options: optionsBuilder.from((factory) => ({
     filterPastMonths: factory.number({
@@ -19,6 +19,4 @@ export const { definition, componentLoader, serverDataLoader } = createWidgetDef
     }),
   })),
   supportedIntegrations: getIntegrationKindsByCategory("calendar"),
-})
-  .withServerData(() => import("./serverData"))
-  .withDynamicImport(() => import("./component"));
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/calendar/serverData.ts

@@ -1,35 +0,0 @@
-"use server";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-
-import type { WidgetProps } from "../definition";
-
-export default async function getServerDataAsync({ integrationIds, itemId }: WidgetProps<"calendar">) {
-  if (!itemId) {
-    return {
-      initialData: [],
-    };
-  }
-  try {
-    const data = await api.widget.calendar.findAllEvents({
-      integrationIds,
-      itemId,
-    });
-
-    return {
-      initialData: data
-        .filter(
-          (
-            item,
-          ): item is Exclude<Exclude<RouterOutputs["widget"]["calendar"]["findAllEvents"][number], null>, undefined> =>
-            item !== null,
-        )
-        .flatMap((item) => item.data),
-    };
-  } catch {
-    return {
-      initialData: [],
-    };
-  }
-}