Function DocumentList

pages/chat-to-docs.tsx:202–308

(props: {
  docPage: number;
  setDocPage: React.Dispatch<React.SetStateAction<number>>;
  isLastPage: boolean;
  allDocumentCount: number;
  docs: Document[];
  setDocs: React.Dispatch<React.SetStateAction<Document[]>>;
  supabase: SupabaseClient<Database>;
  orgId: number;
  editDocument: (document: Document) => void;
  deleteDocument: (document: Document) => Promise<PostgrestError | null>;
})

export const getServerSideProps = pageGetServerSideProps;

function DocumentList(props: {
  docPage: number;
  setDocPage: React.Dispatch<React.SetStateAction<number>>;
  isLastPage: boolean;
  allDocumentCount: number;
  docs: Document[];
  setDocs: React.Dispatch<React.SetStateAction<Document[]>>;
  supabase: SupabaseClient<Database>;
  orgId: number;
  editDocument: (document: Document) => void;
  deleteDocument: (document: Document) => Promise<PostgrestError | null>;
}) {
  const [documentToDelete, setDocumentToDelete] = useState<Document | null>(
    null,
  );

  const setDeleteDocumentModalOpen = (isOpen: boolean) => {
    if (!isOpen) {
      setDocumentToDelete(null);
    }
  };

  const deleteDocument = async (document: Document) => {
    const error = await props.deleteDocument(document);
    if (error) {
      console.error(error);
    } else {
      props.setDocs((currentDocs) => {
        return currentDocs.filter(
          (doc) => doc.docChunks[0].id !== document.docChunks[0].id,
        );
      });
    }
    setDocumentToDelete(null);
  };

  return (
    <>
      <WarningModal
        title={"Delete document?"}
        description={"Are you sure you want to delete this document?"}
        action={async () => {
          if (documentToDelete) {
            await deleteDocument(documentToDelete);
          }
        }}
        actionColour={"red"}
        actionName={"Delete"}
        open={documentToDelete !== null}
        setOpen={setDeleteDocumentModalOpen}
      />

      <div className="flex flex-col gap-y-2">
        <div className="flex w-full text-lg text-gray-300 gap-x-10 py-1 px-2 mb-1">
          <h3 className="flex-1">Page</h3>
          <h3 className="w-40">Section</h3>
          <h3 className="flex-1" />
          <h3 className="w-16" />