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
|
* @author Naomi Carrigan
|
||||||
*/
|
*/
|
||||||
"use client";
|
"use client";
|
||||||
import { useState, type ChangeEvent, type JSX } from "react";
|
import { useEffect, useState, type ChangeEvent, type JSX } from "react";
|
||||||
import { Rule } from "../../components/rule";
|
import { Rule } from "../../components/rule";
|
||||||
|
|
||||||
type Category = "question" | "compliment" | "confess" | "never";
|
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!",
|
question: "Do you have a question for Naomi? Ask it here!",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
interface DataRecord {
|
||||||
|
category: Category;
|
||||||
|
question: string;
|
||||||
|
answer: string;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders the /ask page.
|
* Renders the /ask page.
|
||||||
* @returns A React Component.
|
* @returns A React Component.
|
||||||
@ -58,6 +64,20 @@ const Ask = (): JSX.Element => {
|
|||||||
const [ question, setQuestion ] = useState<string>("");
|
const [ question, setQuestion ] = useState<string>("");
|
||||||
const [ submitted, setSubmitted ] = useState<boolean>(false);
|
const [ submitted, setSubmitted ] = useState<boolean>(false);
|
||||||
const [ errored, setErrored ] = 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 = (
|
const handleCategoryChange = (
|
||||||
event: ChangeEvent<HTMLSelectElement>,
|
event: ChangeEvent<HTMLSelectElement>,
|
||||||
@ -82,13 +102,14 @@ const Ask = (): JSX.Element => {
|
|||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
method: "POST",
|
method: "POST",
|
||||||
}).then((response) => {
|
|
||||||
if (response.ok) {
|
|
||||||
setSubmitted(true);
|
|
||||||
} else {
|
|
||||||
setErrored(true);
|
|
||||||
}
|
|
||||||
}).
|
}).
|
||||||
|
then((response) => {
|
||||||
|
if (response.ok) {
|
||||||
|
setSubmitted(true);
|
||||||
|
} else {
|
||||||
|
setErrored(true);
|
||||||
|
}
|
||||||
|
}).
|
||||||
catch(() => {
|
catch(() => {
|
||||||
setErrored(true);
|
setErrored(true);
|
||||||
});
|
});
|
||||||
@ -105,63 +126,87 @@ const Ask = (): JSX.Element => {
|
|||||||
{`!`}
|
{`!`}
|
||||||
</p>
|
</p>
|
||||||
<Rule />
|
<Rule />
|
||||||
{!submitted && !errored && <section>
|
{!submitted && !errored
|
||||||
<h2 className="text-3xl">{TitleMap[category]}</h2>
|
&& <section>
|
||||||
<p className="mb-2">{DescriptionMap[category]}</p>
|
<h2 className="text-3xl">{TitleMap[category]}</h2>
|
||||||
<form>
|
<p className="mb-2">{DescriptionMap[category]}</p>
|
||||||
<select
|
<form>
|
||||||
className="text-center border-2 rounded-lg p-0.5 mb-0.5"
|
<select
|
||||||
// eslint-disable-next-line react/jsx-no-bind
|
className="text-center border-2 rounded-lg p-0.5 mb-0.5"
|
||||||
onChange={handleCategoryChange}
|
// eslint-disable-next-line react/jsx-no-bind
|
||||||
style={{
|
onChange={handleCategoryChange}
|
||||||
backgroundColor: ColourMap[category].background,
|
style={{
|
||||||
borderColor: ColourMap[category].foreground,
|
backgroundColor: ColourMap[category].background,
|
||||||
color: ColourMap[category].foreground,
|
borderColor: ColourMap[category].foreground,
|
||||||
}}
|
color: ColourMap[category].foreground,
|
||||||
>
|
}}
|
||||||
<option value="question">{`Question`}</option>
|
>
|
||||||
<option value="compliment">{`Compliment`}</option>
|
<option value="question">{`Question`}</option>
|
||||||
<option value="confess">{`Confession`}</option>
|
<option value="compliment">{`Compliment`}</option>
|
||||||
<option value="never">{`Never Have I Ever?`}</option>
|
<option value="confess">{`Confession`}</option>
|
||||||
</select>
|
<option value="never">{`Never Have I Ever?`}</option>
|
||||||
<textarea
|
</select>
|
||||||
className={`w-full h-48 p-2 border-2`}
|
<textarea
|
||||||
// eslint-disable-next-line react/jsx-no-bind
|
className={`w-full h-48 p-2 border-2`}
|
||||||
onChange={handleQuestionUpdate}
|
// eslint-disable-next-line react/jsx-no-bind
|
||||||
placeholder="Type your question here..."
|
onChange={handleQuestionUpdate}
|
||||||
style={{
|
placeholder="Type your question here..."
|
||||||
backgroundColor: ColourMap[category].background,
|
style={{
|
||||||
borderColor: ColourMap[category].foreground,
|
backgroundColor: ColourMap[category].background,
|
||||||
color: ColourMap[category].foreground,
|
borderColor: ColourMap[category].foreground,
|
||||||
}}
|
color: ColourMap[category].foreground,
|
||||||
/>
|
}}
|
||||||
<button
|
/>
|
||||||
className="font-bold py-2 px-4 rounded mt-2"
|
<button
|
||||||
// eslint-disable-next-line react/jsx-no-bind
|
className="font-bold py-2 px-4 rounded mt-2"
|
||||||
onClick={submitForm}
|
// eslint-disable-next-line react/jsx-no-bind
|
||||||
style={{
|
onClick={submitForm}
|
||||||
backgroundColor: ColourMap[category].background,
|
style={{
|
||||||
borderColor: ColourMap[category].foreground,
|
backgroundColor: ColourMap[category].background,
|
||||||
color: ColourMap[category].foreground,
|
borderColor: ColourMap[category].foreground,
|
||||||
}}
|
color: ColourMap[category].foreground,
|
||||||
type="button"
|
}}
|
||||||
>
|
type="button"
|
||||||
{`Submit`}
|
>
|
||||||
</button>
|
{`Submit`}
|
||||||
</form>
|
</button>
|
||||||
</section>}
|
</form>
|
||||||
{ submitted
|
</section>
|
||||||
|
}
|
||||||
|
{submitted
|
||||||
? <section>
|
? <section>
|
||||||
<h2 className="text-3xl">{`Question Submitted!`}</h2>
|
<h2 className="text-3xl">{`Question Submitted!`}</h2>
|
||||||
<p>{`Your question has been submitted! Please wait for approval and response.`}</p>
|
<p>{`Your question has been submitted! Please wait for approval and response.`}</p>
|
||||||
</section>
|
</section>
|
||||||
: null}
|
: null}
|
||||||
{ errored
|
{errored
|
||||||
? <section>
|
? <section>
|
||||||
<h2 className="text-3xl">{`Submission Error`}</h2>
|
<h2 className="text-3xl">{`Submission Error`}</h2>
|
||||||
<p>{`An error occurred while submitting your question. Please try again later.`}</p>
|
<p>{`An error occurred while submitting your question. Please try again later.`}</p>
|
||||||
</section>
|
</section>
|
||||||
: null}
|
: 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>
|
</main>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user