src/components/ChapterFeedback.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useUser } from "../user-context";
 
 const ratings = [
@@ -6,23 +6,16 @@ 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<
+    const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent")
-    "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
@@ -60,37 +53,28 @@ 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 (
+        return <div>
-      <div>
+            <hr/>
-        <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 />
+            <hr/>
         </div>
-    );
     }
-  return (
+    return <div>
-    <div>
         <hr />
         <div className="my-4">
             <div className="text-center">Was this chapter helpful?</div>
@@ -99,77 +83,62 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
                     <div
                         key={value}
                         className="mx-2 clickable"
-              style={
+                        style={rating !== value
-                rating !== value
                             ? {
                                 filter: "grayscale(100%)",
                                 fontSize: "2.25rem",
-                    }
+                            }  : { fontSize: "2.75rem" }}
-                  : { fontSize: "2.75rem" }
-              }
                         onClick={() => handleRatingClick(value)}
                     >
                         {emoji}
                     </div>
                 ))}
             </div>
-        {rating !== undefined && (
+            {rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
-          <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
                 <div className="form-group">
-              <label htmlFor="feedbackText" className="text-left">
+                    <label htmlFor="feedbackText" className="text-left">Feedback:</label>
-                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" && (
+                        {feedbackStatus === "sending" && <div className="mr-3">
-                  <div className="mr-3">
                             <samp>sending...</samp>
-                  </div>
+                        </div>}
-                )}
                         <div>
-                  <button
+                            <button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button>
-                    className="btn btn-sm btn-primary"
-                    onClick={handleSendFeedback}
-                  >
-                    Send
-                  </button>
                         </div>
                     </div>
                 </div>
-            {user && (
+                {user && <div className="form-check small">
-              <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;