feat(showcase-mode): add path for back button

src/scripts/components/app/app.tsx

@@ -66,7 +66,7 @@ const TranslatedApp: FunctionComponent = () => {
                 <PresentationSelector />
               </Route>
 
-              <Route path={['/showcase']} exact>
+              <Route path={['/showcase/:storyIds', '/showcase/']} exact>
                 <ShowcaseSelector />
               </Route>
 

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

@@ -1,5 +1,5 @@
-import React, {FunctionComponent, useState} from 'react';
-import {Link} from 'react-router-dom';
+import React, {FunctionComponent} from 'react';
+import {Link, useHistory, useParams} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
 import {PlayIcon} from '../icons/play-icon';
 
@@ -10,14 +10,20 @@ import {StoryMode} from '../../types/story-mode';
 import styles from './showcase-selector.styl';
 
 const ShowcaseSelector: FunctionComponent = () => {
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const params = useParams<{storyIds?: string}>();
+  const history = useHistory();
+  const storyIds = params.storyIds?.split('&');
+  const selectedIds = storyIds || [];
 
   const onSelectStory = (id: string) => {
     const isInList = selectedIds.includes(id);
     const newIds = isInList
       ? selectedIds.filter(selectedId => selectedId !== id)
       : selectedIds.concat(id);
-    setSelectedIds(newIds);
+
+    const newIdsString = newIds.join('&');
+
+    history.replace(`/showcase/${newIdsString}`);
   };
 
   return (

src/scripts/components/story-header/story-header.tsx

@@ -9,11 +9,12 @@ import {StoryMode} from '../../types/story-mode';
 import styles from './story-header.styl';
 
 interface Props {
+  storyIds?: string;
   mode: StoryMode;
   story: StoryListItem;
 }
 
-const StoryHeader: FunctionComponent<Props> = ({story, mode}) => {
+const StoryHeader: FunctionComponent<Props> = ({storyIds, story, mode}) => {
   const Present = mode === StoryMode.Present;
   const Showcase = mode === StoryMode.Showcase;
 
@@ -23,9 +24,11 @@ const StoryHeader: FunctionComponent<Props> = ({story, mode}) => {
     Showcase && styles.showcase
   );
 
+  const newPath = storyIds ? `/showcase/${storyIds}` : `/${mode}`;
+
   return (
     <div className={storyClasses}>
-      <Link to={`/${mode}`} className={styles.backButton}>
+      <Link to={newPath} className={styles.backButton}>
         <FormattedMessage id="goBack" />
       </Link>
       <div>

src/scripts/components/story/story.tsx

@@ -67,7 +67,13 @@ const Story: FunctionComponent<Props> = ({mode}) => {
 
   return (
     <div className={styles.story}>
-      {storyListItem && <StoryHeader story={storyListItem} mode={mode} />}
+      {storyListItem && (
+        <StoryHeader
+          story={storyListItem}
+          mode={mode}
+          storyIds={storyIdsString}
+        />
+      )}
 
       {/* Instead of rendering only the currect slide we map over all slides to
         enforce a newly mounted component when the pageNumber changes */}