setting up test functionality
This commit is contained in:
masongga
185
components/daily-quiz/daily-quiz-form.tsx
Normal file
185
components/daily-quiz/daily-quiz-form.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { PixelAvatar } from "@/components/avatar/pixel-avatar";
|
||||
import { WellnessSlider } from "@/components/daily-quiz/wellness-slider";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
defaultDailyQuizAnswers,
|
||||
WELLNESS_SCALE_MAX,
|
||||
type DailyQuizAnswers,
|
||||
type DailyQuizSubmission,
|
||||
} from "@/lib/avatar-state";
|
||||
import {
|
||||
getDailyQuizSubmission,
|
||||
getTodayDateKey,
|
||||
saveDailyQuizSubmission,
|
||||
} from "@/lib/daily-quiz-storage";
|
||||
|
||||
export function DailyQuizForm() {
|
||||
const [answers, setAnswers] = useState<DailyQuizAnswers>(
|
||||
defaultDailyQuizAnswers,
|
||||
);
|
||||
const [submission, setSubmission] = useState<DailyQuizSubmission | null>(
|
||||
null,
|
||||
);
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const existingSubmission = getDailyQuizSubmission();
|
||||
|
||||
if (existingSubmission?.date === getTodayDateKey()) {
|
||||
setSubmission(existingSubmission);
|
||||
setAnswers(existingSubmission.answers);
|
||||
}
|
||||
|
||||
setIsReady(true);
|
||||
}, []);
|
||||
|
||||
const isCompleted = submission !== null;
|
||||
const canSubmit = !isCompleted;
|
||||
|
||||
const updateAnswer = <K extends keyof DailyQuizAnswers>(
|
||||
key: K,
|
||||
value: DailyQuizAnswers[K],
|
||||
) => {
|
||||
setAnswers((current) => ({
|
||||
...current,
|
||||
[key]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!canSubmit) {
|
||||
return;
|
||||
}
|
||||
|
||||
const savedSubmission = saveDailyQuizSubmission(answers);
|
||||
setSubmission(savedSubmission);
|
||||
};
|
||||
|
||||
if (!isReady) {
|
||||
return (
|
||||
<p className="text-sm text-muted-foreground">Loading today's quiz...</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge>Today's check-in</Badge>
|
||||
<Badge variant={isCompleted ? "default" : "outline"}>
|
||||
{isCompleted ? "Completed" : "Not completed"}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Wellness</CardTitle>
|
||||
<CardDescription>
|
||||
Sliders from 1 to 5 for how you're doing today.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-5">
|
||||
<WellnessSlider
|
||||
id="feeling"
|
||||
label="How are you feeling today?"
|
||||
value={answers.feeling}
|
||||
disabled={isCompleted}
|
||||
onChange={(value) => updateAnswer("feeling", value)}
|
||||
/>
|
||||
<WellnessSlider
|
||||
id="stress"
|
||||
label="How stressed are you today?"
|
||||
value={answers.stress}
|
||||
disabled={isCompleted}
|
||||
onChange={(value) => updateAnswer("stress", value)}
|
||||
/>
|
||||
<WellnessSlider
|
||||
id="energy"
|
||||
label="How much energy do you have?"
|
||||
value={answers.energy}
|
||||
disabled={isCompleted}
|
||||
onChange={(value) => updateAnswer("energy", value)}
|
||||
/>
|
||||
<WellnessSlider
|
||||
id="sleep-length"
|
||||
label="How long did you sleep?"
|
||||
value={answers.sleepLength}
|
||||
disabled={isCompleted}
|
||||
onChange={(value) => updateAnswer("sleepLength", value)}
|
||||
/>
|
||||
<WellnessSlider
|
||||
id="sleep-quality"
|
||||
label="How good was your sleep?"
|
||||
value={answers.sleepQuality}
|
||||
disabled={isCompleted}
|
||||
onChange={(value) => updateAnswer("sleepQuality", value)}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Daily journal</CardTitle>
|
||||
<CardDescription>Write about your day.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Label htmlFor="journal" className="sr-only">
|
||||
Daily journal
|
||||
</Label>
|
||||
<textarea
|
||||
id="journal"
|
||||
value={answers.journal}
|
||||
disabled={isCompleted}
|
||||
onChange={(event) => updateAnswer("journal", event.target.value)}
|
||||
className="min-h-32 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
|
||||
placeholder="Write about your day."
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{isCompleted && submission ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center gap-4 pt-6">
|
||||
<PixelAvatar mood={submission.condition.mood} size="md" />
|
||||
<div className="grid w-full grid-cols-3 gap-2 text-center text-sm">
|
||||
<div className="rounded-lg border px-3 py-2">
|
||||
<p className="text-muted-foreground">Mood</p>
|
||||
<p className="font-medium capitalize">
|
||||
{submission.condition.mood}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border px-3 py-2">
|
||||
<p className="text-muted-foreground">Energy</p>
|
||||
<p className="font-medium">
|
||||
{submission.condition.energy}/{WELLNESS_SCALE_MAX}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border px-3 py-2">
|
||||
<p className="text-muted-foreground">Health</p>
|
||||
<p className="font-medium">
|
||||
{submission.condition.health}/{WELLNESS_SCALE_MAX}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<Button className="w-full" disabled={!canSubmit} onClick={handleSubmit}>
|
||||
Complete daily quiz
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
components/daily-quiz/daily-quiz-link-button.tsx
Normal file
32
components/daily-quiz/daily-quiz-link-button.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { hasCompletedDailyQuizToday } from "@/lib/daily-quiz-storage";
|
||||
import { routes } from "@/lib/routes";
|
||||
|
||||
export function DailyQuizLinkButton() {
|
||||
const [isCompleted, setIsCompleted] = useState(false);
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsCompleted(hasCompletedDailyQuizToday());
|
||||
setIsReady(true);
|
||||
}, []);
|
||||
|
||||
if (!isReady || isCompleted) {
|
||||
return (
|
||||
<Button className="w-full" variant="outline" disabled>
|
||||
Open daily quiz
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button asChild className="w-full" variant="outline">
|
||||
<Link href={routes.dailyQuiz}>Open daily quiz</Link>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
51
components/daily-quiz/wellness-slider.tsx
Normal file
51
components/daily-quiz/wellness-slider.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
type WellnessSliderProps = {
|
||||
id: string;
|
||||
label: string;
|
||||
value: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
unit?: string;
|
||||
formatValue?: (value: number) => string;
|
||||
disabled?: boolean;
|
||||
onChange: (value: number) => void;
|
||||
};
|
||||
|
||||
export function WellnessSlider({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
min = 1,
|
||||
max = 5,
|
||||
step = 1,
|
||||
unit,
|
||||
formatValue,
|
||||
disabled = false,
|
||||
onChange,
|
||||
}: WellnessSliderProps) {
|
||||
const displayValue = formatValue ? formatValue(value) : `${value}${unit ?? ""}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
<span className="text-muted-foreground">{displayValue}</span>
|
||||
</div>
|
||||
<input
|
||||
id={id}
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
onChange={(event) => onChange(Number(event.target.value))}
|
||||
className="w-full accent-primary disabled:opacity-60"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user