neuroread/components/nav-documents.tsx

"use client";

import {
  ArrowUpRight,
  FileText,
  Link,
  LoaderCircle,
  MoreHorizontal,
  RefreshCw,
  StarOff,
  Trash2,
} from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";
import { createClient } from "@/utils/supabase/client";
import { toast } from "sonner";
import { SSE } from "sse.js";
import { useEffect, useState } from "react";

export function NavDocuments({
  documents: ogDocuments,
}: {
  documents: {
    id: string;
    disabled?: boolean;
    name: string;
    url: string;
    emoji?: string;
  }[];
}) {
  const { isMobile } = useSidebar();
  const supabase = createClient();
  const [documents, setDocuments] = useState(ogDocuments);

  useEffect(() => {
    // watch for changes in the documents table, update the state when it changes

    const handleRecordInserted = (payload: any) => {
      const newDocument = payload.new;
      setDocuments((prev) => [...prev, newDocument]);
    };
    const handleRecordUpdated = (payload: any) => {
      const updatedDocument = payload.new;
      setDocuments((prev) =>
        prev.map((doc) =>
          doc.id === updatedDocument.id ? updatedDocument : doc
        )
      );
    };
    const handleRecordDeleted = (payload: any) => {
      const deletedDocument = payload.old;
      setDocuments((prev) =>
        prev.filter((doc) => doc.id !== deletedDocument.id)
      );
    };

    const subscription = supabase
      .channel("documents")
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "documents" },
        handleRecordInserted
      )
      .on(
        "postgres_changes",
        { event: "UPDATE", schema: "public", table: "documents" },
        handleRecordUpdated
      )
      .on(
        "postgres_changes",
        { event: "DELETE", schema: "public", table: "documents" },
        handleRecordDeleted
      )
      .subscribe();

    return () => {
      subscription.unsubscribe();
    };
  }, [ogDocuments, supabase]);

  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>Documents</SidebarGroupLabel>
      <SidebarMenu>
        {documents.map((item) => (
          <SidebarMenuItem key={item.id} aria-disabled={item.disabled}>
            <SidebarMenuButton asChild disabled={item.disabled}>
              <a href={item.url} title={item.name}>
                {item.disabled ? (
                  <LoaderCircle className="animate-spin text-muted-foreground" />
                ) : (
                  <span>{item.emoji ? item.emoji : <FileText />}</span>
                )}
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction showOnHover>
                  <MoreHorizontal />
                  <span className="sr-only">More</span>
                </SidebarMenuAction>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-56 rounded-lg"
                side={isMobile ? "bottom" : "right"}
                align={isMobile ? "end" : "start"}
              >
                <DropdownMenuItem
                  onClick={async () => {
                    const data = new FormData();

                    const session = await supabase.auth.getSession();
                    if (!session.data.session) {
                      toast.error("You are not logged in");
                      return;
                    }

                    data.append("id", item.id);
                    data.append(
                      "access_token",
                      session.data.session.access_token
                    );
                    data.append(
                      "refresh_token",
                      session.data.session.refresh_token
                    );

                    const eventSource = new SSE(`/api/process-document`, {
                      payload: data,
                      headers: {
                        apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
                        Authorization: `Bearer ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}`,
                      },
                      method: "POST",
                    });

                    toast.loading("Reprocessing document...");

                    eventSource.onmessage = (event) => {
                      const message = JSON.parse(event.data);
                      if (message.status === "success") {
                        toast.success("Document reprocessed successfully");
                        eventSource.close();
                      } else if (message.status === "error") {
                        toast.error("Failed to reprocess document");
                        eventSource.close();
                      }
                    };

                    eventSource.onerror = (err) => {
                      console.error("SSE error:", err);
                      toast.error("An error occurred while reprocessing");
                      eventSource.close();
                    };
                  }}
                >
                  <RefreshCw className="text-muted-foreground" />
                  <span>Reprocess Document</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Trash2 className="text-muted-foreground" />
                  <span>Delete</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}