Fix the broken back button on onboarding page.

Author: ritigya03

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<AvatarNameSelectionStepProps> = ({
 }) => {
   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<AvatarNameSelectionStepProps> = ({
     dispatch(markCompleted(stepIndex));
   };
 
-  if (localStorage.getItem('name') && localStorage.getItem('avatar')) {
+  if (
+    localStorage.getItem('name') &&
+    localStorage.getItem('avatar') &&
+    !isEditing
+  ) {
     return null;
   }
 

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<string>('');
+  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(

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<ThemeSelectionStepProps> = ({
   currentStepDisplayIndex,
 }) => {
   const { setTheme, theme } = useTheme();
+  const isEditing = useSelector(
+    (state: RootState) => state.onboarding.isEditing,
+  );
   const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
-    if (localStorage.getItem('themeChosen')) {
+    if (localStorage.getItem('themeChosen') === 'true' && !isEditing) {
       dispatch(markCompleted(stepIndex));
     }
   }, []);
@@ -47,9 +54,10 @@ export const ThemeSelectionStep: React.FC<ThemeSelectionStepProps> = ({
   };
 
   const handleBack = () => {
+    dispatch(setIsEditing(true));
     dispatch(previousStep());
   };
-  if (localStorage.getItem('themeChosen')) {
+  if (localStorage.getItem('themeChosen') === 'true' && !isEditing) {
     return null;
   }
 

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<string>) {
       state.name = action.payload;
     },
+    setIsEditing(state, action: PayloadAction<boolean>) {
+      state.isEditing = action.payload;
+    },
     markCompleted(state, action: PayloadAction<number>) {
       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;