Files
mindfulness/client/app/(onboarding)/onboarding.tsx
2026-01-29 19:09:36 +08:00

69 lines
1.9 KiB
TypeScript

import { useState } from 'react';
import { useRouter } from 'expo-router';
import { OnboardingLayout } from '@/components/onboarding/OnboardingLayout';
import { NameInputStep } from '@/components/onboarding/NameInputStep';
import { IntentSelectionStep } from '@/components/onboarding/IntentSelectionStep';
import { setOnboardingCompleted, setUserProfile } from '@/src/storage/appStorage';
export default function OnboardingScreen() {
const router = useRouter();
const [step, setStep] = useState(0);
const [name, setName] = useState('');
const [intents, setIntents] = useState<string[]>([]);
async function onFinish() {
// Save whatever input we have
await setUserProfile({ name, intents });
await setOnboardingCompleted(true);
router.replace('/(onboarding)/push-prompt');
}
async function onNext() {
if (step === 0) {
setStep(1);
} else {
await onFinish();
}
}
async function onSkip() {
// Skip logic: move to next step regardless of input
if (step === 0) {
setStep(1);
} else {
await onFinish();
}
}
// Step 0: Next button requires input
// Step 1: Next button always enabled (can proceed with empty selection)
const nextEnabled = step === 0 ? name.trim().length > 0 : true;
return (
<OnboardingLayout
onSkip={onSkip}
onNext={onNext}
nextEnabled={nextEnabled}
>
{step === 0 ? (
<NameInputStep
value={name}
onChangeText={setName}
onSubmitEditing={name.trim().length > 0 ? onNext : undefined}
/>
) : (
<IntentSelectionStep
selectedIds={intents}
onToggle={(id) => {
setIntents(prev =>
prev.includes(id)
? prev.filter(i => i !== id)
: [...prev, id]
);
}}
/>
)}
</OnboardingLayout>
);
}