From 065c1dabd6abff10814f31a2b3a1c82e66992511 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Thu, 28 Nov 2024 22:00:18 +0000
Subject: [PATCH] feat: display question history (#52)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] 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.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/52
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
---
 src/app/ask/page.tsx | 153 ++++++++++++++++++++++++++++---------------
 1 file changed, 99 insertions(+), 54 deletions(-)

diff --git a/src/app/ask/page.tsx b/src/app/ask/page.tsx
index c87e12d..02d8371 100644
--- a/src/app/ask/page.tsx
+++ b/src/app/ask/page.tsx
@@ -4,7 +4,7 @@
  * @author Naomi Carrigan
  */
 "use client";
-import { useState, type ChangeEvent, type JSX } from "react";
+import { useEffect, useState, type ChangeEvent, type JSX } from "react";
 import { Rule } from "../../components/rule";
 
 type Category = "question" | "compliment" | "confess" | "never";
@@ -49,6 +49,12 @@ const DescriptionMap: Record<Category, string> = {
   question: "Do you have a question for Naomi? Ask it here!",
 };
 
+interface DataRecord {
+  category: Category;
+  question: string;
+  answer:   string;
+}
+
 /**
  * Renders the /ask page.
  * @returns A React Component.
@@ -58,6 +64,20 @@ const Ask = (): JSX.Element => {
   const [ question, setQuestion ] = useState<string>("");
   const [ submitted, setSubmitted ] = useState<boolean>(false);
   const [ errored, setErrored ] = useState<boolean>(false);
+  const [ history, setHistory ] = useState<Array<DataRecord>>([]);
+
+  useEffect(() => {
+    fetch("https://anon.nhcarrigan.com/recent").then(async(response) => {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const result = await response.json() as Array<DataRecord>;
+      setHistory(result);
+    }).
+      catch((error: unknown) => {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        setHistory([]);
+      });
+  }, []);
 
   const handleCategoryChange = (
     event: ChangeEvent<HTMLSelectElement>,
@@ -82,13 +102,14 @@ const Ask = (): JSX.Element => {
         "Content-Type": "application/json",
       },
       method: "POST",
-    }).then((response) => {
-      if (response.ok) {
-        setSubmitted(true);
-      } else {
-        setErrored(true);
-      }
     }).
+      then((response) => {
+        if (response.ok) {
+          setSubmitted(true);
+        } else {
+          setErrored(true);
+        }
+      }).
       catch(() => {
         setErrored(true);
       });
@@ -105,63 +126,87 @@ const Ask = (): JSX.Element => {
         {`!`}
       </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
+      {!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
+      {errored
         ? <section>
           <h2 className="text-3xl">{`Submission Error`}</h2>
           <p>{`An error occurred while submitting your question. Please try again later.`}</p>
         </section>
         : null}
+      <Rule />
+      <h2 className="text-3xl">{`Prior Questions`}</h2>
+      <p>{`Here are the most recently answered questions - if you want to see the full history, join our Discord!`}</p>
+      {history.length > 0
+        ? history.map((record) => {
+          return (
+            <section
+              className="border-2 rounded-lg p-2 mt-2"
+              key={record.question}
+              style={{
+                backgroundColor: ColourMap[record.category].background,
+                borderColor:     ColourMap[record.category].foreground,
+                color:           ColourMap[record.category].foreground,
+              }}
+            >
+              <h3 className="text-2xl">{record.question}</h3>
+              <p>{record.answer}</p>
+            </section>
+          );
+        })
+        : <p>{`No questions have been answered yet!`}</p>
+      }
     </main>
   );
 };