URL-based navigation for slides. (#711)

carloskelly13 · web-flow · commit 067bb9fabcde · 2019-08-28T11:16:32.000-05:00
* URL-based navigation for slides.

* Added support for presenterMode

* Add back in support for looping.

* Fixed missing hooks dep
diff --git a/package.json b/package.json
@@ -69,8 +69,10 @@
     "@mdx-js/react": "^1.1.5",
     "@mdx-js/tag": "^0.20.3",
     "gray-matter": "^4.0.2",
+    "history": "^4.9.0",
     "loader-utils": "^1.2.3",
     "normalize-newline": "^3.0.0",
+    "query-string": "^6.8.2",
     "react-spring": "^8.0.25",
     "styled-components": "^4.3.1",
     "wonka": "^3.2.0"
diff --git a/src/components/deck.js b/src/components/deck.js
@@ -8,6 +8,7 @@ import {
   TransitionPipeContext,
   TransitionPipeProvider
 } from '../hooks/use-transition-pipe';
+import useUrlRouting from '../hooks/use-url-routing';
 
 /**
  * Provides top level state/context provider with useDeck hook
@@ -27,7 +28,8 @@ const initialState = {
   immediate: false,
   immediateElement: false,
   currentSlideElement: 0,
-  reverseDirection: false
+  reverseDirection: false,
+  presenterMode: false
 };
 
 const defaultSlideEffect = {
@@ -80,10 +82,33 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
     rest.animationsWhenGoingBack,
     slideElementMap
   );
+
+  const {
+    navigateToNextSlide,
+    navigateToPreviousSlide,
+    navigateToCurrentUrl
+  } = useUrlRouting({
+    dispatch,
+    currentSlide: state.currentSlide,
+    currentSlideElement: state.currentSlideElement,
+    presenterMode: state.presenterMode,
+    slideElementMap,
+    loop
+  });
+
   const userTransitionEffect =
     filteredChildren[state.currentSlide].props.transitionEffect || {};
   const transitionRef = React.useRef(null);
 
+  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
+     * of Deck, which should be the entire lifecyle of the slideshow.
+     */
+    navigateToCurrentUrl();
+  }, [navigateToCurrentUrl]);
+
   React.useEffect(() => {
     if (!transitionRef.current) {
       return;
@@ -125,7 +150,9 @@ const Deck = ({ children, loop, keyboardControls, ...rest }) => {
           numberOfSlides: slides.length,
           keyboardControls,
           animationsWhenGoingBack: rest.animationsWhenGoingBack,
-          slideElementMap
+          slideElementMap,
+          navigateToNextSlide,
+          navigateToPreviousSlide
         }}
       >
         {slides}
diff --git a/src/hooks/use-deck.js b/src/hooks/use-deck.js
@@ -17,53 +17,36 @@ function useDeck(
   function reducer(state, action) {
     switch (action.type) {
       case 'NEXT_SLIDE':
+        return {
+          ...state,
+          currentSlide: state.currentSlide + 1,
+          currentSlideElement: 0,
+          immediate: false,
+          immediateElement: false,
+          reverseDirection: false
+        };
       case 'NEXT_SLIDE_IMMEDIATE':
-        // If next slide is going to be greater than number
-        // of slides, if it is looping then go to initial state
-        // if not then stop
-        if (state.currentSlide + 1 === numSlides) {
-          if (looping) {
-            return action.type === 'NEXT_SLIDE_IMMEDIATE'
-              ? {
-                  ...initialState,
-                  immediate: true,
-                  reverseDirection: false,
-                  immediateElement: false
-                }
-              : initialState;
-          }
-          return { ...state };
-        }
-        return action.type === 'NEXT_SLIDE_IMMEDIATE'
-          ? {
-              currentSlide: state.currentSlide + 1,
-              immediate: true,
-              currentSlideElement: 0,
-              immediateElement: false,
-              reverseDirection: false
-            }
-          : {
-              currentSlide: state.currentSlide + 1,
-              currentSlideElement: 0,
-              immediate: false,
-              immediateElement: false,
-              reverseDirection: false
-            };
+        return {
+          ...state,
+          currentSlide: state.currentSlide + 1,
+          immediate: true,
+          currentSlideElement: 0,
+          immediateElement: false,
+          reverseDirection: false
+        };
+      case 'GO_TO_SLIDE': {
+        return {
+          ...state,
+          currentSlideElement: 0,
+          currentSlide: action.payload.slideNumber,
+          immediate: action.payload.immediate,
+          immediateElement: false,
+          reverseDirection: action.payload.reverseDirection
+        };
+      }
       case 'PREV_SLIDE':
-        // If current slide is initial slide then if looping go
-        // to last slide else stop
-        if (state.currentSlide === initialState.currentSlide) {
-          if (looping) {
-            return {
-              currentSlide: numSlides - 1,
-              currentSlideElement: Math.max(slideElementMap[numSlides - 1], 0),
-              immediate: !!animationsWhenGoingBack,
-              reverseDirection: true
-            };
-          }
-          return { ...state };
-        }
         return {
+          ...state,
           currentSlide: state.currentSlide - 1,
           currentSlideElement: Math.max(
             slideElementMap[state.currentSlide - 1],
@@ -73,37 +56,39 @@ function useDeck(
           immediateElement: true,
           reverseDirection: true
         };
-      case 'NEXT_SLIDE_ELEMENT': {
+      case 'NEXT_SLIDE_ELEMENT':
         return {
           ...state,
           currentSlideElement: state.currentSlideElement + 1,
           immediateElement: false,
           reverseDirection: false
         };
-      }
-      case 'NEXT_SLIDE_ELEMENT_IMMEDIATE': {
+      case 'NEXT_SLIDE_ELEMENT_IMMEDIATE':
         return {
           ...state,
           currentSlideElement: state.currentSlideElement + 1,
           immediateElement: true,
           reverseDirection: false
         };
-      }
-      case 'PREV_SLIDE_ELEMENT': {
+      case 'PREV_SLIDE_ELEMENT':
         return {
           ...state,
           currentSlideElement: Math.max(state.currentSlideElement - 1, 0),
           immediateElement: false,
           reverseDirection: true
         };
-      }
-      case 'PREV_SLIDE_ELEMENT_IMMEDIATE': {
+      case 'PREV_SLIDE_ELEMENT_IMMEDIATE':
         return {
           ...state,
           currentSlideElement: Math.max(state.currentSlideElement - 1, 0),
           immediateElement: true,
           reverseDirection: true
         };
+      case 'SET_PRESENTER_MODE': {
+        return {
+          ...state,
+          presenterMode: action.payload.presenterMode
+        };
       }
       default:
         return { ...state };
diff --git a/src/hooks/use-slide.js b/src/hooks/use-slide.js
@@ -27,7 +27,9 @@ function useSlide(
   const {
     state: deckContextState,
     dispatch: deckContextDispatch,
-    animationsWhenGoingBack
+    animationsWhenGoingBack,
+    navigateToNextSlide,
+    navigateToPreviousSlide
   } = React.useContext(DeckContext);
 
   const isActiveSlide = deckContextState.currentSlide === slideNum;
@@ -37,13 +39,14 @@ function useSlide(
       slideElementsLength === 0 ||
       deckContextState.currentSlideElement === slideElementsLength
     ) {
-      deckContextDispatch({ type: 'NEXT_SLIDE' });
+      navigateToNextSlide();
     } else {
       deckContextDispatch({ type: 'NEXT_SLIDE_ELEMENT' });
     }
   }, [
     deckContextDispatch,
     deckContextState.currentSlideElement,
+    navigateToNextSlide,
     slideElementsLength
   ]);
 
@@ -52,23 +55,33 @@ function useSlide(
       slideElementsLength === 0 ||
       deckContextState.currentSlideElement === slideElementsLength
     ) {
-      deckContextDispatch({ type: 'NEXT_SLIDE_IMMEDIATE' });
+      navigateToNextSlide({ immediate: true });
     } else {
       deckContextDispatch({ type: 'NEXT_SLIDE_ELEMENT_IMMEDIATE' });
     }
-  }, [deckContextDispatch, deckContextState, slideElementsLength]);
+  }, [
+    deckContextDispatch,
+    deckContextState.currentSlideElement,
+    navigateToNextSlide,
+    slideElementsLength
+  ]);
 
   const goToPreviousSlideElement = React.useCallback(() => {
     if (deckContextState.currentSlideElement === 0) {
-      deckContextDispatch({ type: 'PREV_SLIDE' });
+      navigateToPreviousSlide();
     } else {
       if (!animationsWhenGoingBack) {
         deckContextDispatch({ type: 'PREV_SLIDE_ELEMENT_IMMEDIATE' });
         return;
       }
       deckContextDispatch({ type: 'PREV_SLIDE_ELEMENT' });
     }
-  }, [animationsWhenGoingBack, deckContextDispatch, deckContextState]);
+  }, [
+    animationsWhenGoingBack,
+    deckContextDispatch,
+    deckContextState.currentSlideElement,
+    navigateToPreviousSlide
+  ]);
 
   const keyPressCount = React.useRef(0);
 
diff --git a/src/hooks/use-url-routing.js b/src/hooks/use-url-routing.js
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { createBrowserHistory } from 'history';
+import * as queryString from 'query-string';
+
+export default function useUrlRouting(options) {
+  const {
+    dispatch,
+    slideElementMap,
+    currentSlide,
+    presenterMode,
+    loop
+  } = options;
+  const history = React.useRef(createBrowserHistory());
+  const numberOfSlides = React.useMemo(
+    () => Object.getOwnPropertyNames(slideElementMap).length,
+    [slideElementMap]
+  );
+
+  const onHistoryChange = React.useCallback(() => {
+    const query = queryString.parse(window.location.search);
+    const proposedSlideNumber = parseInt(query.slide, 10);
+    const presenterMode = Boolean(query.presenterMode);
+
+    /**
+     * If the proposed URL slide index is out-of-bounds or is not a valid
+     * integer, navigate to the first slide. Do nothing if the proposed slide
+     * number is the same as the current slide.
+     */
+    if (
+      isNaN(proposedSlideNumber) ||
+      numberOfSlides - 1 < proposedSlideNumber
+    ) {
+      const qs = queryString.stringify({ slide: 0 });
+      history.current.replace(`?${qs}`);
+      return;
+    }
+    if (proposedSlideNumber === currentSlide) {
+      dispatch({ type: 'SET_PRESENTER_MODE', payload: { presenterMode } });
+      return;
+    }
+    const reverseDirection = proposedSlideNumber < currentSlide;
+    dispatch({
+      type: 'GO_TO_SLIDE',
+      payload: {
+        slideNumber: proposedSlideNumber,
+        reverseDirection,
+        immediate: Boolean(query.immediate),
+        presenterMode
+      }
+    });
+  }, [dispatch, numberOfSlides, currentSlide]);
+
+  const navigateToNextSlide = React.useCallback(
+    ({ immediate } = {}) => {
+      let nextSafeSlideIndex;
+      if (currentSlide + 1 > numberOfSlides - 1 && loop) {
+        nextSafeSlideIndex = 0;
+      } else {
+        nextSafeSlideIndex = Math.min(currentSlide + 1, numberOfSlides - 1);
+      }
+      const qs = queryString.stringify({
+        slide: nextSafeSlideIndex,
+        immediate: immediate || undefined,
+        presenterMode: presenterMode || undefined
+      });
+      history.current.push(`?${qs}`);
+    },
+    [currentSlide, loop, numberOfSlides, presenterMode]
+  );
+
+  const navigateToPreviousSlide = React.useCallback(
+    ({ immediate } = {}) => {
+      let previousSafeSlideIndex;
+      if (currentSlide - 1 < 0 && loop) {
+        previousSafeSlideIndex = numberOfSlides - 1;
+      } else {
+        previousSafeSlideIndex = Math.max(0, currentSlide - 1);
+      }
+      const qs = queryString.stringify({
+        slide: previousSafeSlideIndex,
+        immediate: immediate || undefined,
+        presenterMode: presenterMode || undefined
+      });
+      history.current.push(`?${qs}`);
+    },
+    [currentSlide, loop, numberOfSlides, presenterMode]
+  );
+
+  React.useEffect(() => {
+    const removeHistoryListener = history.current.listen(onHistoryChange);
+    return () => {
+      removeHistoryListener();
+    };
+  }, [onHistoryChange]);
+
+  return {
+    navigateToNextSlide,
+    navigateToPreviousSlide,
+    navigateToCurrentUrl: onHistoryChange
+  };
+}
