lingdocs
/
pashto-grammar
mirror of https://github.com/lingdocs/pashto-grammar.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

better feedback ui

This commit is contained in:
adueck 2022-10-11 15:07:44 +05:00
parent 3949804dca
commit 7737ee00d9
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ChapterFeedback.tsx
View File

@ -10,7 +10,7 @@ const ratings = [
function ChapterFeedback({ chapter }: { chapter: string }) { function ChapterFeedback({ chapter }: { chapter: string }) {
const [rating, setRating] = useState<number | undefined>(undefined); const [rating, setRating] = useState<number | undefined>(undefined);
const [feedback, setFeedback] = useState<string>(""); const [feedback, setFeedback] = useState<string>("");
const [feedbackSent, setFeedbackSent] = useState<boolean>(false); const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent")
function handleRatingClick(v: number) { function handleRatingClick(v: number) {
setRating(o => o === v ? undefined : v); setRating(o => o === v ? undefined : v);
} }
@ -23,7 +23,9 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ feedback: "", rating }), body: JSON.stringify({ feedback: "", rating }),
}) }).catch(() => {
console.error("couldn't send chapter feedback");
});
} }
}); });
function handleSendFeedback() { function handleSendFeedback() {
@ -32,6 +34,7 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
feedback, feedback,
rating, rating,
}; };
setFeedbackStatus("sending");
fetch("https://account.lingdocs.com/feedback", { fetch("https://account.lingdocs.com/feedback", {
method: "PUT", method: "PUT",
credentials: "include", credentials: "include",
@ -42,16 +45,17 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
}).then(res => res.json()).then(res => { }).then(res => res.json()).then(res => {
console.log(res); console.log(res);
if (res.ok) { if (res.ok) {
setFeedbackSent(true); setFeedbackStatus("sent");
} else { } else {
setFeedbackStatus("unsent");
alert("error sending feedback"); alert("error sending feedback");
} }
}).catch(() => { }).catch(() => {
setFeedbackStatus("unsent");
alert("connect to the internet to send feedback"); alert("connect to the internet to send feedback");
setFeedbackSent(true);
}); });
} }
if (feedbackSent) { if (feedbackStatus === "sent") {
return <div> return <div>
<hr/> <hr/>
<div className="d-flex flex-row justify-content-center align-items-center" style={{ height: "6rem" }}> <div className="d-flex flex-row justify-content-center align-items-center" style={{ height: "6rem" }}>
@ -90,9 +94,14 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
onChange={e => setFeedback(e.target.value)} onChange={e => setFeedback(e.target.value)}
/> />
</div> </div>
<div className="text-right"> <div className="d-flex flex-row justify-content-end align-items-center">
{feedbackStatus === "sending" && <div className="mr-3">
<samp>sending...</samp>
</div>}
<div>
<button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button> <button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button>
</div> </div>
</div>
</div>} </div>}
</div> </div>
</div>; </div>;