import { ReactElement, useEffect, useState } from "react"; import { NextPageContext } from "next"; import Head from "next/head"; import { useRouter } from "next/router"; import { uploadDocument } from "@documenso/features"; import { deleteDocument, getDocuments } from "@documenso/lib/api"; import { Button, IconButton, SelectBox } from "@documenso/ui"; import Layout from "../components/layout"; import type { NextPageWithLayout } from "./_app"; import { ArrowDownTrayIcon, CheckBadgeIcon, CheckIcon, DocumentPlusIcon, EnvelopeIcon, FunnelIcon, PencilSquareIcon, PlusIcon, TrashIcon, } from "@heroicons/react/24/outline"; import { DocumentStatus } from "@prisma/client"; import { Tooltip as ReactTooltip } from "react-tooltip"; const DocumentsPage: NextPageWithLayout = (props: any) => { const router = useRouter(); const [documents, setDocuments]: any[] = useState([]); const [filteredDocuments, setFilteredDocuments] = useState([]); const [loading, setLoading] = useState(true); type statusFilterType = { label: string; value: DocumentStatus | "ALL"; }; const statusFilters: statusFilterType[] = [ { label: "All", value: "ALL" }, { label: "Draft", value: "DRAFT" }, { label: "Waiting for others", value: "PENDING" }, { label: "Completed", value: "COMPLETED" }, ]; const createdFilter = [ { label: "All Time", value: -1 }, { label: "Last 24 hours", value: 1 }, { label: "Last 7 days", value: 7 }, { label: "Last 30 days", value: 30 }, { label: "Last 3 months", value: 90 }, { label: "Last 12 months", value: 366 }, ]; const [selectedStatusFilter, setSelectedStatusFilter] = useState(statusFilters[0]); const [selectedCreatedFilter, setSelectedCreatedFilter] = useState(createdFilter[0]); const loadDocuments = async () => { if (!documents.length) setLoading(true); getDocuments().then((res: any) => { res.json().then((j: any) => { setDocuments(j); setLoading(false); }); }); }; useEffect(() => { loadDocuments().finally(() => { setSelectedStatusFilter( statusFilters.filter((status) => status.value === props.filter.toUpperCase())[0] ); }); }, []); useEffect(() => { setFilteredDocuments(filterDocumentes(documents)); }, [documents, selectedStatusFilter, selectedCreatedFilter]); function showDocument(documentId: number) { router.push(`/documents/${documentId}/recipients`); } function filterDocumentes(documents: []): any { let filteredDocuments = documents.filter( (d: any) => d.status === selectedStatusFilter.value || selectedStatusFilter.value === "ALL" ); filteredDocuments = filteredDocuments.filter((document: any) => wasXDaysAgoOrLess(new Date(document.created), selectedCreatedFilter.value) ); return filteredDocuments; } function handleStatusFilterChange(status: statusFilterType) { router.replace( { pathname: router.pathname, query: { filter: status.value }, }, undefined, { shallow: true, // Perform a shallow update, without reloading the page } ); setSelectedStatusFilter(status); } function wasXDaysAgoOrLess(documentDate: Date, lastXDays: number): boolean { if (lastXDays < 0) return true; const millisecondsInDay = 24 * 60 * 60 * 1000; // Number of milliseconds in a day const today: Date = new Date(); // Today's date // Calculate the difference between the two dates in days const diffInDays = Math.floor((today.getTime() - documentDate.getTime()) / millisecondsInDay); console.log(diffInDays); // Check if the difference is letss or equal to lastXDays return diffInDays <= lastXDays; } return ( <> Documents | Documenso

Documents

{filteredDocuments.length != 1 ? filteredDocuments.length + " Documents" : "1 Document"}
); }; function formatDocumentStatus(status: DocumentStatus) { switch (status) { case DocumentStatus.DRAFT: return "Draft"; case DocumentStatus.PENDING: return "Waiting for others"; case DocumentStatus.COMPLETED: return "Completed"; } } export async function getServerSideProps(context: NextPageContext) { const filter = context.query["filter"]; return { props: { filter: filter || "ALL", }, }; } DocumentsPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default DocumentsPage;