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

@@ -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,7 +102,8 @@ const Ask = (): JSX.Element => {
         "Content-Type": "application/json",
       },
       method: "POST",
-    }).then((response) => {
+    }).
+      then((response) => {
         if (response.ok) {
           setSubmitted(true);
         } else {
@@ -105,7 +126,8 @@ const Ask = (): JSX.Element => {
         {`!`}
       </p>
       <Rule />
-      {!submitted && !errored && <section>
+      {!submitted && !errored
+        && <section>
           <h2 className="text-3xl">{TitleMap[category]}</h2>
           <p className="mb-2">{DescriptionMap[category]}</p>
           <form>
@@ -149,19 +171,42 @@ const Ask = (): JSX.Element => {
               {`Submit`}
             </button>
           </form>
-      </section>}
-      { submitted
+        </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>
   );
 };