URL-based navigation for slides. #711
Conversation
| deckContextState.currentSlideElement === slideElementsLength | ||
| ) { | ||
| deckContextDispatch({ type: 'NEXT_SLIDE' }); | ||
| navigateToNextSlide(); |
There was a problem hiding this comment.
We want all slide navigation to go through the router otherwise the URL will become out of sync.
There was a problem hiding this comment.
Is there a way to prevent/scare off people from dispatching directly?
There was a problem hiding this comment.
Internally not really. But we're not exposing the dispatcher to the user.
| React.useEffect(() => { | ||
| /*** | ||
| * This will look at the current query string and navigate to whatever | ||
| * slide is specified, otherwise start at 0. This only runs once per mount |
There was a problem hiding this comment.
This effect will run again if navigateToCurrentUrl changes. If you want to guarantee it runs only on mount, you'll need to use an empty array for dependencies
There was a problem hiding this comment.
Yes, but the ESLint rule does require any used functions or variables to be inside the dependency array. So we have no choice but to include it. Since that function will not change, it has the same effect.
| function reducer(state, action) { | ||
| switch (action.type) { | ||
| case 'NEXT_SLIDE': | ||
| return { |
There was a problem hiding this comment.
I like how simple this code became!
| numberOfSlides - 1 < proposedSlideNumber | ||
| ) { | ||
| const qs = queryString.stringify({ slide: 0 }); | ||
| history.current.replace(`?${qs}`); |
There was a problem hiding this comment.
This updates the url directly?
There was a problem hiding this comment.
It replaces the invalid url in the history stack with a valid one. That way they can't "go back" to the invalid URL and then get stuck in re-direction limbo.
src/hooks/use-url-routing.js
Outdated
| }); | ||
| history.current.push(`?${qs}`); | ||
| }, | ||
| [currentSlide, presenterMode] |
There was a problem hiding this comment.
Should loop be included in the dep array?
Let the URL do the talking!
This keeps the URL in sync with the current slide. It also lets the user navigate to the correct slide on load as well. We use query params because it's specific (we will have additional ones for presenter mode) and it doesn't force a certain server to direct the routes. Meaning it works with webpack dev server out of the box.
The other benefit is each slide navigation change becomes a back/forward history stack within the browser.
If the user enters a slide index that doesn't exist or an invalid index we replace the current history stack item with 0 and pretend the invalid index never occurred.