Use server actions instead of client-side API calls

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

@@ -1,113 +1,29 @@
 "use client";
 
 import { FC, useEffect, useState } from "react";
-import useSWR from "swr";
+import { getOverviewTicketsAction } from "app/_actions/overviews";
+
 import { TicketList } from "./TicketList";
-import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
-import { getTicketsByOverviewQuery } from "app/_graphql/getTicketsByOverviewQuery";
 
 type ZammadOverviewProps = {
   name: string;
 };
 
 export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
-  const [overviewID, setOverviewID] = useState(null);
   const [tickets, setTickets] = useState([]);
-  const [error, setError] = useState(null);
-
-  const { data: overviewData, error: overviewError }: any = useSWR(
-    {
-      document: getTicketOverviewCountsQuery,
-    },
-    { refreshInterval: 10000 },
-  );
-  const { data: ticketData, error: ticketError }: any = useSWR(
-    {
-      document: getTicketsByOverviewQuery,
-      variables: { overviewId: overviewID, pageSize: 250 },
-    },
-    { refreshInterval: 10000 },
-  );
-  const overviewLookup = {
-    Assigned: "My Assigned Tickets",
-    Open: "Open Tickets",
-    Urgent: "Escalated Tickets",
-    Unassigned: "Unassigned & Open Tickets",
-  };
-
-  const findOverviewByName = (name: string) => {
-    const fullName = overviewLookup[name];
-    return overviewData?.ticketOverviews?.edges?.find(
-      (overview: any) => overview.node.name === fullName,
-    )?.node?.id;
-  };
-  useEffect(() => {
-    if (overviewData) {
-      setOverviewID(findOverviewByName(name));
-    }
-  }, [overviewData, name]);
-  console.log({
-    name,
-    overviewID,
-    overviewData,
-    overviewError,
-    ticketData,
-    ticketError,
-  });
-
-  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);
-        console.log({ nodes });
-        setError(null);
-        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 });
-      }
+    const fetchTickets = async () => {
+      const { tickets } = await getOverviewTicketsAction(name);
+      setTickets(tickets);
     };
-    fetchRecentTickets();
+
+    fetchTickets();
+
+    const interval = setInterval(fetchTickets, 20000);
+
+    return () => clearInterval(interval);
   }, [name]);
 
-  const shouldRender = tickets && !error;
-
-  return shouldRender && <TicketList title={name} tickets={tickets} />;
+  return <TicketList title={name} tickets={tickets} />;
 };