Develop

apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FC } from "react";
+import useSWR from "swr";
+import { TicketList } from "./TicketList";
+import { getTicketsByOverviewQuery } from "../../../../_graphql/getTicketsByOverviewQuery";
+
+type ZammadOverviewProps = {
+  name: string;
+  id: string;
+};
+
+export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
+  const { data: ticketData, error: ticketError }: any = useSWR(
+    {
+      document: getTicketsByOverviewQuery,
+      variables: { overviewId: `gid://zammad/Overview/${id}` },
+    },
+    { refreshInterval: 10000 },
+  );
+
+  const shouldRender = !ticketError && ticketData;
+  const tickets =
+    ticketData?.ticketsByOverview?.edges.map((edge: any) => edge.node) || [];
+
+  return (
+    <>
+      {shouldRender && <TicketList title={name} tickets={tickets} />}
+      {ticketError && <div>{ticketError.toString()}</div>}
+    </>
+  );
+};