From f985797a218949c683ec4288600ed354d61bb20a Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Tue, 12 Nov 2024 01:19:00 +0000
Subject: [PATCH] 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>
---
 src/app/ask/page.tsx   | 169 +++++++++++++++++++++++++++++++++++++++++
 src/config/NavItems.ts |   1 +
 2 files changed, 170 insertions(+)
 create mode 100644 src/app/ask/page.tsx

diff --git a/src/app/ask/page.tsx b/src/app/ask/page.tsx
new file mode 100644
index 0000000..c87e12d
--- /dev/null
+++ b/src/app/ask/page.tsx
@@ -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;
diff --git a/src/config/NavItems.ts b/src/config/NavItems.ts
index 16eb52e..56888f5 100644
--- a/src/config/NavItems.ts
+++ b/src/config/NavItems.ts
@@ -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);
 });