From 1ef4037075f2449b72e78ed59afd6cf631c7bf50 Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Tue, 11 Oct 2022 15:24:21 +0500
Subject: [PATCH] ability to send anonymous feedback

---
 src/components/ChapterFeedback.tsx | 37 ++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/ChapterFeedback.tsx b/src/components/ChapterFeedback.tsx
index 3757b23..ef5249f 100644
--- a/src/components/ChapterFeedback.tsx
+++ b/src/components/ChapterFeedback.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useUser } from "../user-context";
 
 const ratings = [
     { value: 0, emoji: "😭" },
@@ -8,7 +9,9 @@ const ratings = [
 ]
 
 function ChapterFeedback({ chapter }: { chapter: string }) {
+    const { user } = useUser();
     const [rating, setRating] = useState<number | undefined>(undefined);
+    const [anonymous, setAnonymous] = useState<boolean>(false);
     const [feedback, setFeedback] = useState<string>("");
     const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent")
     function handleRatingClick(v: number) {
@@ -33,6 +36,7 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
             chapter,
             feedback,
             rating,
+            anonymous,
         };
         setFeedbackStatus("sending");
         fetch("https://account.lingdocs.com/feedback", {
@@ -85,23 +89,42 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
             </div>
             {rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
                 <div className="form-group">
-                    <label htmlFor="exampleFormControlTextarea1" className="text-left">Feedback:</label>
+                    <label htmlFor="feedbackText" className="text-left">Feedback:</label>
                     <textarea
                         className="form-control"
-                        id="exampleFormControlTextarea1"
+                        id="feedbackText"
                         rows={3}
                         value={feedback}
                         onChange={e => setFeedback(e.target.value)}
                     />
                 </div>
-                <div className="d-flex flex-row justify-content-end align-items-center">
-                    {feedbackStatus === "sending" && <div className="mr-3">
-                        <samp>sending...</samp>
-                    </div>}
+                <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>
-                        <button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button>
+                        {feedbackStatus === "sending" && <div className="mr-3">
+                            <samp>sending...</samp>
+                        </div>}
+                        <div>
+                            <button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button>
+                        </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>;