-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add feedback form with FeedbackBlock
- Adds a feedback form allowing visitors to enter their name and e-mail, and optionally their company. Data will be submitted to an API (pending). - Adds a Sentiment component which allows visitors to select how they feed about the page. - Moves EmoticonButton into the Sentiment module since it's unlikely to be used elsewhere. Ideally, I think I'd like to lift the calls to `fetch` out to a parent component for both Sentiment and SubscriptionForm, but for now this feels like a nice and simple way of doing what we need.
- Loading branch information
Showing
19 changed files
with
4,815 additions
and
13,867 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| NEXT_PUBLIC_BACKEND_URL=http://localhost:8000 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| export default function ButtonLoadingIcon() { | ||
| return ( | ||
| // By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL | ||
| <svg width="60" height="15" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff"> | ||
| <circle cx="15" cy="15" r="15"> | ||
| <animate | ||
| attributeName="r" | ||
| from="15" | ||
| to="15" | ||
| begin="0s" | ||
| dur="0.8s" | ||
| values="15;9;15" | ||
| calcMode="linear" | ||
| repeatCount="indefinite" | ||
| /> | ||
| <animate | ||
| attributeName="fill-opacity" | ||
| from="1" | ||
| to="1" | ||
| begin="0s" | ||
| dur="0.8s" | ||
| values="1;.5;1" | ||
| calcMode="linear" | ||
| repeatCount="indefinite" | ||
| /> | ||
| </circle> | ||
| <circle cx="60" cy="15" r="9" fillOpacity="0.3"> | ||
| <animate | ||
| attributeName="r" | ||
| from="9" | ||
| to="9" | ||
| begin="0s" | ||
| dur="0.8s" | ||
| values="9;15;9" | ||
| calcMode="linear" | ||
| repeatCount="indefinite" | ||
| /> | ||
| <animate | ||
| attributeName="fill-opacity" | ||
| from="0.5" | ||
| to="0.5" | ||
| begin="0s" | ||
| dur="0.8s" | ||
| values=".5;1;.5" | ||
| calcMode="linear" | ||
| repeatCount="indefinite" | ||
| /> | ||
| </circle> | ||
| <circle cx="105" cy="15" r="15"> | ||
| <animate | ||
| attributeName="r" | ||
| from="15" | ||
| to="15" | ||
| begin="0s" | ||
| dur="0.8s" | ||
| values="15;9;15" | ||
| calcMode="linear" | ||
| repeatCount="indefinite" | ||
| /> | ||
| <animate | ||
| attributeName="fill-opacity" | ||
| from="1" | ||
| to="1" | ||
| begin="0s" | ||
| dur="0.8s" | ||
| values="1;.5;1" | ||
| calcMode="linear" | ||
| repeatCount="indefinite" | ||
| /> | ||
| </circle> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| import { RadioGroup } from "@headlessui/react"; | ||
| import EmoticonButton from "./EmoticonButton"; | ||
|
|
||
| export default function Sentiment() { | ||
| const [choice, setChoice] = useState(); | ||
|
|
||
| const onChange = (selected) => { | ||
| if (!selected) { | ||
| return; | ||
| } | ||
|
|
||
| setChoice(selected); | ||
|
|
||
| fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/update-ratings/`, { | ||
| headers: { | ||
| Accept: "application/json", | ||
| "Content-Type": "application/json", | ||
| }, | ||
| method: "POST", | ||
| body: JSON.stringify({ rating: selected }), | ||
| }) | ||
| .then(() => {}) | ||
| .catch(() => {}); | ||
| }; | ||
|
|
||
| return ( | ||
| <RadioGroup | ||
| value={choice} | ||
| onChange={onChange} | ||
| className="flex w-full justify-center gap-6 pt-12 pb-24" | ||
| > | ||
| <RadioGroup.Label className="sr-only">What did you think?</RadioGroup.Label> | ||
| <RadioGroup.Option value="heart"> | ||
| {({ checked }) => <EmoticonButton variant="heart" checked={checked} />} | ||
| </RadioGroup.Option> | ||
| <RadioGroup.Option value="thumbsup"> | ||
| {({ checked }) => <EmoticonButton variant="thumbsup" checked={checked} />} | ||
| </RadioGroup.Option> | ||
| <RadioGroup.Option value="neutral"> | ||
| {({ checked }) => <EmoticonButton variant="even" checked={checked} />} | ||
| </RadioGroup.Option> | ||
| <RadioGroup.Option value="thumbsdown"> | ||
| {({ checked }) => <EmoticonButton variant="thumbsdown" checked={checked} />} | ||
| </RadioGroup.Option> | ||
| </RadioGroup> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { render, screen, fireEvent, prettyDOM } from "@testing-library/react"; | ||
|
|
||
| import Sentiment from "."; | ||
|
|
||
| describe("Sentiment", () => { | ||
| beforeEach(() => { | ||
| global.fetch = jest.fn(() => | ||
| Promise.resolve({ | ||
| json: () => Promise.resolve({}), | ||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| afterEach(jest.restoreAllMocks); | ||
|
|
||
| it("renders with no option selected", () => { | ||
| render(<Sentiment />); | ||
|
|
||
| const radios = screen.queryAllByRole("radio"); | ||
|
|
||
| expect(radios).toHaveLength(4); | ||
|
|
||
| radios.forEach((radio) => { | ||
| expect(radio.getAttribute("aria-checked")).toEqual("false"); | ||
| }); | ||
| }); | ||
|
|
||
| it("allows selecting an option", () => { | ||
| const screen = render(<Sentiment />); | ||
| const radios = screen.queryAllByRole("radio"); | ||
|
|
||
| fireEvent.click(radios[0]); | ||
|
|
||
| expect(radios).toHaveLength(4); | ||
| expect(radios[0].getAttribute("aria-checked")).toEqual("true"); | ||
| }); | ||
|
|
||
| describe("when submitting a sentiment", () => { | ||
| it("sends data to the API", () => { | ||
| render(<Sentiment />); | ||
|
|
||
| fireEvent.click(screen.getAllByRole("radio")[0]); | ||
|
|
||
| expect(global.fetch).toHaveBeenCalledTimes(1); | ||
|
|
||
| const sentData = JSON.parse(global.fetch.mock.calls[0][1].body); | ||
| expect(sentData).toEqual({ rating: "heart" }); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.