269 lines
8.7 KiB
TypeScript
269 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { CheckCircle2 } from "lucide-react";
|
|
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,
|
|
formatSleepHours,
|
|
SLEEP_HOURS_MAX,
|
|
SLEEP_HOURS_MIN,
|
|
SLEEP_HOURS_STEP,
|
|
WELLNESS_SCALE_MAX,
|
|
type DailyQuizAnswers,
|
|
type DailyQuizSubmission,
|
|
} from "@/lib/avatar-state";
|
|
import {
|
|
getDailyEntryForToday,
|
|
saveDailyEntry,
|
|
} from "@/lib/daily-quiz-storage";
|
|
import { JOURNAL_MAX_LENGTH } from "@/lib/journal-safety";
|
|
|
|
export function DailyQuizForm() {
|
|
const [answers, setAnswers] = useState<DailyQuizAnswers>(
|
|
defaultDailyQuizAnswers,
|
|
);
|
|
const [journal, setJournal] = useState("");
|
|
const [submission, setSubmission] = useState<DailyQuizSubmission | null>(
|
|
null,
|
|
);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isReady, setIsReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
async function loadDailyCheckIn() {
|
|
try {
|
|
const existingEntry = await getDailyEntryForToday();
|
|
|
|
if (existingEntry) {
|
|
setSubmission(existingEntry);
|
|
setAnswers(existingEntry.answers);
|
|
setJournal(existingEntry.journal);
|
|
}
|
|
} catch (loadError) {
|
|
setError(
|
|
loadError instanceof Error
|
|
? loadError.message
|
|
: "Could not load today's check-in.",
|
|
);
|
|
} finally {
|
|
setIsReady(true);
|
|
}
|
|
}
|
|
|
|
void loadDailyCheckIn();
|
|
}, []);
|
|
|
|
const isCompleted = submission !== null;
|
|
const canSubmit = !isCompleted && !isSubmitting;
|
|
|
|
const updateAnswer = <K extends keyof DailyQuizAnswers>(
|
|
key: K,
|
|
value: DailyQuizAnswers[K],
|
|
) => {
|
|
setAnswers((current) => ({
|
|
...current,
|
|
[key]: value,
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!canSubmit) {
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const savedEntry = await saveDailyEntry(answers, journal);
|
|
setSubmission(savedEntry);
|
|
} catch (submitError) {
|
|
setError(
|
|
submitError instanceof Error
|
|
? submitError.message
|
|
: "Could not save your daily check-in.",
|
|
);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (!isReady) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground">Loading today's quiz...</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
{isCompleted && submission ? (
|
|
<>
|
|
<Card className="border-primary/40 bg-primary/10">
|
|
<CardContent className="flex items-start gap-4 pt-6">
|
|
<div className="rounded-full bg-primary/15 p-2.5">
|
|
<CheckCircle2
|
|
aria-hidden="true"
|
|
className="h-7 w-7 text-primary"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-lg font-semibold tracking-tight">
|
|
Today's quiz is complete
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Your wellness check-in and journal are saved for today. You
|
|
can review your answers below, and come back tomorrow for
|
|
your next quiz.
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Your pet today</CardTitle>
|
|
<CardDescription>
|
|
Based on the wellness check-in you already submitted.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col items-center gap-4">
|
|
<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 bg-background 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 bg-background 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 bg-background 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>
|
|
</>
|
|
) : (
|
|
<div className="flex items-center justify-between">
|
|
<Badge>Today's check-in</Badge>
|
|
<Badge variant="outline">Not completed</Badge>
|
|
</div>
|
|
)}
|
|
|
|
<Card className={isCompleted ? "opacity-90" : undefined}>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">
|
|
{isCompleted ? "Your answers today" : "Wellness"}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{isCompleted
|
|
? "These fields are locked until tomorrow's quiz."
|
|
: "Rate your wellness from 1 to 5. Sleep length uses hours."}
|
|
</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}
|
|
min={SLEEP_HOURS_MIN}
|
|
max={SLEEP_HOURS_MAX}
|
|
step={SLEEP_HOURS_STEP}
|
|
formatValue={formatSleepHours}
|
|
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 className={isCompleted ? "opacity-90" : undefined}>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Daily journal</CardTitle>
|
|
<CardDescription>
|
|
{isCompleted
|
|
? "Your journal entry for today."
|
|
: "Write about your day."}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Label htmlFor="journal" className="sr-only">
|
|
Daily journal
|
|
</Label>
|
|
<textarea
|
|
id="journal"
|
|
value={journal}
|
|
disabled={isCompleted}
|
|
maxLength={JOURNAL_MAX_LENGTH}
|
|
onChange={(event) => setJournal(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."
|
|
/>
|
|
{!isCompleted ? (
|
|
<p className="text-xs text-muted-foreground">
|
|
{journal.length}/{JOURNAL_MAX_LENGTH} characters
|
|
</p>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{error ? <p className="text-sm text-red-500">{error}</p> : null}
|
|
|
|
{!isCompleted ? (
|
|
<Button className="w-full" disabled={!canSubmit} onClick={handleSubmit}>
|
|
{isSubmitting ? "Saving..." : "Complete daily quiz"}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|