public
anord
read
Ledger
Why work hard when you can work easier?
Languages
Repository composition by tracked source files.
TypeScript
86%
CSS
10%
SQL
3%
Shell
1%
HTML
0%
Trace
apps/web/src/components/FeedbackForm.tsx
Trace helps you understand code history line by line. See who changed each line, when it changed, and which commit introduced it.
Author
Date
Commit
Line
Code
1
import { useState } from "react";
2
import { api } from "../lib/api";
4
export function FeedbackForm({ pageId, revisionId }: { pageId: string; revisionId: string }) {
5
const [message, setMessage] = useState("");
6
const [status, setStatus] = useState<null | string>(null);
8
async function submit(helpful: boolean) {
9
try {
10
await api.post("/api/feedback", {
11
pageId,
12
revisionId,
13
helpful,
14
comment: message || undefined
15
});
16
setStatus("Thanks for the feedback.");
17
setMessage("");
18
} catch (error) {
19
setStatus(error instanceof Error ? error.message : "Could not save feedback.");
20
}
21
}
23
return (
24
<section className="feedback-card">
25
<div className="panel__header">
26
<div>
27
<p className="eyebrow">Feedback</p>
28
<h3>Was this article helpful?</h3>
29
</div>
30
</div>
31
<textarea
32
value={message}
33
onChange={(event) => setMessage(event.target.value)}
34
placeholder="Optional context for your response"
35
/>
36
<div className="feedback-actions">
37
<button onClick={() => submit(true)}>Helpful</button>
38
<button className="button-secondary" onClick={() => submit(false)}>
39
Not helpful
40
</button>
41
</div>
42
{status ? <p className="muted">{status}</p> : null}
43
</section>
44
);
45
}