diff --git a/frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx b/frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx index c96136ce1..6f495d505 100644 --- a/frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx +++ b/frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { setAvatar, setName, @@ -18,6 +18,7 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { avatars } from '@/constants/avatars'; import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures'; +import { RootState } from '@/app/store'; interface AvatarNameSelectionStepProps { stepIndex: number; @@ -32,11 +33,20 @@ export const AvatarSelectionStep: React.FC = ({ }) => { const dispatch = useDispatch(); - const [name, setLocalName] = useState(''); - const [selectedAvatar, setLocalAvatar] = useState(''); + const [name, setLocalName] = useState(localStorage.getItem('name') || ''); + const [selectedAvatar, setLocalAvatar] = useState( + localStorage.getItem('avatar') || '', + ); + const isEditing = useSelector( + (state: RootState) => state.onboarding.isEditing, + ); useEffect(() => { - if (localStorage.getItem('name') && localStorage.getItem('avatar')) { + if ( + localStorage.getItem('name') && + localStorage.getItem('avatar') && + !isEditing + ) { dispatch(markCompleted(stepIndex)); } }, []); @@ -57,7 +67,11 @@ export const AvatarSelectionStep: React.FC = ({ dispatch(markCompleted(stepIndex)); }; - if (localStorage.getItem('name') && localStorage.getItem('avatar')) { + if ( + localStorage.getItem('name') && + localStorage.getItem('avatar') && + !isEditing + ) { return null; } diff --git a/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx b/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx index 13a944413..aa5cb7152 100644 --- a/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx +++ b/frontend/src/components/OnboardingSteps/FolderSetupStep.tsx @@ -9,13 +9,13 @@ import { } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { FolderOpen, X, Folder } from 'lucide-react'; -import { useDispatch } from 'react-redux'; -import { AppDispatch } from '@/app/store'; +import { useDispatch, useSelector } from 'react-redux'; +import { AppDispatch, RootState } from '@/app/store'; import { markCompleted, previousStep } from '@/features/onboardingSlice'; import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures'; import { useFolder } from '@/hooks/useFolder'; import { useEffect, useState } from 'react'; - +import { setIsEditing } from '@/features/onboardingSlice'; interface FolderSetupStepProps { stepIndex: number; totalSteps: number; @@ -31,9 +31,12 @@ export function FolderSetupStep({ // Local state for folders const [folder, setFolder] = useState(''); + const isEditing = useSelector( + (state: RootState) => state.onboarding.isEditing, + ); useEffect(() => { - if (localStorage.getItem('folderChosen') === 'true') { + if (localStorage.getItem('folderChosen') === 'true' && !isEditing) { dispatch(markCompleted(stepIndex)); } }, []); @@ -60,10 +63,11 @@ export function FolderSetupStep({ }; const handleBack = () => { + dispatch(setIsEditing(true)); dispatch(previousStep()); }; - if (localStorage.getItem('folderChosen') === 'true') { + if (localStorage.getItem('folderChosen') === 'true' && !isEditing) { return null; } const progressPercent = Math.round( diff --git a/frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx b/frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx index c14108e01..fb8c0245a 100644 --- a/frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx +++ b/frontend/src/components/OnboardingSteps/ThemeSelectionStep.tsx @@ -18,6 +18,10 @@ import { Sun, Moon, Monitor } from 'lucide-react'; import { AppFeatures } from '@/components/OnboardingSteps/AppFeatures'; import { useTheme } from '@/contexts/ThemeContext'; + +import { setIsEditing } from '@/features/onboardingSlice'; +import { useSelector } from 'react-redux'; +import { RootState } from '@/app/store'; interface ThemeSelectionStepProps { stepIndex: number; totalSteps: number; @@ -30,10 +34,13 @@ export const ThemeSelectionStep: React.FC = ({ currentStepDisplayIndex, }) => { const { setTheme, theme } = useTheme(); + const isEditing = useSelector( + (state: RootState) => state.onboarding.isEditing, + ); const dispatch = useDispatch(); useEffect(() => { - if (localStorage.getItem('themeChosen')) { + if (localStorage.getItem('themeChosen') === 'true' && !isEditing) { dispatch(markCompleted(stepIndex)); } }, []); @@ -47,9 +54,10 @@ export const ThemeSelectionStep: React.FC = ({ }; const handleBack = () => { + dispatch(setIsEditing(true)); dispatch(previousStep()); }; - if (localStorage.getItem('themeChosen')) { + if (localStorage.getItem('themeChosen') === 'true' && !isEditing) { return null; } diff --git a/frontend/src/features/onboardingSlice.ts b/frontend/src/features/onboardingSlice.ts index 541fac94a..6749785c1 100644 --- a/frontend/src/features/onboardingSlice.ts +++ b/frontend/src/features/onboardingSlice.ts @@ -9,6 +9,7 @@ interface OnboardingState { stepStatus: boolean[]; avatar: string | null; name: string; + isEditing: boolean; } const initialState: OnboardingState = { @@ -17,6 +18,7 @@ const initialState: OnboardingState = { stepStatus: STEP_NAMES.map(() => false), avatar: localStorage.getItem('avatar'), name: localStorage.getItem('name') || '', + isEditing: false, }; const onboardingSlice = createSlice({ name: 'onboarding', @@ -28,6 +30,9 @@ const onboardingSlice = createSlice({ setName(state, action: PayloadAction) { state.name = action.payload; }, + setIsEditing(state, action: PayloadAction) { + state.isEditing = action.payload; + }, markCompleted(state, action: PayloadAction) { const stepIndex = action.payload; if (stepIndex >= 0 && stepIndex < state.stepStatus.length) { @@ -51,7 +56,7 @@ const onboardingSlice = createSlice({ }, }); -export const { setAvatar, setName, markCompleted, previousStep } = +export const { setAvatar, setName, setIsEditing, markCompleted, previousStep } = onboardingSlice.actions; export default onboardingSlice.reducer;