try feedback widget

src/components/Chapter.js

@@ -8,6 +8,7 @@
 
 import TableOfContents from "./TableOfContents";
 import Footer from "./Footer";
+import ChapterFeedback from "./ChapterFeedback";
 
 const Chapter = ({ children: chapter }) => {
   const Content = chapter.content;
@@ -33,6 +34,7 @@ const Chapter = ({ children: chapter }) => {
         </div>
         <Content />
       </div>
+      <ChapterFeedback chapter={chapter.path} />
       <Footer chapter={chapter} />
     </main>
     {!chapter.frontMatter.fullWidth && <TableOfContents tableOfContents={chapter.tableOfContents} />}

src/components/ChapterFeedback.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+
+const ratings = [
+    { value: 0, emoji: "😭" },
+    { value: 1, emoji: "😕" },
+    { value: 2, emoji: "🙂" },
+    { value: 3, emoji: "🤩" },
+]
+
+function ChapterFeedback({ chapter }: { chapter: string }) {
+    const [rating, setRating] = useState<number | undefined>(undefined);
+    const [feedback, setFeedback] = useState<string>("");
+    const [feedbackSent, setFeedbackSent] = useState<boolean>(false);
+    function handleRatingClick(v: number) {
+        setRating(o => o === v ? undefined : v);
+    }
+    useEffect(() => {
+     return () => {
+        // send face feedback if exists
+     }   
+    })
+    function handleSendFeedback() {
+        const toSend = {
+            chapter,
+            feedback,
+            rating,
+        };
+        fetch("https://account.lingdocs.com/feedback", {
+            method: "PUT",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(toSend),
+        }).then(res => res.json()).then(res => {
+            console.log(res);
+            if (res.ok) {
+                setFeedbackSent(true);
+            } else {
+                alert("error sending feedback");
+            }
+        }).catch(() => {
+            alert("connect to the internet to send feedback");
+            setFeedbackSent(true);
+        });
+    }
+    if (feedbackSent) {
+        return <div>
+            <hr/>
+            <div className="d-flex flex-row justify-content-center align-items-center" style={{ height: "6rem" }}>
+                <div className="lead">Thanks for your feedback!</div>
+            </div>
+        </div>
+    }
+    return <div>
+        <hr />
+        <div>
+            <div className="text-center">Was this chapter helpful?</div>
+            <div className="d-flex flex-row align-items-center justify-content-center">
+                {ratings.map(({ value, emoji }) => (
+                    <div
+                        key={value}
+                        className="mx-2 clickable"
+                        style={rating !== value
+                            ? {
+                                filter: "grayscale(100%)",
+                                fontSize: "2.25rem",
+                            }  : { fontSize: "2.75rem" }}
+                        onClick={() => handleRatingClick(value)}
+                    >
+                        {emoji}
+                    </div>
+                ))}
+            </div>
+            {rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
+                <div className="form-group">
+                    <label htmlFor="exampleFormControlTextarea1" className="text-left">Feedback:</label>
+                    <textarea
+                        className="form-control"
+                        id="exampleFormControlTextarea1"
+                        rows={3}
+                        value={feedback}
+                        onChange={e => setFeedback(e.target.value)}
+                    />
+                </div>
+                <div className="text-right">
+                    <button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button>
+                </div>
+            </div>}
+        </div>
+    </div>;
+}
+
+
+
+export default ChapterFeedback;

src/games/sub-cores/EquativeIdentify.tsx

@@ -40,7 +40,6 @@ export default function EquativeIdentify({ inChapter, id, link, level }: { inCha
     };
     
     function Display({ question, callback }: QuestionDisplayProps<Question>) {
-        console.log({ question });
         const [selected, setSelected] = useState<T.EquativeTense[]>([]);
         useEffect(() => {
             setSelected([]);

src/lib/entry-feeder.ts

@@ -7,8 +7,6 @@ import {
     adverbs,
 } from "../words/words";
 
-console.log({ locativeAdverbs });
-
 const entryFeeder: T.EntryFeeder = {
     nouns,
     verbs,

src/lib/useDictionary.ts

@@ -8,12 +8,10 @@ import { useEffect, useState } from "react";
 function useDictionary() {
     const [dictionaryStatus, setDictionaryStatus] = useState<DT.DictionaryStatus>("loading");
     useEffect(() => {
-        console.log("starting here");
         setDictionaryStatus("loading");
         dictionary.initialize().then(() => {
             setDictionaryStatus("ready");
         }).catch((err) => {
-            console.log("out of fetch", err);
             console.error(err);
             setDictionaryStatus("error loading");
         });