Compare commits
2 Commits
6cb0cc1740
...
7495bf896e
| Author | SHA1 | Date |
|---|---|---|
adueck
|
7495bf896e | |
|
adueck
|
0da29f4abb |
|
|
@ -1,144 +1,175 @@
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useUser } from "../user-context";
|
import { useUser } from "../user-context";
|
||||||
|
|
||||||
const ratings = [
|
const ratings = [
|
||||||
{ value: 0, emoji: "😭" },
|
{ value: 0, emoji: "😭" },
|
||||||
{ value: 1, emoji: "😕" },
|
{ value: 1, emoji: "😕" },
|
||||||
{ value: 2, emoji: "🙂" },
|
{ value: 2, emoji: "🙂" },
|
||||||
{ value: 3, emoji: "🤩" },
|
{ value: 3, emoji: "🤩" },
|
||||||
]
|
];
|
||||||
|
|
||||||
function ChapterFeedback({ chapter }: { chapter: string }) {
|
function ChapterFeedback({ chapter }: { chapter: string }) {
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const [rating, setRating] = useState<number | undefined>(undefined);
|
const [rating, setRating] = useState<number | undefined>(undefined);
|
||||||
const [anonymous, setAnonymous] = useState<boolean>(false);
|
const [anonymous, setAnonymous] = useState<boolean>(false);
|
||||||
const [feedback, setFeedback] = useState<string>("");
|
const [feedback, setFeedback] = useState<string>("");
|
||||||
const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent")
|
const [feedbackStatus, setFeedbackStatus] = useState<
|
||||||
function handleRatingClick(v: number) {
|
"unsent" | "sending" | "sent"
|
||||||
setRating(o => o === v ? undefined : v);
|
>("unsent");
|
||||||
}
|
useEffect(() => {
|
||||||
// automatic sending of emoji click feedback if someone leaves the chapter without
|
setFeedbackStatus("unsent");
|
||||||
// filling in and sending the feedback textbox
|
setFeedback("");
|
||||||
// not doing this yet because not sure if it's a clean setup like "componentWillUnmount"
|
setRating(undefined);
|
||||||
// or if it unecessarily unmounts and re-renders
|
}, [chapter]);
|
||||||
// useEffect(() => {
|
function handleRatingClick(v: number) {
|
||||||
// return () => {
|
setRating((o) => (o === v ? undefined : v));
|
||||||
// if (rating === undefined || feedbackStatus === "sent") return;
|
}
|
||||||
// fetch("https://account.lingdocs.com/feedback", {
|
// automatic sending of emoji click feedback if someone leaves the chapter without
|
||||||
// method: "PUT",
|
// filling in and sending the feedback textbox
|
||||||
// credentials: "include",
|
// not doing this yet because not sure if it's a clean setup like "componentWillUnmount"
|
||||||
// headers: {
|
// or if it unecessarily unmounts and re-renders
|
||||||
// "Content-Type": "application/json",
|
// useEffect(() => {
|
||||||
// },
|
// return () => {
|
||||||
// body: JSON.stringify({ feedback: "", rating }),
|
// if (rating === undefined || feedbackStatus === "sent") return;
|
||||||
// }).catch(() => {
|
// fetch("https://account.lingdocs.com/feedback", {
|
||||||
// console.error("couldn't send chapter feedback");
|
// method: "PUT",
|
||||||
// });
|
// credentials: "include",
|
||||||
// }
|
// headers: {
|
||||||
// // eslint-disable-next-line
|
// "Content-Type": "application/json",
|
||||||
// }, []);
|
// },
|
||||||
function handleSendFeedback() {
|
// body: JSON.stringify({ feedback: "", rating }),
|
||||||
const toSend = {
|
// }).catch(() => {
|
||||||
chapter,
|
// console.error("couldn't send chapter feedback");
|
||||||
feedback,
|
// });
|
||||||
rating,
|
// }
|
||||||
anonymous,
|
// // eslint-disable-next-line
|
||||||
ts: Date.now(),
|
// }, []);
|
||||||
};
|
function handleSendFeedback() {
|
||||||
setFeedbackStatus("sending");
|
const toSend = {
|
||||||
fetch("https://account.lingdocs.com/feedback", {
|
chapter,
|
||||||
method: "PUT",
|
feedback,
|
||||||
credentials: "include",
|
rating,
|
||||||
headers: {
|
anonymous,
|
||||||
"Content-Type": "application/json",
|
ts: Date.now(),
|
||||||
},
|
};
|
||||||
body: JSON.stringify(toSend),
|
setFeedbackStatus("sending");
|
||||||
}).then(res => res.json()).then(res => {
|
fetch("https://account.lingdocs.com/feedback", {
|
||||||
if (res.ok) {
|
method: "PUT",
|
||||||
setFeedbackStatus("sent");
|
credentials: "include",
|
||||||
} else {
|
headers: {
|
||||||
setFeedbackStatus("unsent");
|
"Content-Type": "application/json",
|
||||||
alert("error sending feedback");
|
},
|
||||||
}
|
body: JSON.stringify(toSend),
|
||||||
}).catch(() => {
|
})
|
||||||
setFeedbackStatus("unsent");
|
.then((res) => res.json())
|
||||||
alert("connect to the internet to send feedback");
|
.then((res) => {
|
||||||
});
|
if (res.ok) {
|
||||||
}
|
setFeedbackStatus("sent");
|
||||||
if (feedbackStatus === "sent") {
|
} else {
|
||||||
return <div>
|
setFeedbackStatus("unsent");
|
||||||
<hr/>
|
alert("error sending feedback");
|
||||||
<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>
|
.catch(() => {
|
||||||
<hr/>
|
setFeedbackStatus("unsent");
|
||||||
</div>
|
alert("connect to the internet to send feedback");
|
||||||
}
|
});
|
||||||
return <div>
|
}
|
||||||
|
if (feedbackStatus === "sent") {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
<hr />
|
<hr />
|
||||||
<div className="my-4">
|
<div
|
||||||
<div className="text-center">Was this chapter helpful?</div>
|
className="d-flex flex-row justify-content-center align-items-center my-3"
|
||||||
<div className="d-flex flex-row align-items-center justify-content-center">
|
style={{ height: "6rem" }}
|
||||||
{ratings.map(({ value, emoji }) => (
|
>
|
||||||
<div
|
<div className="lead">Thanks for your feedback!</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="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)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex flex-row justify-content-between align-items-center">
|
|
||||||
<div className="small">
|
|
||||||
{(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">
|
|
||||||
<samp>sending...</samp>
|
|
||||||
</div>}
|
|
||||||
<div>
|
|
||||||
<button className="btn btn-sm btn-primary" onClick={handleSendFeedback}>Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{user && <div className="form-check small">
|
|
||||||
<input
|
|
||||||
className="form-check-input"
|
|
||||||
type="checkbox"
|
|
||||||
checked={anonymous}
|
|
||||||
onChange={e => setAnonymous(e.target.checked)}
|
|
||||||
id="anonymounCheck"
|
|
||||||
/>
|
|
||||||
<label className="form-check-label" htmlFor="anonymousCheck">
|
|
||||||
stay anonymouns
|
|
||||||
</label>
|
|
||||||
</div>}
|
|
||||||
</div>}
|
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
</div>;
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<hr />
|
||||||
|
<div className="my-4">
|
||||||
|
<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="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)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="d-flex flex-row justify-content-between align-items-center">
|
||||||
|
<div className="small">
|
||||||
|
{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">
|
||||||
|
<samp>sending...</samp>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
onClick={handleSendFeedback}
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{user && (
|
||||||
|
<div className="form-check small">
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
checked={anonymous}
|
||||||
|
onChange={(e) => setAnonymous(e.target.checked)}
|
||||||
|
id="anonymounCheck"
|
||||||
|
/>
|
||||||
|
<label className="form-check-label" htmlFor="anonymousCheck">
|
||||||
|
stay anonymouns
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default ChapterFeedback;
|
export default ChapterFeedback;
|
||||||
Loading…
Reference in New Issue