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

ability to send anonymous feedback

This commit is contained in:
adueck 2022-10-11 15:24:21 +05:00
parent 7737ee00d9
commit 1ef4037075
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/ChapterFeedback.tsx
View File

@ -1,4 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useUser } from "../user-context";
const ratings = [ const ratings = [
{ value: 0, emoji: "😭" }, { value: 0, emoji: "😭" },
@ -8,7 +9,9 @@ const ratings = [
] ]
function ChapterFeedback({ chapter }: { chapter: string }) { function ChapterFeedback({ chapter }: { chapter: string }) {
const { user } = useUser();
const [rating, setRating] = useState<number | undefined>(undefined); const [rating, setRating] = useState<number | undefined>(undefined);
const [anonymous, setAnonymous] = useState<boolean>(false);
const [feedback, setFeedback] = useState<string>(""); const [feedback, setFeedback] = useState<string>("");
const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent") const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent")
function handleRatingClick(v: number) { function handleRatingClick(v: number) {
@ -33,6 +36,7 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
chapter, chapter,
feedback, feedback,
rating, rating,
anonymous,
}; };
setFeedbackStatus("sending"); setFeedbackStatus("sending");
fetch("https://account.lingdocs.com/feedback", { fetch("https://account.lingdocs.com/feedback", {
@ -85,16 +89,22 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
</div> </div>
{rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}> {rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
<div className="form-group"> <div className="form-group">
<label htmlFor="exampleFormControlTextarea1" className="text-left">Feedback:</label> <label htmlFor="feedbackText" className="text-left">Feedback:</label>
<textarea <textarea
className="form-control" className="form-control"
id="exampleFormControlTextarea1" id="feedbackText"
rows={3} rows={3}
value={feedback} value={feedback}
onChange={e => setFeedback(e.target.value)} onChange={e => setFeedback(e.target.value)}
/> />
</div> </div>
<div className="d-flex flex-row justify-content-end align-items-center"> <div className="d-flex flex-row justify-content-between align-items-center">
<div className="small">
{(user && !anonymous)
? `Feedback will be sent as ${user.name}`
: `Feedback will be anonymous`}
</div>
<div>
{feedbackStatus === "sending" && <div className="mr-3"> {feedbackStatus === "sending" && <div className="mr-3">
<samp>sending...</samp> <samp>sending...</samp>
</div>} </div>}
@ -102,6 +112,19 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
<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>
{user && <div className="form-check small">
<input
className="form-check-input"
type="checkbox"
checked={anonymous}
onChange={e => setAnonymous(e.target.checked)}
id="anonymounCheck"
/>
<label className="form-check-label" htmlFor="anonymousCheck">
keep feedback anonymouns
</label>
</div>}
</div>} </div>}
</div> </div>
</div>; </div>;