diff --git a/src/components/quiz-result.tsx b/src/components/quiz-result.tsx
index d012aea..eb063c0 100644
--- a/src/components/quiz-result.tsx
+++ b/src/components/quiz-result.tsx
@@ -2,17 +2,17 @@ import { CheckCircle } from "lucide-react";
import { CircleX } from "lucide-react";
export type QuizResultProps = {
- status: "accepted" | "rejected";
+ result: "accepted" | "rejected";
};
-export function QuizResult({ status }: QuizResultProps) {
+export function QuizResult({ result }: QuizResultProps) {
return (
Finished! Your result is...
- {status === "accepted" ? : }
+ {result === "accepted" ? : }
);
diff --git a/src/components/quiz.tsx b/src/components/quiz.tsx
index ec1613f..3dea1b9 100644
--- a/src/components/quiz.tsx
+++ b/src/components/quiz.tsx
@@ -27,6 +27,9 @@ export type QuizQuestion = {
};
export function Quiz() {
+ const [result, setResult] = React.useState<"accepted" | "rejected" | null>(
+ null,
+ );
const [questions, setQuestions] = React.useState([]);
// TODO: Perf: we may want to somehow preload the display HTML because
@@ -50,12 +53,23 @@ export function Quiz() {
);
}, []);
+ React.useEffect(() => {
+ const isRejected = questions.some((q) => q.response?.isRejection);
+ const isAccepted =
+ questions.length > 0
+ ? questions.every((q) => q.status === "complete")
+ : false;
+
+ if (isRejected) {
+ setResult("rejected");
+ } else if (isAccepted) {
+ setResult("accepted");
+ }
+ }, [questions]);
+
const [currentIndex, setCurrentIndex] = React.useState(0);
const currentQuestion = questions[currentIndex];
- const isRejected = questions.some((q) => q.response?.isRejection);
- const isAccepted = questions.every((q) => q.status === "complete");
-
function handleOptionClick(option: Option) {
// Update the current question with its response and "complete" status
// and set the next question as "upcoming"
@@ -99,10 +113,8 @@ export function Quiz() {
return (
- {isRejected ? (
-
- ) : isAccepted ? (
-
+ {result ? (
+
) : currentQuestion ? (