restart tour

[jovstern]

Hi man, i was wondering if theirs a clean way to restart the tour when the user finish all the steps? In our case, we have a button that the user can always come back to the tour and as you know it's start from the step that the user quit and thats fine but, when he got to the final step and he finish or quit, if want to run the tour again, he start from the final step and that's kind of radicals so, what we want is after the last step, restart the tour to the first step.

I used the startAt params and it's working but i got a warning from react (###

forceUpdate(...): Cannot update during an existing state transition (such as within render...

) and i kind a think that's a nasty solution.

my code:

resetTour = () => {
        let {tourStore} = this.props;
        return tourStore.currentStep === this.steps.length ? 0 : undefined
 };

<Tour startAt={this.resetTour()}

[elrumordelaluz]

Hi @jovstern I can't reproduce the React warning. Setting startAt={0} doesn't work for you?

Here is my example where every time the user exit the Tour, restart from the first step (keep in mind that is Array like the startAt number, so 0 is the first one.

[jovstern]

Hi, It's working but, i think because i run a function every time it's render (to check the final step) the console show that warning.

[elrumordelaluz]

@jovstern could you share a little bit more code to fully understand where compares the warning and also read the full stack. Now you could play/edit the demo in codesandbox

[jovstern]

Unfortunately my code is irrelevant (except the part ill already share) because i work with Mobx states to trigger my tour widget so, Ill try to explain: my tourStore.currentStep is variable that store the current step. In the Tour component in the StartAt attr ill check if tourStore.currentStep equal to my steps.length, if it does i restart the steps, meaning i point my startAt to the first step. i'm locking for a cleaner way to restart the steps of the tour when it got to the end and the user want to tour again. hope i was clear enough :)

[elrumordelaluz]

So, let me know if I understand well. You are firing actions or at least storing the current stepof the Tour not only internally but in an external store (Mobx). It's interesting in your use-case, since you are interacting with an external state managment and could compare lot of stuff to improve in reactour.

Anyway, I am curious, in case you manage the currentStep outside the Tour why and if you tried using the internal state. in case you want we could chat a little more

[jovstern]

You got it right, the reason i work with the Mobx state and not the internal state of the widget it's because i need that some widget in my global app will know about the current state. Everything work fine but i just don't like the way i "restart the app", maybe after it will be in production (2-3 weeks) i'll send you a link and we can discuss more.

[elrumordelaluz]

Sure @jovstern please let me know and will continue analysing these points. In the meantime I'm thinking in options to control the state outside and same for restart.

[elrumordelaluz]

Closing but please feel free to re-open in any case.

[leokeithvillareal]

@elrumordelaluz hi may i ask you about steps tour when i reload the page the tour pop up from left top corner instead of pop up to where i put the selector. good example from reactour demo when you reaload the page then click the "try it" button the tour popup from left top corner before proceed to their right position and if you didn't reload the page the tour popup to their right position. how can i resolved this when i reload the page i want is the tour popup to the right position not from the left top position before go their?

[elrumordelaluz]

@woodybooy what version of Reactour are you using?