From 8e92f513fd2163c486a1725d82db022066272bc5 Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Tue, 11 Oct 2022 14:50:35 +0500
Subject: [PATCH] try feedback widget

---
 src/components/Chapter.js                |  2 +
 src/components/ChapterFeedback.tsx       | 96 ++++++++++++++++++++++++
 src/games/sub-cores/EquativeIdentify.tsx |  1 -
 src/lib/entry-feeder.ts                  |  2 -
 src/lib/useDictionary.ts                 |  2 -
 5 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ChapterFeedback.tsx

diff --git a/src/components/Chapter.js b/src/components/Chapter.js
index a2e6ba3..8e23b7d 100644
--- a/src/components/Chapter.js
+++ b/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} />}
diff --git a/src/components/ChapterFeedback.tsx b/src/components/ChapterFeedback.tsx
new file mode 100644
index 0000000..a20e42c
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/games/sub-cores/EquativeIdentify.tsx b/src/games/sub-cores/EquativeIdentify.tsx
index 93937e0..4c64e65 100644
--- a/src/games/sub-cores/EquativeIdentify.tsx
+++ b/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([]);
diff --git a/src/lib/entry-feeder.ts b/src/lib/entry-feeder.ts
index dc5c5dd..171c858 100644
--- a/src/lib/entry-feeder.ts
+++ b/src/lib/entry-feeder.ts
@@ -7,8 +7,6 @@ import {
     adverbs,
 } from "../words/words";
 
-console.log({ locativeAdverbs });
-
 const entryFeeder: T.EntryFeeder = {
     nouns,
     verbs,
diff --git a/src/lib/useDictionary.ts b/src/lib/useDictionary.ts
index 32bd38b..4ef79fa 100644
--- a/src/lib/useDictionary.ts
+++ b/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");
         });