diff --git a/src/components/ChapterFeedback.tsx b/src/components/ChapterFeedback.tsx index 3d6b7d1..3757b23 100644 --- a/src/components/ChapterFeedback.tsx +++ b/src/components/ChapterFeedback.tsx @@ -10,7 +10,7 @@ const ratings = [ function ChapterFeedback({ chapter }: { chapter: string }) { const [rating, setRating] = useState(undefined); const [feedback, setFeedback] = useState(""); - const [feedbackSent, setFeedbackSent] = useState(false); + const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent") function handleRatingClick(v: number) { setRating(o => o === v ? undefined : v); } @@ -23,7 +23,9 @@ function ChapterFeedback({ chapter }: { chapter: string }) { "Content-Type": "application/json", }, body: JSON.stringify({ feedback: "", rating }), - }) + }).catch(() => { + console.error("couldn't send chapter feedback"); + }); } }); function handleSendFeedback() { @@ -32,6 +34,7 @@ function ChapterFeedback({ chapter }: { chapter: string }) { feedback, rating, }; + setFeedbackStatus("sending"); fetch("https://account.lingdocs.com/feedback", { method: "PUT", credentials: "include", @@ -42,16 +45,17 @@ function ChapterFeedback({ chapter }: { chapter: string }) { }).then(res => res.json()).then(res => { console.log(res); if (res.ok) { - setFeedbackSent(true); + setFeedbackStatus("sent"); } else { + setFeedbackStatus("unsent"); alert("error sending feedback"); } }).catch(() => { + setFeedbackStatus("unsent"); alert("connect to the internet to send feedback"); - setFeedbackSent(true); }); } - if (feedbackSent) { + if (feedbackStatus === "sent") { return

@@ -90,8 +94,13 @@ function ChapterFeedback({ chapter }: { chapter: string }) { onChange={e => setFeedback(e.target.value)} />
-
- +
+ {feedbackStatus === "sending" &&
+ sending... +
} +
+ +
}