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

"use client";

import { FC } from "react";
import useSWR from "swr";
import { TicketList } from "./TicketList";
import { getTicketsByOverviewQuery } from "app/_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>}
    </>
  );
};