64 lines
3.5 KiB
TypeScript
64 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useParams, useRouter } from 'next/navigation'
|
|
import { authFetch, getApiBase, clearToken } from '../../../lib/auth'
|
|
import ResolutionChoice from '../../../ui/ResolutionChoice'
|
|
|
|
type Issue = { id: number; kind: string; title: string; status: string; permissions?: { can_confirm_resolution?: boolean } }
|
|
|
|
export default function ConfirmIssuePage() {
|
|
const { id } = useParams<{ id: string }>()
|
|
const router = useRouter()
|
|
const [item, setItem] = useState<Issue | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState('')
|
|
const [result, setResult] = useState('')
|
|
const login = () => {
|
|
clearToken()
|
|
router.replace(`/login?next=${encodeURIComponent(`/issues/confirm/${id}`)}`)
|
|
}
|
|
useEffect(() => {
|
|
const controller = new AbortController()
|
|
setLoading(true); setItem(null); setError(''); setResult('')
|
|
const load = async () => {
|
|
try {
|
|
const response = await authFetch(`${getApiBase()}/portal/items/${id}`, { signal: controller.signal, cache: 'no-store' })
|
|
if (response.status === 401) { login(); return }
|
|
if (!response.ok) throw new Error('This issue is unavailable. Please sign in with the account that reported it.')
|
|
const data = await response.json()
|
|
if (data.item?.kind !== 'issue') throw new Error('This link does not belong to an issue.')
|
|
setItem(data.item)
|
|
} catch (err) { if (!controller.signal.aborted) setError(err instanceof Error ? err.message : 'Could not load this issue. Please try again.') }
|
|
finally { if (!controller.signal.aborted) setLoading(false) }
|
|
}
|
|
void load()
|
|
return () => controller.abort()
|
|
// The confirmation link identifies one issue. Never submit an answer on GET.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [id])
|
|
|
|
const answer = async (resolved: boolean) => {
|
|
if (busy) return
|
|
setBusy(true); setError('')
|
|
try {
|
|
const response = await authFetch(`${getApiBase()}/portal/issues/${id}/resolution-response`, {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ resolved }),
|
|
})
|
|
if (response.status === 401) { login(); return }
|
|
if (!response.ok) throw new Error('Your answer could not be saved. This issue may already have been answered. Refresh to check before trying again.')
|
|
setResult(resolved ? 'Thanks! Your issue is now closed.' : 'Thanks for letting us know. Your issue stays open for another look.')
|
|
} catch (err) { setError(err instanceof Error ? err.message : 'Could not save your answer. Please try again.') }
|
|
finally { setBusy(false) }
|
|
}
|
|
return <main className="resolution-response-page">
|
|
{error && <p role="alert" className="status-banner">{error}</p>}
|
|
{loading ? <p role="status">Loading your issue…</p> : result ? <section className="resolution-choice" role="status"><h2>{result}</h2><a href="/portal/issues">Back to issues</a></section> : item ? (
|
|
item.status === 'awaiting_confirmation' && item.permissions?.can_confirm_resolution
|
|
? <ResolutionChoice title={item.title} busy={busy} onAnswer={(value) => void answer(value)} />
|
|
: <section className="resolution-choice"><h2>{item.status === 'awaiting_confirmation' ? 'This question is for the person who reported the issue.' : 'No answer is needed right now.'}</h2><p>{item.title}</p><a href={`/portal/issues?item=${item.id}`}>View issue</a></section>
|
|
) : null}
|
|
</main>
|
|
}
|