Compare commits
No commits in common. "7495bf896e539f86c4cd0448839bf6780d08a1d9" and "6cb0cc1740c9d5ecc93d8cc9a921969de841083a" have entirely different histories.
7495bf896e
...
6cb0cc1740
|
@ -1,4 +1,4 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useUser } from "../user-context";
|
import { useUser } from "../user-context";
|
||||||
|
|
||||||
const ratings = [
|
const ratings = [
|
||||||
|
@ -6,23 +6,16 @@ const ratings = [
|
||||||
{ 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<
|
const [feedbackStatus, setFeedbackStatus] = useState<"unsent" | "sending" | "sent">("unsent")
|
||||||
"unsent" | "sending" | "sent"
|
|
||||||
>("unsent");
|
|
||||||
useEffect(() => {
|
|
||||||
setFeedbackStatus("unsent");
|
|
||||||
setFeedback("");
|
|
||||||
setRating(undefined);
|
|
||||||
}, [chapter]);
|
|
||||||
function handleRatingClick(v: number) {
|
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
|
// automatic sending of emoji click feedback if someone leaves the chapter without
|
||||||
// filling in and sending the feedback textbox
|
// filling in and sending the feedback textbox
|
||||||
|
@ -60,37 +53,28 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify(toSend),
|
body: JSON.stringify(toSend),
|
||||||
})
|
}).then(res => res.json()).then(res => {
|
||||||
.then((res) => res.json())
|
|
||||||
.then((res) => {
|
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
setFeedbackStatus("sent");
|
setFeedbackStatus("sent");
|
||||||
} else {
|
} else {
|
||||||
setFeedbackStatus("unsent");
|
setFeedbackStatus("unsent");
|
||||||
alert("error sending feedback");
|
alert("error sending feedback");
|
||||||
}
|
}
|
||||||
})
|
}).catch(() => {
|
||||||
.catch(() => {
|
|
||||||
setFeedbackStatus("unsent");
|
setFeedbackStatus("unsent");
|
||||||
alert("connect to the internet to send feedback");
|
alert("connect to the internet to send feedback");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (feedbackStatus === "sent") {
|
if (feedbackStatus === "sent") {
|
||||||
return (
|
return <div>
|
||||||
<div>
|
|
||||||
<hr/>
|
<hr/>
|
||||||
<div
|
<div className="d-flex flex-row justify-content-center align-items-center my-3" style={{ height: "6rem" }}>
|
||||||
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 className="lead">Thanks for your feedback!</div>
|
||||||
</div>
|
</div>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
}
|
}
|
||||||
return (
|
return <div>
|
||||||
<div>
|
|
||||||
<hr />
|
<hr />
|
||||||
<div className="my-4">
|
<div className="my-4">
|
||||||
<div className="text-center">Was this chapter helpful?</div>
|
<div className="text-center">Was this chapter helpful?</div>
|
||||||
|
@ -99,77 +83,62 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
|
||||||
<div
|
<div
|
||||||
key={value}
|
key={value}
|
||||||
className="mx-2 clickable"
|
className="mx-2 clickable"
|
||||||
style={
|
style={rating !== value
|
||||||
rating !== value
|
|
||||||
? {
|
? {
|
||||||
filter: "grayscale(100%)",
|
filter: "grayscale(100%)",
|
||||||
fontSize: "2.25rem",
|
fontSize: "2.25rem",
|
||||||
}
|
} : { fontSize: "2.75rem" }}
|
||||||
: { fontSize: "2.75rem" }
|
|
||||||
}
|
|
||||||
onClick={() => handleRatingClick(value)}
|
onClick={() => handleRatingClick(value)}
|
||||||
>
|
>
|
||||||
{emoji}
|
{emoji}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{rating !== undefined && (
|
{rating !== undefined && <div style={{ maxWidth: "30rem", margin: "0 auto" }}>
|
||||||
<div style={{ maxWidth: "30rem", margin: "0 auto" }}>
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label htmlFor="feedbackText" className="text-left">
|
<label htmlFor="feedbackText" className="text-left">Feedback:</label>
|
||||||
Feedback:
|
|
||||||
</label>
|
|
||||||
<textarea
|
<textarea
|
||||||
className="form-control"
|
className="form-control"
|
||||||
id="feedbackText"
|
id="feedbackText"
|
||||||
placeholder="Share more or leave blank"
|
placeholder="Share more or leave blank"
|
||||||
rows={3}
|
rows={3}
|
||||||
value={feedback}
|
value={feedback}
|
||||||
onChange={(e) => setFeedback(e.target.value)}
|
onChange={e => setFeedback(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-row justify-content-between align-items-center">
|
<div className="d-flex flex-row justify-content-between align-items-center">
|
||||||
<div className="small">
|
<div className="small">
|
||||||
{user && !anonymous
|
{(user && !anonymous)
|
||||||
? `Private feedback will be sent as "${user.name}"`
|
? `Private feedback will be sent as "${user.name}"`
|
||||||
: `Private feedback will be anonymous`}
|
: `Private feedback will be anonymous`}
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-row align-items-center">
|
<div className="d-flex flex-row align-items-center">
|
||||||
{feedbackStatus === "sending" && (
|
{feedbackStatus === "sending" && <div className="mr-3">
|
||||||
<div className="mr-3">
|
|
||||||
<samp>sending...</samp>
|
<samp>sending...</samp>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{user && (
|
{user && <div className="form-check small">
|
||||||
<div className="form-check small">
|
|
||||||
<input
|
<input
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={anonymous}
|
checked={anonymous}
|
||||||
onChange={(e) => setAnonymous(e.target.checked)}
|
onChange={e => setAnonymous(e.target.checked)}
|
||||||
id="anonymounCheck"
|
id="anonymounCheck"
|
||||||
/>
|
/>
|
||||||
<label className="form-check-label" htmlFor="anonymousCheck">
|
<label className="form-check-label" htmlFor="anonymousCheck">
|
||||||
stay anonymouns
|
stay anonymouns
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>}
|
||||||
)}
|
</div>}
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
</div>
|
</div>;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default ChapterFeedback;
|
export default ChapterFeedback;
|
Loading…
Reference in New Issue