try feedback widget

This commit is contained in:
adueck 2022-10-11 14:50:35 +05:00
parent 46b713d1d5
commit 8e92f513fd
5 changed files with 98 additions and 5 deletions

View File

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

View File

@ -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;

View File

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

View File

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

View File

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