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

"use client";

import { FC, useEffect, useState } 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 [tickets, setTickets] = useState([]);
  const [error, setError] = useState(null);
  const { data: ticketData, error: ticketError }: any = useSWR(
    {
      document: getTicketsByOverviewQuery,
      variables: { overviewId: `gid://zammad/Overview/${id}`, pageSize: 250 },
    },
    { refreshInterval: 10000 },
  );

  const restFetcher = (url: string) => fetch(url).then((r) => r.json());
  const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);

  const sortTickets = (tickets: any) => {
    return tickets.sort((a: any, b: any) => {
      if (a.internalId < b.internalId) {
        return 1;
      }
      if (a.internalId > b.internalId) {
        return -1;
      }
      return 0;
    });
  };

  useEffect(() => {
    if (name != "Recent") {
      const edges = ticketData?.ticketsByOverview?.edges;
      if (edges) {
        const nodes = edges.map((edge: any) => edge.node);
        setTickets(sortTickets(nodes));
      }

      if (ticketError) {
        setError(ticketError);
      }
    }
  }, [ticketData, ticketError]);

  useEffect(() => {
    const fetchRecentTickets = async () => {
      if (name === "Recent" && recent) {
        let allTickets = [];
        for (const rec of recent) {
          const res = await fetch(`/api/v1/tickets/${rec.o_id}`);
          const tkt = await res.json();
          allTickets.push({
            ...tkt,
            internalId: tkt.id,
            createdAt: tkt.created_at,
            updatedAt: tkt.updated_at,
          });
        }
        setTickets(sortTickets(allTickets));
        console.log({ allTickets });
      }
    };
    fetchRecentTickets();
  }, [name]);

  const shouldRender = tickets && !error;

  return shouldRender && <TicketList title={name} tickets={tickets} />;
};