feat(showcase-mode): add selected stories to url

ubilabs · Nov 21, 2019 · 449a75a · 449a75a
1 parent d3b6602
commit 449a75a
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 23 deletions.
diff --git a/src/scripts/components/app/app.tsx b/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>
 
@@ -94,7 +94,7 @@ const TranslatedApp: FunctionComponent = () => {
             <Route path={'/present/:storyId/:page'}>
               <Story mode={StoryMode.Present} />
             </Route>
-            <Route path={'/showcase/:storyId/:page'}>
+            <Route path={'/showcase/:storyIds/:storyNumber/:pageNumber'}>
               <Story mode={StoryMode.Showcase} />
             </Route>
           </div>

diff --git a/src/scripts/components/showcase-selector/showcase-selector.tsx b/src/scripts/components/showcase-selector/showcase-selector.tsx
@@ -1,5 +1,5 @@
-import React, {FunctionComponent} from 'react';
-import {Link} from 'react-router-dom';
+import React, {FunctionComponent, useState} from 'react';
+import {Link, useHistory} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
 
 import StoryList from '../story-list/story-list';
@@ -8,16 +8,39 @@ import {StoryMode} from '../../types/story-mode';
 
 import styles from './showcase-selector.styl';
 
-const ShowcaseSelector: FunctionComponent = () => (
-  <div className={styles.showcaseSelector}>
-    <Link to="/" className={styles.backButton}>
-      <FormattedMessage id="goBack" />
-    </Link>
-    <h1 className={styles.title}>
-      <FormattedMessage id="showcaseMode" />
-    </h1>
-    <StoryList mode={StoryMode.Showcase} />
-  </div>
-);
+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 (
+    <div className={styles.showcaseSelector}>
+      <Link to="/" className={styles.backButton}>
+        <FormattedMessage id="goBack" />
+      </Link>
+      <h1 className={styles.title}>
+        <FormattedMessage id="showcaseMode" />
+      </h1>
+      <StoryList
+        mode={StoryMode.Showcase}
+        onSelectStory={id => onSelectStory(id)}
+      />
+    </div>
+  );
+};
 
 export default ShowcaseSelector;
diff --git a/src/scripts/components/story-list-item/story-list-item.tsx b/src/scripts/components/story-list-item/story-list-item.tsx
@@ -10,22 +10,51 @@ import styles from './story-list-item.styl';
 interface Props {
   story: StoryListItemType;
   mode: StoryMode;
+  onSelectStory: (id: string) => void;
 }
 
-const StoryListItem: FunctionComponent<Props> = ({story, mode}) => {
+const StoryListItemContent: FunctionComponent<Props> = ({
+  mode,
+  story,
+  onSelectStory
+}) => {
   const classes = cx(
     styles.storyItem,
     mode === StoryMode.Present && styles.present
   );
 
   return (
+    <div
+      className={classes}
+      onClick={() => mode === StoryMode.Showcase && onSelectStory(story.id)}>
+      <img src={story.image} className={styles.image} />
+      <p className={styles.title}>{story.title}</p>
+      <p className={styles.description}>{story.description}</p>
+    </div>
+  );
+};
+
+const StoryListItem: FunctionComponent<Props> = ({
+  story,
+  mode,
+  onSelectStory
+}) => {
+  const isShowcaseMode = mode === StoryMode.Showcase;
+
+  return !isShowcaseMode ? (
     <Link to={`/${mode}/${story.id}`}>
-      <div className={classes}>
-        <img src={story.image} className={styles.image} />
-        <p className={styles.title}>{story.title}</p>
-        <p className={styles.description}>{story.description}</p>
-      </div>
+      <StoryListItemContent
+        mode={mode}
+        story={story}
+        onSelectStory={id => onSelectStory(id)}
+      />
     </Link>
+  ) : (
+    <StoryListItemContent
+      mode={mode}
+      story={story}
+      onSelectStory={id => onSelectStory(id)}
+    />
   );
 };
 

diff --git a/src/scripts/components/story-list/story-list.tsx b/src/scripts/components/story-list/story-list.tsx
@@ -11,9 +11,13 @@ import styles from './story-list.styl';
 
 interface Props {
   mode: StoryMode;
+  onSelectStory?: (id: string) => void;
 }
 
-const StoryList: FunctionComponent<Props> = ({mode}) => {
+const StoryList: FunctionComponent<Props> = ({
+  mode,
+  onSelectStory = () => {}
+}) => {
   const stories = useSelector(storyListSelector);
 
   const classes = cx(
@@ -24,7 +28,12 @@ const StoryList: FunctionComponent<Props> = ({mode}) => {
   return (
     <div className={classes}>
       {stories.map(story => (
-        <StoryListItem key={story.id} story={story} mode={mode} />
+        <StoryListItem
+          key={story.id}
+          story={story}
+          mode={mode}
+          onSelectStory={id => onSelectStory(id)}
+        />
       ))}
     </div>
   );