generated from nhcarrigan/template
feat: add page for anonymous questions (#40)
### Explanation _No response_ ### Issue _No response_ ### Attestations - [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [x] I have pinned the dependencies to a specific patch version. ### Style - [x] I have run the linter and resolved any errors. - [x] My pull request uses an appropriate title, matching the conventional commit standards. - [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [x] All new and existing tests pass locally with my changes. - [x] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning Minor - My pull request introduces a new non-breaking feature. Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/40 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
Naomi the Technomancer
parent
7871ab6375
commit
f985797a21
169
src/app/ask/page.tsx
Normal file
169
src/app/ask/page.tsx
Normal file
@ -0,0 +1,169 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
"use client";
|
||||
import { useState, type ChangeEvent, type JSX } from "react";
|
||||
import { Rule } from "../../components/rule";
|
||||
|
||||
type Category = "question" | "compliment" | "confess" | "never";
|
||||
|
||||
const ColourMap: Record<Category, { background: string; foreground: string }>
|
||||
= {
|
||||
compliment: {
|
||||
background: "#a6f1c6",
|
||||
foreground: "#0f9d58",
|
||||
},
|
||||
confess: {
|
||||
background: "#f7c6d2",
|
||||
foreground: "#b03060",
|
||||
},
|
||||
never: {
|
||||
background: "#f7e6c6",
|
||||
foreground: "#b8860b",
|
||||
},
|
||||
question: {
|
||||
background: "#a6e6fc",
|
||||
foreground: "#03779e",
|
||||
},
|
||||
};
|
||||
|
||||
const TitleMap: Record<Category, string> = {
|
||||
compliment: "Pay Naomi a Compliment",
|
||||
confess: "Confess Your Sins to Naomi",
|
||||
never: "Never Have I Ever?",
|
||||
question: "Ask Naomi a Question",
|
||||
};
|
||||
|
||||
const DescriptionMap: Record<Category, string> = {
|
||||
compliment:
|
||||
// eslint-disable-next-line stylistic/max-len
|
||||
"Have you wanted to tell Naomi she's cute, but you've been too shy? Here's your chance!",
|
||||
confess:
|
||||
// eslint-disable-next-line stylistic/max-len
|
||||
"Is there something weighing on your mind that you can't tell anyone else? Confess it here!",
|
||||
never:
|
||||
// eslint-disable-next-line stylistic/max-len
|
||||
"What do you think Naomi has done that you haven't? Let's play a game of Never Have I Ever!",
|
||||
question: "Do you have a question for Naomi? Ask it here!",
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the /ask page.
|
||||
* @returns A React Component.
|
||||
*/
|
||||
const Ask = (): JSX.Element => {
|
||||
const [ category, setCategory ] = useState<Category>("question");
|
||||
const [ question, setQuestion ] = useState<string>("");
|
||||
const [ submitted, setSubmitted ] = useState<boolean>(false);
|
||||
const [ errored, setErrored ] = useState<boolean>(false);
|
||||
|
||||
const handleCategoryChange = (
|
||||
event: ChangeEvent<HTMLSelectElement>,
|
||||
): void => {
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
setCategory(event.target.value as Category);
|
||||
};
|
||||
|
||||
const handleQuestionUpdate = (
|
||||
event: ChangeEvent<HTMLTextAreaElement>,
|
||||
): void => {
|
||||
setQuestion(event.target.value);
|
||||
};
|
||||
|
||||
const submitForm = (): void => {
|
||||
fetch("https://anon.nhcarrigan.com/api", {
|
||||
body: JSON.stringify({
|
||||
category,
|
||||
question,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "POST",
|
||||
}).then((response) => {
|
||||
if (response.ok) {
|
||||
setSubmitted(true);
|
||||
} else {
|
||||
setErrored(true);
|
||||
}
|
||||
}).
|
||||
catch(() => {
|
||||
setErrored(true);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
|
||||
<h1 className="text-5xl">{`Ask Me Anything!`}</h1>
|
||||
<p>
|
||||
{`This page allows you to anonymously ask any question you might wish! Once approved and answered, your question and our response will be visible in our `}
|
||||
<a
|
||||
className="underline"
|
||||
href="https://chat.nhcarrigan.com"
|
||||
>{`Discord`}</a>
|
||||
{`!`}
|
||||
</p>
|
||||
<Rule />
|
||||
{!submitted && !errored && <section>
|
||||
<h2 className="text-3xl">{TitleMap[category]}</h2>
|
||||
<p className="mb-2">{DescriptionMap[category]}</p>
|
||||
<form>
|
||||
<select
|
||||
className="text-center border-2 rounded-lg p-0.5 mb-0.5"
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onChange={handleCategoryChange}
|
||||
style={{
|
||||
backgroundColor: ColourMap[category].background,
|
||||
borderColor: ColourMap[category].foreground,
|
||||
color: ColourMap[category].foreground,
|
||||
}}
|
||||
>
|
||||
<option value="question">{`Question`}</option>
|
||||
<option value="compliment">{`Compliment`}</option>
|
||||
<option value="confess">{`Confession`}</option>
|
||||
<option value="never">{`Never Have I Ever?`}</option>
|
||||
</select>
|
||||
<textarea
|
||||
className={`w-full h-48 p-2 border-2`}
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onChange={handleQuestionUpdate}
|
||||
placeholder="Type your question here..."
|
||||
style={{
|
||||
backgroundColor: ColourMap[category].background,
|
||||
borderColor: ColourMap[category].foreground,
|
||||
color: ColourMap[category].foreground,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
className="font-bold py-2 px-4 rounded mt-2"
|
||||
// eslint-disable-next-line react/jsx-no-bind
|
||||
onClick={submitForm}
|
||||
style={{
|
||||
backgroundColor: ColourMap[category].background,
|
||||
borderColor: ColourMap[category].foreground,
|
||||
color: ColourMap[category].foreground,
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
{`Submit`}
|
||||
</button>
|
||||
</form>
|
||||
</section>}
|
||||
{ submitted
|
||||
? <section>
|
||||
<h2 className="text-3xl">{`Question Submitted!`}</h2>
|
||||
<p>{`Your question has been submitted! Please wait for approval and response.`}</p>
|
||||
</section>
|
||||
: null}
|
||||
{ errored
|
||||
? <section>
|
||||
<h2 className="text-3xl">{`Submission Error`}</h2>
|
||||
<p>{`An error occurred while submitting your question. Please try again later.`}</p>
|
||||
</section>
|
||||
: null}
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Ask;
|
||||
@ -21,6 +21,7 @@ export const NavItems = [
|
||||
{ href: "/activity", text: "Activity" },
|
||||
{ href: "/art", text: "Art" },
|
||||
{ href: "/manifesto", text: "Transfemme Manifesto" },
|
||||
{ href: "/ask", text: "Ask Me Anything!" },
|
||||
].sort((a, b) => {
|
||||
return a.text.localeCompare(b.text);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user