"use client"; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, } from "@unsend/ui/src/table"; import { api } from "~/trpc/react"; import { Mail, MailCheck, MailOpen, MailSearch, MailWarning, MailX, } from "lucide-react"; import { formatDate, formatDistanceToNow } from "date-fns"; import { EmailStatus } from "@prisma/client"; import { EmailStatusBadge } from "./email-status-badge"; import EmailDetails from "./email-details"; import dynamic from "next/dynamic"; import { useUrlState } from "~/hooks/useUrlState"; import { Button } from "@unsend/ui/src/button"; import { Select, SelectContent, SelectItem, SelectTrigger, } from "@unsend/ui/src/select"; import Spinner from "@unsend/ui/src/spinner"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@unsend/ui/src/tooltip"; /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */ const DynamicSheetWithNoSSR = dynamic( () => import("@unsend/ui/src/sheet").then((mod) => mod.Sheet), { ssr: false } ); const DynamicSheetContentWithNoSSR = dynamic( () => import("@unsend/ui/src/sheet").then((mod) => mod.SheetContent), { ssr: false } ); export default function EmailsList() { const [selectedEmail, setSelectedEmail] = useUrlState("emailId"); const [page, setPage] = useUrlState("page", "1"); const [status, setStatus] = useUrlState("status"); const pageNumber = Number(page); const emailsQuery = api.email.emails.useQuery({ page: pageNumber, status: status?.toUpperCase() as EmailStatus, }); const handleSelectEmail = (emailId: string) => { setSelectedEmail(emailId); }; const handleSheetChange = (isOpen: boolean) => { if (!isOpen) { setSelectedEmail(null); } }; return (
To Status Subject Sent at {emailsQuery.isLoading ? ( ) : emailsQuery.data?.emails.length ? ( emailsQuery.data?.emails.map((email) => ( handleSelectEmail(email.id)} className=" cursor-pointer" >
{/* */}

{email.to}

{email.latestStatus === "SCHEDULED" && email.scheduledAt ? ( Scheduled at{" "} {formatDate( email.scheduledAt, "MMM dd'th', hh:mm a" )} ) : ( )}
{email.subject}
{email.latestStatus !== "SCHEDULED" ? formatDistanceToNow( email.scheduledAt ?? email.createdAt ) : "--"}
)) ) : ( No emails found )}
{selectedEmail ? : null}
); } const EmailIcon: React.FC<{ status: EmailStatus }> = ({ status }) => { switch (status) { case "SENT": return ( //
//
); case "DELIVERED": return ( //
//
); case "BOUNCED": case "FAILED": return ( //
//
); case "CLICKED": return ( //
//
); case "OPENED": return ( //
//
); case "DELIVERY_DELAYED": case "COMPLAINED": return ( //
//
); default: return ( //
//
); } };