generated from nhcarrigan/template
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>
This commit is contained in:
Naomi the Technomancer
parent
6531fb917f
commit
065c1dabd6
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user