Fixed #931 Fix Out-of-Bounds Issue

[SURAJ-SHARMA27]

Description

I fixed an issue where the website would break and display a white screen when attempting to remove the last step from a tutorial that contains only two steps. I also resolved the error thrown in the browser's console.
The issue occurred when {currentStep} had a value that was out of bounds, and {stepsData} was either undefined or did not contain enough elements to support the access.
To fix this issue, I added conditional checks throughout the code to ensure that properties of stepsData and other related variables were accessed only when they existed and when {currentStep} was within a valid range.
I have improved the UI of the modal box that opens upon clicking "Remove Step." The UI is now more user-friendly, providing a better overall user experience.

Related Issue

resolved issue #931

Motivation and Context

The changes were required to address a critical bug that caused the website to break under certain conditions.

How Has This Been Tested?

I have tested it locally

Screenshots or GIF (In case of UI changes):

soln.mp4

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[SURAJ-SHARMA27]

@shivareddy6 could you review the PR and the related issue?

[shivareddy6]

Hey @SURAJ-SHARMA27, I tried out your solution, and it works! But I'm thinking, maybe we could handle the currentStep value before setting up stepsData. This way, we can avoid using conditional rendering everywhere it's used, and it might make things simpler for future contributors who may not notice the need for conditional rendering. What do you think?

For example, you can include setCurrentStep(prevStep => Math.min(steps.length-1, prevStep)); before setting stepsData

[shivareddy6]

Also I would suggest you to just make changes related to the issue #931 i.e., just resolve the error part and not change UI of remove modal.

[SURAJ-SHARMA27]

@shivareddy6 , could you please review the PR and the related issue? I have made changes based on the feedback. First, I synced the project. Then, I found the issue persisted with second last step, and I fixed that by avoiding conditional rendering at every place and using the following logic:

// Your code here
useEffect(() => {
// ...
}, [currentStep, stepsData]);

const isValidStep =
currentStep >= 0 && currentStep < (stepsData?.length || 0);
const validStepId = isValidStep
? stepsData && stepsData[currentStep]?.id
: null;

@shivareddy6 Could you please review both the issue #1030 and the pull request #1031 ?"

[rohitPandey469]

Hey @shivareddy6 ,
In the remove Step function of redux store which is updating the current_step_no passing the value of currentStep on func. call, for now it's getting updated without checking for stepsData.length
await setCurrentStepNo( current_step_no > 0 ? current_step_no - 1 : current_step_no )(dispatch);
And here as you told @SURAJ-SHARMA27 is making conditional check on the frontend currentStep and somewhere in the code its value getting updated with the effect hook activating on change in current_step_no ( present in the code - and it's keep getting updated by one on each removal ), so rather than doing this can do change in the actions func. or if using the currentStep then removing the unnecssary bits of extracting current_step_no from redux in sub components as we are using currentStep throughout the code. Should I go ahead with this?
Do told me If I am getting it wrong

[SURAJ-SHARMA27]

Hey @rohitPandey469 yes, we can address this issue at the action level by checking before dispatching the current step. However, an alternative approach is to handle it on the frontend where we receive the current step value. In my pull request #1031 , I've already resolved this issue by checking if the current step is beyond the array length. and it is working fine Here's the code snippet:

useEffect(() => {
    if (stepsData) {
        const ind = Math.min(stepsData.length - 1, currentStep);
        if (ind !== currentStep) {
            setCurrentStep(ind);
        }
    }
}, [currentStep, stepsData]);

const isValidStep = currentStep >= 0 && currentStep < (stepsData?.length || 0);
const validStepId = isValidStep ? (stepsData && stepsData[currentStep]?.id) : null;

This ensures that the current step is within the valid range and prevents it from exceeding the array length.