Use server actions instead of client-side API calls

apps/link/app/(main)/_components/Sidebar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { FC, useEffect, useState } from "react";
-import useSWR from "swr";
 import {
   Box,
   Grid,
@@ -33,7 +32,7 @@ import Link from "next/link";
 import Image from "next/image";
 import LinkLogo from "public/link-logo-small.png";
 import { useSession, signOut } from "next-auth/react";
-import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
+import { getOverviewTicketCountsAction } from "app/_actions/overviews";
 import { SearchBox } from "./SearchBox";
 import { fonts } from "@link-stack/ui";
 
@@ -185,33 +184,32 @@ interface SidebarProps {
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
   const pathname = usePathname();
   const { data: session } = useSession();
+  const [overviewCounts, setOverviewCounts] = useState<any>(null);
   const { poppins } = fonts;
   const username = session?.user?.name || "User";
   // @ts-ignore
   const roles = session?.user?.roles || [];
-  const { data: overviewData, error: overviewError }: any = useSWR(
-    {
-      document: getTicketOverviewCountsQuery,
-    },
-    { refreshInterval: 10000 },
-  );
-  const findOverviewByName = (name: string) =>
-    overviewData?.ticketOverviews?.edges?.find(
-      (overview: any) => overview.node.name === name,
-    )?.node?.id;
-  const findOverviewCountByID = (id: string) =>
-    overviewData?.ticketOverviews?.edges?.find(
-      (overview: any) => overview.node.id === id,
-    )?.node?.ticketCount ?? 0;
+  const leafcutterEnabled = false;
+
+  useEffect(() => {
+    const fetchCounts = async () => {
+      const counts = await getOverviewTicketCountsAction();
+      console.log({ counts });
+      setOverviewCounts(counts);
+    };
+
+    fetchCounts();
+
+    const interval = setInterval(fetchCounts, 10000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   const recentCount = 0;
-  const assignedID = findOverviewByName("My Assigned Tickets");
-  const assignedCount = findOverviewCountByID(assignedID);
-  const openID = findOverviewByName("Open Tickets");
-  const openCount = findOverviewCountByID(openID);
-  const urgentID = findOverviewByName("Escalated Tickets");
-  const urgentCount = findOverviewCountByID(urgentID);
-  const unassignedID = findOverviewByName("Unassigned & Open Tickets");
-  const unassignedCount = findOverviewCountByID(unassignedID);
+  const assignedCount = overviewCounts?.["My Assigned Tickets"] ?? 0;
+  const openCount = overviewCounts?.["Open Tickets"] ?? 0;
+  const urgentCount = overviewCounts?.["Escalated Tickets"] ?? 0;
+  const unassignedCount = overviewCounts?.["Unassigned & Open Tickets"] ?? 0;
 
   const logout = () => {
     signOut({ callbackUrl: "/login" });
@@ -404,14 +402,16 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
               },
             }}
           >
-            <MenuItem
-              name="Home"
-              href="/"
-              Icon={CottageIcon}
-              iconSize={20}
-              selected={pathname.endsWith("/")}
-              open={open}
-            />
+            {leafcutterEnabled && (
+              <MenuItem
+                name="Home"
+                href="/"
+                Icon={CottageIcon}
+                iconSize={20}
+                selected={pathname.endsWith("/")}
+                open={open}
+              />
+            )}
             <MenuItem
               name="Tickets"
               href="/overview/recent"
@@ -504,14 +504,16 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
               selected={pathname.endsWith("/reporting")}
               open={open}
             />
-            <MenuItem
-              name="Leafcutter"
-              href="/leafcutter"
-              Icon={InsightsIcon}
-              iconSize={20}
-              selected={false}
-              open={open}
-            />
+            {leafcutterEnabled && (
+              <MenuItem
+                name="Leafcutter"
+                href="/leafcutter"
+                Icon={InsightsIcon}
+                iconSize={20}
+                selected={false}
+                open={open}
+              />
+            )}
             <Collapse
               in={pathname.startsWith("/leafcutter")}
               timeout="auto"