feat(showcase): add story state to url

src/scripts/components/app/app.tsx

@@ -75,11 +75,7 @@ const TranslatedApp: FunctionComponent = () => {
               </Route>
 
               <Route
-                path={[
-                  '/present/:storyId',
-                  '/showcase/:storyId',
-                  '/stories/:storyId'
-                ]}
+                path={['/present/:storyId', '/stories/:storyId']}
                 render={props => (
                   <Redirect to={`${props.match.url}/0`} />
                 )}></Route>
@@ -94,7 +90,7 @@ const TranslatedApp: FunctionComponent = () => {
             <Route path={'/present/:storyId/:page'}>
               <Story mode={StoryMode.Present} />
             </Route>
-            <Route path={'/showcase/:storyIds/:storyNumber/:pageNumber'}>
+            <Route path={'/showcase/:storyIds/:storyNumber/:page'}>
               <Story mode={StoryMode.Showcase} />
             </Route>
           </div>

src/scripts/components/showcase-selector/showcase-selector.tsx

@@ -1,5 +1,5 @@
 import React, {FunctionComponent, useState} from 'react';
-import {Link, useHistory} from 'react-router-dom';
+import {Link} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
 import {PlayIcon} from '../icons/play-icon';
 
@@ -10,22 +10,14 @@ import {StoryMode} from '../../types/story-mode';
 import styles from './showcase-selector.styl';
 
 const ShowcaseSelector: FunctionComponent = () => {
-  const history = useHistory();
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
-  const setUrl = (newIds: string[]) => {
-    const urlIds = newIds.join('&');
-    const newPath = `/showcase/${urlIds}`;
-    history.push(newPath);
-  };
-
   const onSelectStory = (id: string) => {
     const isInList = selectedIds.includes(id);
     const newIds = isInList
       ? selectedIds.filter(selectedId => selectedId !== id)
       : selectedIds.concat(id);
     setSelectedIds(newIds);
-    setUrl(newIds);
   };
 
   return (
@@ -39,7 +31,9 @@ const ShowcaseSelector: FunctionComponent = () => {
         </h1>
         <div className={styles.play}>
           <span>{selectedIds.length} stories selected</span>
-          <PlayIcon />
+          <Link to={`/showcase/${selectedIds.join('&')}/0/0`}>
+            <PlayIcon />
+          </Link>
         </div>
       </div>
       <StoryList

src/scripts/components/story/story.tsx

@@ -20,8 +20,23 @@ interface Props {
   mode: StoryMode;
 }
 
+// eslint-disable-next-line
 const Story: FunctionComponent<Props> = ({mode}) => {
-  const {storyId, page} = useParams();
+  const {
+    storyIds: storyIdsString,
+    storyNumber,
+    storyId: storyModeStoryId,
+    page
+  } = useParams();
+  let storyId: string | null = null;
+
+  if (mode === StoryMode.Showcase) {
+    const storyIds = storyIdsString?.split('&');
+    const storyIndex = parseInt(storyNumber || '0', 10);
+    storyId = (storyIds && storyIds[storyIndex || 0]) || null;
+  } else {
+    storyId = storyModeStoryId || null;
+  }
   const story = useSelector((state: State) =>
     selectedStorySelector(state, storyId)
   );

src/scripts/selectors/story/selected.ts

@@ -8,7 +8,7 @@ export function unsafeSelectedStorySelector(state: State): Story | null {
 
 export function selectedStorySelector(
   state: State,
-  storyId?: string
+  storyId: string | null
 ): Story | null {
   if (!state.stories.selected || !storyId) {
     return null;