219 lines
7.4 KiB
TypeScript
219 lines
7.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useCallback } from "react";
|
||
import { useParams } from "next/navigation";
|
||
import MailLogin from "@/components/mail/MailLogin";
|
||
import FolderList from "@/components/mail/FolderList";
|
||
import MessageList from "@/components/mail/MessageList";
|
||
import MessageView from "@/components/mail/MessageView";
|
||
import ComposeModal from "@/components/mail/ComposeModal";
|
||
import { useDictionary } from "@/components/DictionaryContext";
|
||
|
||
export interface MailFolder {
|
||
name: string;
|
||
path: string;
|
||
specialUse?: string;
|
||
messages: number;
|
||
unseen: number;
|
||
}
|
||
|
||
export interface MailEnvelope {
|
||
uid: number;
|
||
subject: string;
|
||
from: { name: string; address: string }[];
|
||
to: { name: string; address: string }[];
|
||
date: string;
|
||
seen: boolean;
|
||
flagged: boolean;
|
||
hasAttachments: boolean;
|
||
}
|
||
|
||
export interface MailMessage extends MailEnvelope {
|
||
cc: { name: string; address: string }[];
|
||
html: string;
|
||
text: string;
|
||
attachments: { filename: string; contentType: string; size: number }[];
|
||
}
|
||
|
||
export default function MailPage() {
|
||
const params = useParams();
|
||
const lang = params.lang as string;
|
||
const [connected, setConnected] = useState<boolean | null>(null);
|
||
const [email, setEmail] = useState("");
|
||
const [folders, setFolders] = useState<MailFolder[]>([]);
|
||
const [activeFolder, setActiveFolder] = useState("INBOX");
|
||
const [messages, setMessages] = useState<MailEnvelope[]>([]);
|
||
const [selectedUid, setSelectedUid] = useState<number | null>(null);
|
||
const [openMessage, setOpenMessage] = useState<MailMessage | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [showCompose, setShowCompose] = useState(false);
|
||
const [replyTo, setReplyTo] = useState<MailMessage | null>(null);
|
||
const dict = useDictionary();
|
||
|
||
const getFolderLabel = (path: string): string => {
|
||
const folder = folders.find((f) => f.path === path);
|
||
const name = folder?.name || path;
|
||
const lower = name.toLowerCase();
|
||
if (lower === "inbox") return dict.mailClient.inbox || "Inbox";
|
||
if (lower === "sent") return dict.mailClient.sent || "Sent";
|
||
if (lower === "drafts") return dict.mailClient.drafts || "Drafts";
|
||
if (lower === "trash") return dict.mailClient.trash || "Trash";
|
||
if (lower === "junk" || lower === "spam") return dict.mailClient.junk || "Junk";
|
||
if (lower === "archive") return dict.mailClient.archive || "Archive";
|
||
return name;
|
||
};
|
||
|
||
// Check connection
|
||
useEffect(() => {
|
||
fetch("/api/mail/auth")
|
||
.then((r) => r.json())
|
||
.then((d) => {
|
||
setConnected(d.connected);
|
||
if (d.email) setEmail(d.email);
|
||
});
|
||
}, []);
|
||
|
||
// Load folders
|
||
const loadFolders = useCallback(async () => {
|
||
const res = await fetch("/api/mail/folders");
|
||
if (res.ok) setFolders(await res.json());
|
||
}, []);
|
||
|
||
// Load messages
|
||
const loadMessages = useCallback(async (folder: string) => {
|
||
setLoading(true);
|
||
const res = await fetch(`/api/mail/messages?folder=${encodeURIComponent(folder)}`);
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
setMessages(data.messages ?? []);
|
||
}
|
||
setLoading(false);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (connected) {
|
||
loadFolders();
|
||
loadMessages(activeFolder);
|
||
}
|
||
}, [connected, activeFolder, loadFolders, loadMessages]);
|
||
|
||
// Open message
|
||
const openMsg = async (uid: number) => {
|
||
setSelectedUid(uid);
|
||
const res = await fetch(`/api/mail/messages/${uid}?folder=${encodeURIComponent(activeFolder)}`);
|
||
if (res.ok) {
|
||
const msg = await res.json();
|
||
setOpenMessage(msg);
|
||
// Mark as read in list
|
||
setMessages((prev) => prev.map((m) => m.uid === uid ? { ...m, seen: true } : m));
|
||
}
|
||
};
|
||
|
||
// Delete
|
||
const handleDelete = async (uid: number) => {
|
||
await fetch("/api/mail/messages", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ action: "delete", folder: activeFolder, uid }),
|
||
});
|
||
setMessages((prev) => prev.filter((m) => m.uid !== uid));
|
||
if (selectedUid === uid) { setSelectedUid(null); setOpenMessage(null); }
|
||
};
|
||
|
||
// Reply
|
||
const handleReply = (msg: MailMessage) => {
|
||
setReplyTo(msg);
|
||
setShowCompose(true);
|
||
};
|
||
|
||
// Disconnect
|
||
const handleDisconnect = async () => {
|
||
await fetch("/api/mail/auth", { method: "DELETE" });
|
||
setConnected(false);
|
||
setEmail("");
|
||
setFolders([]);
|
||
setMessages([]);
|
||
setOpenMessage(null);
|
||
};
|
||
|
||
if (connected === null) {
|
||
return <div className="empty-state"><span className="spinner" style={{ width: 24, height: 24 }} /></div>;
|
||
}
|
||
|
||
if (!connected) {
|
||
return <MailLogin onSuccess={(e) => { setConnected(true); setEmail(e); }} />;
|
||
}
|
||
|
||
return (
|
||
<div className="mail-layout">
|
||
<div className="mail-sidebar">
|
||
<button className="btn btn-primary" style={{ width: "100%" }} onClick={() => { setReplyTo(null); setShowCompose(true); }}>
|
||
<ComposeIcon /> {dict.mailClient.newMail || "Yeni Mail"}
|
||
</button>
|
||
<FolderList
|
||
folders={folders}
|
||
active={activeFolder}
|
||
onSelect={(f) => { setActiveFolder(f); setSelectedUid(null); setOpenMessage(null); }}
|
||
/>
|
||
<div className="mail-account">
|
||
<div className="mail-account-email">{email}</div>
|
||
<button className="btn btn-ghost btn-sm" onClick={handleDisconnect} style={{ fontSize: 11 }}>
|
||
{dict.mailClient.logout || "Çıkış"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mail-list">
|
||
<div className="mail-list-header">
|
||
<h2>
|
||
{getFolderLabel(activeFolder)}
|
||
</h2>
|
||
<button className="btn btn-ghost btn-sm" onClick={() => loadMessages(activeFolder)}>↻</button>
|
||
</div>
|
||
<MessageList
|
||
messages={messages}
|
||
loading={loading}
|
||
selectedUid={selectedUid}
|
||
onSelect={openMsg}
|
||
onDelete={handleDelete}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mail-detail">
|
||
{openMessage ? (
|
||
<MessageView
|
||
message={openMessage}
|
||
onReply={() => handleReply(openMessage)}
|
||
onDelete={() => handleDelete(openMessage.uid)}
|
||
folder={activeFolder}
|
||
/>
|
||
) : (
|
||
<div className="mail-empty">
|
||
<div className="mail-empty-icon">
|
||
<MailBigIcon />
|
||
</div>
|
||
<div style={{ fontWeight: 600, fontSize: 14, color: "var(--text-secondary)" }}>{dict.mailClient.selectMail || "Bir mail seçin"}</div>
|
||
<div style={{ fontSize: 12 }}>{dict.mailClient.selectMailDesc || "Okumak için soldaki listeden bir mail seçin"}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{showCompose && (
|
||
<ComposeModal
|
||
replyTo={replyTo}
|
||
onClose={() => { setShowCompose(false); setReplyTo(null); }}
|
||
onSent={() => { setShowCompose(false); setReplyTo(null); loadMessages(activeFolder); }}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MailBigIcon() {
|
||
return <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.5 }}><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>;
|
||
}
|
||
|
||
function ComposeIcon() {
|
||
return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>;
|
||
}
|