feedback

src/components/ChapterFeedback.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useUser } from "../user-context";
 
 const ratings = [
@@ -6,16 +6,23 @@ const ratings = [
   { value: 1, emoji: "😕" },
   { value: 2, emoji: "🙂" },
   { value: 3, emoji: "🤩" },
-]
+];
 
 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")
+  const [feedbackStatus, setFeedbackStatus] = useState<
+    "unsent" | "sending" | "sent"
+  >("unsent");
+  useEffect(() => {
+    setFeedbackStatus("unsent");
+    setFeedback("");
+    setRating(undefined);
+  }, [chapter]);
   function handleRatingClick(v: number) {
-        setRating(o => o === v ? undefined : v);
+    setRating((o) => (o === v ? undefined : v));
   }
   // automatic sending of emoji click feedback if someone leaves the chapter without
   // filling in and sending the feedback textbox
@@ -53,28 +60,37 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(toSend),
-        }).then(res => res.json()).then(res => {
+    })
+      .then((res) => res.json())
+      .then((res) => {
         if (res.ok) {
           setFeedbackStatus("sent");
         } else {
           setFeedbackStatus("unsent");
           alert("error sending feedback");
         }
-        }).catch(() => {
+      })
+      .catch(() => {
         setFeedbackStatus("unsent");
         alert("connect to the internet to send feedback");
       });
   }
   if (feedbackStatus === "sent") {
-        return <div>
+    return (
+      <div>
         <hr />
-            <div className="d-flex flex-row justify-content-center align-items-center my-3" style={{ height: "6rem" }}>
+        <div
+          className="d-flex flex-row justify-content-center align-items-center my-3"
+          style={{ height: "6rem" }}
+        >
           <div className="lead">Thanks for your feedback!</div>
         </div>
         <hr />
       </div>
+    );
   }
-    return <div>
+  return (
+    <div>
       <hr />
       <div className="my-4">
         <div className="text-center">Was this chapter helpful?</div>
@@ -83,62 +99,77 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
             <div
               key={value}
               className="mx-2 clickable"
-                        style={rating !== value
+              style={
+                rating !== value
                   ? {
                       filter: "grayscale(100%)",
                       fontSize: "2.25rem",
-                            }  : { fontSize: "2.75rem" }}
+                    }
+                  : { fontSize: "2.75rem" }
+              }
               onClick={() => handleRatingClick(value)}
             >
               {emoji}
             </div>
           ))}
         </div>
-            {rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
+        {rating !== undefined && (
+          <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
             <div className="form-group">
-                    <label htmlFor="feedbackText" className="text-left">Feedback:</label>
+              <label htmlFor="feedbackText" className="text-left">
+                Feedback:
+              </label>
               <textarea
                 className="form-control"
                 id="feedbackText"
                 placeholder="Share more or leave blank"
                 rows={3}
                 value={feedback}
-                        onChange={e => setFeedback(e.target.value)}
+                onChange={(e) => setFeedback(e.target.value)}
               />
             </div>
             <div className="d-flex flex-row justify-content-between align-items-center">
               <div className="small">
-                        {(user && !anonymous)
+                {user && !anonymous
                   ? `Private feedback will be sent as "${user.name}"`
                   : `Private feedback will be anonymous`}
               </div>
               <div className="d-flex flex-row align-items-center">
-                        {feedbackStatus === "sending" && <div className="mr-3">
+                {feedbackStatus === "sending" && (
+                  <div className="mr-3">
                     <samp>sending...</samp>
-                        </div>}
+                  </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>
-                {user && <div className="form-check small">
+            {user && (
+              <div className="form-check small">
                 <input
                   className="form-check-input"
                   type="checkbox"
                   checked={anonymous}
-                        onChange={e => setAnonymous(e.target.checked)}
+                  onChange={(e) => setAnonymous(e.target.checked)}
                   id="anonymounCheck"
                 />
                 <label className="form-check-label" htmlFor="anonymousCheck">
                   stay anonymouns
                 </label>
-                </div>}
+              </div>
-            </div>}
+            )}
+          </div>
+        )}
       </div>
       <hr />
-    </div>;
+    </div>
+  );
 }
 
-
-
 export default ChapterFeedback;