panel 2 courier api
This commit is contained in:
parent
770e631da4
commit
fda0e6955d
@ -101,137 +101,42 @@ function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: s
|
|||||||
}
|
}
|
||||||
|
|
||||||
function EmailContent({ email }: { email: Email }) {
|
function EmailContent({ email }: { email: Email }) {
|
||||||
const [content, setContent] = useState<React.ReactNode>(null);
|
// Use state to track if we've rendered content
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [renderedContent, setRenderedContent] = useState<boolean>(false);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
// If textContent is available, render it directly
|
||||||
useEffect(() => {
|
if (email.textContent && !renderedContent) {
|
||||||
let mounted = true;
|
setRenderedContent(true);
|
||||||
|
|
||||||
async function loadContent() {
|
|
||||||
if (!email) return;
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
try {
|
|
||||||
// First try to directly render any available content
|
|
||||||
if (email.content && mounted) {
|
|
||||||
setContent(
|
|
||||||
<div
|
|
||||||
className="email-content prose prose-sm max-w-none dark:prose-invert"
|
|
||||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(email.content) }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
setIsLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (email.textContent && mounted) {
|
|
||||||
setContent(
|
|
||||||
<div className="email-content whitespace-pre-wrap">
|
|
||||||
{email.textContent}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
setIsLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If we have nothing to display, try the client-side decoding
|
|
||||||
if (!email.content && !email.textContent && !email.body && !email.rawContent) {
|
|
||||||
if (mounted) {
|
|
||||||
setContent(<div className="text-gray-500">No content available</div>);
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formattedEmail = (email.content || email.body || email.rawContent || '').trim();
|
|
||||||
if (!formattedEmail) {
|
|
||||||
if (mounted) {
|
|
||||||
setContent(<div className="text-gray-500">No content available</div>);
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const parsedEmail = await decodeEmail(formattedEmail);
|
|
||||||
|
|
||||||
if (mounted) {
|
|
||||||
if (parsedEmail.html) {
|
|
||||||
setContent(
|
|
||||||
<div
|
|
||||||
className="email-content prose prose-sm max-w-none dark:prose-invert"
|
|
||||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedEmail.html) }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} else if (parsedEmail.text) {
|
|
||||||
setContent(
|
|
||||||
<div className="email-content whitespace-pre-wrap">
|
|
||||||
{parsedEmail.text}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (email.rawContent) {
|
|
||||||
// Use raw content directly if available and nothing else worked
|
|
||||||
setContent(
|
|
||||||
<div className="email-content whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded">
|
|
||||||
{email.rawContent}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
// Fall back to displaying the raw content
|
|
||||||
setContent(
|
|
||||||
<div className="email-content whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded">
|
|
||||||
{formattedEmail}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
setError(null);
|
|
||||||
}
|
|
||||||
} catch (parseError) {
|
|
||||||
console.error('Error parsing email:', parseError);
|
|
||||||
// Fallback to displaying raw content on parse error
|
|
||||||
if (mounted) {
|
|
||||||
setContent(
|
|
||||||
<div className="email-content whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded">
|
|
||||||
{email.rawContent || formattedEmail}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (mounted) {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error rendering email content:', err);
|
|
||||||
if (mounted) {
|
|
||||||
setError('Error rendering email content. Please try again.');
|
|
||||||
setContent(null);
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
loadContent();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
mounted = false;
|
|
||||||
};
|
|
||||||
}, [email?.content, email?.body, email?.textContent, email?.rawContent]);
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center py-8">
|
<div className="email-content whitespace-pre-wrap">
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
{email.textContent}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
// If html content is available, render it directly
|
||||||
return <div className="text-red-500">{error}</div>;
|
if (email.content && !renderedContent) {
|
||||||
|
setRenderedContent(true);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="email-content prose prose-sm max-w-none dark:prose-invert"
|
||||||
|
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(email.content) }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return content || <div className="text-gray-500">No content available</div>;
|
// Fallback to raw content if available
|
||||||
|
if (email.rawContent && !renderedContent) {
|
||||||
|
setRenderedContent(true);
|
||||||
|
return (
|
||||||
|
<div className="email-content whitespace-pre-wrap text-sm bg-gray-50 p-3 rounded">
|
||||||
|
{email.rawContent}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Last resort
|
||||||
|
return <div className="text-gray-500">No content available</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderEmailContent(email: Email) {
|
function renderEmailContent(email: Email) {
|
||||||
@ -531,6 +436,7 @@ export default function CourrierPage() {
|
|||||||
content: string;
|
content: string;
|
||||||
type: 'reply' | 'reply-all' | 'forward';
|
type: 'reply' | 'reply-all' | 'forward';
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
const [selectEmailLoading, setSelectEmailLoading] = useState(false);
|
||||||
|
|
||||||
// Debug logging for email distribution
|
// Debug logging for email distribution
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -677,70 +583,59 @@ export default function CourrierPage() {
|
|||||||
// Update handleEmailSelect to set selectedEmail correctly and improve error handling
|
// Update handleEmailSelect to set selectedEmail correctly and improve error handling
|
||||||
const handleEmailSelect = async (emailId: string) => {
|
const handleEmailSelect = async (emailId: string) => {
|
||||||
try {
|
try {
|
||||||
// First, set partial selectedEmail to show something immediately
|
// Set a provisional selected email immediately for better UX
|
||||||
const emailToSelect = emails.find(email => email.id === emailId);
|
const initialEmail = emails.find((e) => e.id === emailId) || null;
|
||||||
if (emailToSelect) {
|
setSelectedEmail(initialEmail);
|
||||||
console.log('Setting preliminary selected email:', {
|
setSelectEmailLoading(true);
|
||||||
id: emailToSelect.id,
|
|
||||||
subject: emailToSelect.subject,
|
console.log(`Fetching email ${emailId} from folder ${currentView}`);
|
||||||
hasContent: !!emailToSelect.content,
|
|
||||||
});
|
|
||||||
setSelectedEmail(emailToSelect);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Then fetch the full content
|
|
||||||
console.log(`Fetching email content for ID: ${emailId}`);
|
|
||||||
const response = await fetch(`/api/courrier/${emailId}?folder=${currentView}`);
|
const response = await fetch(`/api/courrier/${emailId}?folder=${currentView}`);
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
const errorText = await response.text();
|
console.error(`Error fetching email: ${response.status} ${response.statusText}`);
|
||||||
console.error(`Error response (${response.status}): ${errorText}`);
|
setSelectEmailLoading(false);
|
||||||
throw new Error(`Failed to fetch email content: ${response.status} ${response.statusText}`);
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const fullEmail = await response.json();
|
const fullEmail = await response.json();
|
||||||
console.log('Received full email data:', {
|
console.log("API RESPONSE for email:", JSON.stringify(fullEmail, null, 2));
|
||||||
id: fullEmail.id,
|
|
||||||
subject: fullEmail.subject,
|
|
||||||
hasContent: !!fullEmail.content,
|
|
||||||
fields: Object.keys(fullEmail),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set the complete selectedEmail with all content
|
// Create a safe version of the email with guaranteed fields
|
||||||
setSelectedEmail(fullEmail);
|
const safeEmail = {
|
||||||
|
...fullEmail,
|
||||||
|
content: fullEmail.content || "",
|
||||||
|
textContent: fullEmail.textContent || "",
|
||||||
|
rawContent: fullEmail.rawContent || "",
|
||||||
|
body: fullEmail.body || ""
|
||||||
|
};
|
||||||
|
|
||||||
// Also update the email in the list
|
// Set the selected email with complete information
|
||||||
setEmails(prevEmails => prevEmails.map(email =>
|
setSelectedEmail(safeEmail);
|
||||||
email.id === emailId
|
|
||||||
? { ...email, read: true }
|
// Update the email in the list to mark it as read
|
||||||
: email
|
setEmails((prevEmails) =>
|
||||||
));
|
prevEmails.map((email) =>
|
||||||
|
email.id === emailId ? { ...email, read: true } : email
|
||||||
// Try to mark as read in the background
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Try to mark the email as read in the background
|
||||||
try {
|
try {
|
||||||
const markReadResponse = await fetch(`/api/mail/mark-read?folder=${currentView}`, {
|
const markReadResponse = await fetch(`/api/mail/mark-read?id=${emailId}&folder=${currentView}`, {
|
||||||
method: 'POST',
|
method: "POST",
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
emailId,
|
|
||||||
isRead: true,
|
|
||||||
}),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!markReadResponse.ok) {
|
if (!markReadResponse.ok) {
|
||||||
console.error('Failed to mark email as read:', await markReadResponse.text());
|
console.error(`Error marking email as read: ${markReadResponse.status} ${markReadResponse.statusText}`);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (markReadError) {
|
||||||
console.error('Error marking email as read:', error);
|
console.error("Error calling mark-read API:", markReadError);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setSelectEmailLoading(false);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching email:', error);
|
console.error("Error in handleEmailSelect:", error);
|
||||||
// Keep the selected email if it was set initially
|
setSelectEmailLoading(false);
|
||||||
if (!selectedEmail) {
|
|
||||||
setError('Failed to load email content. Please try again.');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -1107,6 +1002,17 @@ export default function CourrierPage() {
|
|||||||
Viewing message from: {selectedEmail.from} • {new Date(selectedEmail.date).toLocaleString()}
|
Viewing message from: {selectedEmail.from} • {new Date(selectedEmail.date).toLocaleString()}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{/* Direct content display for debugging */}
|
||||||
|
<div className="mb-4 p-3 border border-blue-100 rounded-md bg-blue-50">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<h4 className="text-xs font-medium text-blue-800">Direct Content Preview</h4>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs overflow-auto max-h-20">
|
||||||
|
<strong>Content:</strong> {selectedEmail.content ? selectedEmail.content.substring(0, 200) : 'Empty'}<br/>
|
||||||
|
<strong>Text Content:</strong> {selectedEmail.textContent ? selectedEmail.textContent.substring(0, 200) : 'Empty'}<br/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="prose max-w-none">
|
<div className="prose max-w-none">
|
||||||
{/* Go back to using the original renderEmailContent function */}
|
{/* Go back to using the original renderEmailContent function */}
|
||||||
{renderEmailContent(selectedEmail)}
|
{renderEmailContent(selectedEmail)}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user