Sidebar and edit updates

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 import useSWR from "swr";
 import { TicketList } from "./TicketList";
 import { getTicketsByOverviewQuery } from "../../../../_graphql/getTicketsByOverviewQuery";
@@ -11,6 +11,8 @@ type ZammadOverviewProps = {
 };
 
 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,
@@ -19,24 +21,57 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
     { refreshInterval: 10000 },
   );
 
-  const shouldRender = !ticketError && ticketData;
-  const tickets =
-    ticketData?.ticketsByOverview?.edges.map((edge: any) => edge.node) || [];
+  const restFetcher = (url: string) => fetch(url).then((r) => r.json());
+  const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);
 
-  const sortedTickets = tickets.sort((a: any, b: any) => {
-    if (a.internalId < b.internalId) {
-      return 1;
-    }
-    if (a.internalId > b.internalId) {
-      return -1;
-    }
-    return 0;
-  });
+  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;
+    });
+  };
 
-  return (
-    <>
-      {shouldRender && <TicketList title={name} tickets={sortedTickets} />}
-      {/*ticketError && <div>{ticketError.toString()}</div>*/}
-    </>
-  );
+  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} />;
 };