diff --git a/.astro/types.d.ts b/.astro/types.d.ts index 03d7cc43f..f964fe0cf 100644 --- a/.astro/types.d.ts +++ b/.astro/types.d.ts @@ -1,2 +1 @@ /// -/// \ No newline at end of file diff --git a/src/components/UserPersona/UserPersonaForm.tsx b/src/components/UserPersona/UserPersonaForm.tsx index 3c2e09148..52a2b71db 100644 --- a/src/components/UserPersona/UserPersonaForm.tsx +++ b/src/components/UserPersona/UserPersonaForm.tsx @@ -27,20 +27,58 @@ export function UserPersonaForm(props: UserPersonaFormProps) { onSubmit, isLoading, } = props; - const [expertise, setExpertise] = useState( - defaultValues?.expertise ?? 'no-experience', - ); + const [expertise, setExpertise] = useState(defaultValues?.expertise ?? ''); - const [hasInitialGoal, setHasInitialGoal] = useState(!!defaultValues?.goal); + const goalOptions = [ + 'Finding a job', + 'Learning for fun', + 'Building a side project', + 'Switching careers', + 'Getting a promotion', + 'Filling knowledge gaps', + 'Other', + ]; + + const getInitialGoalSelection = () => { + if (!defaultValues?.goal) { + return ''; + } + + // Check if the goal matches any predefined option + for (const option of goalOptions.slice(0, -1)) { + // Exclude 'Other' + if (defaultValues.goal.startsWith(option)) { + return option; + } + } + + return 'Other'; + }; + + const [selectedGoal, setSelectedGoal] = useState(getInitialGoalSelection()); const [goal, setGoal] = useState(defaultValues?.goal ?? ''); const [commit, setCommit] = useState(defaultValues?.commit ?? ''); const expertiseFieldId = useId(); const goalFieldId = useId(); + const goalSelectId = useId(); const commitFieldId = useId(); const goalRef = useRef(null); + const handleGoalSelectionChange = (value: string) => { + setSelectedGoal(value); + + if (value === 'Other') { + setGoal(''); + setTimeout(() => { + goalRef.current?.focus(); + }, 0); + } else { + setGoal(value); + } + }; + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); onSubmit({ expertise, goal, commit }); @@ -60,12 +98,11 @@ export function UserPersonaForm(props: UserPersonaFormProps) { setExpertise(e.target.value)} className="h-[40px] border-gray-300 text-sm focus:border-gray-500 focus:ring-1 focus:ring-gray-500" > - + {[ 'No experience (just starting out)', 'Beginner (less than 1 year of experience)', @@ -79,60 +116,39 @@ export function UserPersonaForm(props: UserPersonaFormProps) { ))} +
- {!hasInitialGoal && ( -
- {[ - 'Finding a job', - 'Learning for fun', - 'Building a side project', - 'Switching careers', - 'Getting a promotion', - 'Filling knowledge gaps', - 'Other (tell us more)', - ].map((goalTemplate) => ( - - ))} -
+ {selectedGoal === 'Other' && ( +