61 lines
3.5 KiB
TypeScript
61 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { authFetch, getApiBase } from '../../lib/auth'
|
|
|
|
type Delivery = { id: string; month: string; state: string; detail: string }
|
|
type Preference = { email: string | null; can_send: boolean; state: string; detail: string; deliveries: Delivery[] }
|
|
|
|
export default function EmailReportControl({ month }: { month: string }) {
|
|
const [data, setData] = useState<Preference | null>(null)
|
|
const [busy, setBusy] = useState(false)
|
|
const [notice, setNotice] = useState('')
|
|
const [error, setError] = useState('')
|
|
const [revision, setRevision] = useState(0)
|
|
const request = useRef<{ month: string; id: string } | null>(null)
|
|
const pending = data?.deliveries.some((item) => ['queued', 'preparing', 'sending', 'retry'].includes(item.state)) ?? false
|
|
|
|
useEffect(() => {
|
|
const abort = new AbortController()
|
|
void authFetch(`${getApiBase()}/profile/email-recaps`, { signal: abort.signal }).then(async (response) => {
|
|
if (!response.ok) throw new Error('Could not load your report email preferences. Refresh to try again.')
|
|
const result = await response.json()
|
|
if (!abort.signal.aborted) setData(result)
|
|
}).catch((err: Error) => { if (!abort.signal.aborted) setError(err.message) })
|
|
return () => abort.abort()
|
|
}, [revision])
|
|
|
|
useEffect(() => {
|
|
if (!pending) return
|
|
const timer = window.setInterval(() => setRevision((value) => value + 1), 10000)
|
|
return () => window.clearInterval(timer)
|
|
}, [pending])
|
|
|
|
const send = async () => {
|
|
if (busy || !data?.can_send) return
|
|
setBusy(true); setError(''); setNotice('')
|
|
if (request.current?.month !== month) request.current = { month, id: crypto.randomUUID() }
|
|
try {
|
|
const response = await authFetch(`${getApiBase()}/profile/email-recaps/send`, {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ month, request_id: request.current.id }),
|
|
})
|
|
const result = await response.json().catch(() => ({}))
|
|
if (!response.ok) throw new Error(typeof result.detail === 'string' ? result.detail : 'Could not queue your report. Try again.')
|
|
setNotice(result.message); request.current = null
|
|
setRevision((value) => value + 1)
|
|
} catch (err) { setError(err instanceof Error ? err.message : 'Could not queue your report.') }
|
|
finally { setBusy(false) }
|
|
}
|
|
|
|
return <section className="stats-panel report-email-panel" aria-label="Email your report">
|
|
<div className="stats-panel-heading"><h2>Email yourself this report</h2><a href="/profile#monthly-recaps">Email preferences</a></div>
|
|
<p>Choose a month above, including the current month so far, then send its viewing and request summary to your confirmed profile email.</p>
|
|
{data?.can_send ? <p><strong>{data.email}</strong> · One report email every five minutes.</p> : data && <p>{data.state === 'enabled' ? data.detail : 'Confirm your profile email in Email preferences first. You can choose on-demand delivery without automatic monthly emails.'}</p>}
|
|
<button type="button" disabled={busy || !data?.can_send} onClick={() => void send()}>{busy ? 'Queueing report…' : 'Email this report'}</button>
|
|
{notice && <p role="status">{notice}</p>}
|
|
{error && <p role="alert">{error}</p>}
|
|
{!!data?.deliveries.length && <details><summary>Recent report emails</summary><ul>{data.deliveries.map((item) => <li key={item.id}><strong>{item.month}</strong> · {item.state === 'sent' ? 'Accepted by mail server' : item.state} — {item.detail || 'Waiting for delivery'}</li>)}</ul></details>}
|
|
</section>
|
|
}
|