122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, 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 = useCallback(() => {
|
|
clearToken();
|
|
router.replace(`/login?next=${encodeURIComponent(`/issues/confirm/${id}`)}`);
|
|
}, [id, router]);
|
|
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.
|
|
}, [id, login]);
|
|
|
|
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>
|
|
);
|
|
}
|