[Feature] Get Step Number about use-wizard

[ezrafayet]

Hi, first of all thank you for your interest, and yes I'm totally open to PR ! I was going to start improving the wizard too because we use it in production and we also need a few other use cases.

You make me think of two things:

1. Go-forward feature

The history is implemented as a basic stack. The current step is the last item of the stack. When you go back it pops the last item out of the stack. If your purpose is to go forward after you went backward n times, we should probably create a new stack that would store the popped values. Then the forward() method would pop the last value from this second stack and add it to the history stack.
We should also have a method (that returns a boolean) to know if there is a "forward step" or not (it would just check if the second stack is empty or not), so we can display the button or not.

You can code it, be my guest !

2. Get current-step-number feature

You might want a getCurrentStepNumber() method ? A use case I see is that you can display information to the user about how 'long' it will take (like step 2 out of 5). To achieve that we can even implement a getWizardLength() method so your component can be created dynamically.

One question I have about it: how would it work with nested paths ?

• 1/ Would it just return the step-number of the first-level array ?
• 2/ Or do we just disable this feature for nested paths (and have it only for linear paths) ?

Considering nested paths can be of different length in the end we can't return a single unique number.

---

Sorry for the two different answers, I wasn't sure which one was described at first.

I wanted to rewrite the whole hook (with backward compatibility of course), feel free to join and brainstorm if you're interested. I wrote this a while back and I'm sure we can implement it better.

EDIT: Sorry for the many updates of this answer, hope it wasn't confusing ...

[amcdnl]

Given the complexity and that your in a middle of a refactor, I'll hold off on the refactor. I have a solution that works for me for now but wanted to raise as a improvement opportunity.

[ezrafayet]

Ok, I'll push the new version on next sunday with backward compatibility.

Both discussed features will be included, the code will also be a lot cleaner...

By the way, in the use case you posted, you can go forward by using the method nextStep( ), does it help ?

For the future don't hesitate to give feedback or do pull requests, we can do something usefull out of it !

[amcdnl]

I actually didn't end up using the next step because the hierarchy stuff was a bit confusing and I needed that and had a short amount of time to do it. did something like this:

  const paths = [
    'welcome',
    'legal',
    'data',
    'terms',
    'org',
    'finish'
  ];
  const [step, wizard] = useWizard(paths);

then later on:

                  onClick={() => wizard.goToStep(hasOrg ? 'finish' : 'org')}

[ezrafayet]

Ok great, thanks for the feedback, I see what you mean now. I'll try to post an example where you can handle step jumps by using useEffect inside components (I call it the 'fall-through' strategy, it is pretty effective in more complex scenarios so you don't have to check what redirection is on every button all of the time).

[ezrafayet]

v4.0.0 is out.

Basically:

• You have a method called forwardStep(). It allows you to move forward (see notes bellow).
• You have a method called nForwardSteps(). It returns the number of forward steps you can do. It will mostly be useful to disable or hide the "forward" button when it returns 0.
• You have a method called nPreviousSteps(). It returns the number of steps you can move back.
• You have stepIndex() that gives you the index of the current step and wizardLength() that gives you the length of your wizard. It will help you show the user a progression bar of some sort.

Notes on forwardStep():

• If you didn't use previousStep() before it will not do anything. You need to go back in history in order to go forward
  (use nextStep() if you just want to go to the next step in the path).
• If you use previousStep() then rewrite a new path with goToStep() or nextStep(), the forward steps will be emptied to avoid weird behaviour. (user is basically going back then changing the path).

Don't hesitate to share your feedback, open an issue or PR of course