feat(story-title): add story title (#175)

* feat(story): add pagination

* fix(icons): rename files

* refactor(pagination): move pagination to own component

* refactor(pagination): remove comment

* feat(story): add story title

* refactor(story-title): change variable name

src/scripts/components/app/app.styl

@@ -15,6 +15,9 @@
   height: 100%
   pointer-events: none
 
+  & > *
+    pointer-events: auto
+
 .story
   display: flex
   flex-direction: row
@@ -29,9 +32,10 @@
   align-items: flex-end
   width: 100%
   height: 100%
+  pointer-events: none
 
-.nav > *
-  pointer-events: auto
+  & > *
+    pointer-events: auto
 
 .timeslider
   flex-grow: 1

src/scripts/components/app/app.tsx

@@ -20,6 +20,7 @@ import Story from '../story/story';
 import UrlSync from '../url-sync/url-sync';
 import LayerLoader from '../layer-loader/layer-loader';
 import TimeSlider from '../time-slider/time-slider';
+import Init from '../init/init';
 
 import translations from '../../i18n';
 import styles from './app.styl';
@@ -88,6 +89,7 @@ const TranslatedApp: FunctionComponent = () => {
 
       <UrlSync />
       <LayerLoader />
+      <Init />
     </Router>
   );
 };

src/scripts/components/init/init.tsx

@@ -0,0 +1,15 @@
+import {FunctionComponent, useEffect} from 'react';
+import {useDispatch} from 'react-redux';
+import fetchStories from '../../actions/fetch-stories';
+
+const Init: FunctionComponent = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchStories());
+  }, [dispatch]);
+
+  return null;
+};
+
+export default Init;

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

@@ -1,19 +1,13 @@
-import React, {FunctionComponent, useEffect} from 'react';
-import {useSelector, useDispatch} from 'react-redux';
+import React, {FunctionComponent} from 'react';
+import {useSelector} from 'react-redux';
 
 import {storiesSelector} from '../../reducers/stories';
-import fetchStories from '../../actions/fetch-stories';
 import StoryListItem from '../story-list-item/story-list-item';
 
 import styles from './story-list.styl';
 
 const StoryList: FunctionComponent = () => {
   const stories = useSelector(storiesSelector);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(fetchStories());
-  }, [dispatch]);
 
   return (
     <div className={styles.storyList}>

src/scripts/components/story/story.styl

@@ -4,11 +4,27 @@
   width: 50%
   height: 100%
 
+.header
+  position: absolute
+  left: 0
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  width: 67%
+
+.backButton
+  display: block
+  padding: 20px 0 0 20px
+  color: #fff
+
+.storyTitle
+  padding-right: 20px
+  color: #fff
+
 .sidepanel
   position: relative
   height: 100%
   background-color: #fff
-  pointer-events: auto
 
 .previewImage
   width: 100%
@@ -18,11 +34,3 @@
 
 .content
   padding: 10px
-
-.backButton
-  position: absolute
-  left: 0
-  display: block
-  padding: 20px 0 0 20px
-  color: #fff
-  pointer-events: auto

src/scripts/components/story/story.tsx

@@ -6,6 +6,7 @@ import {FormattedMessage} from 'react-intl';
 import StoryPagination from '../story-pagination/story-pagination';
 import fetchStory from '../../actions/fetch-story';
 import {storySelector} from '../../reducers/story';
+import {storiesSelector} from '../../reducers/stories';
 
 import styles from './story.styl';
 
@@ -16,6 +17,8 @@ const Story: FunctionComponent = () => {
   const pageNumber = parseInt(page || '0', 10);
   const slide = story && story.slides[pageNumber];
   const activeStoryId = story && story.id;
+  const stories = useSelector(storiesSelector);
+  const storyListItem = stories.find(storyItem => storyItem.id === storyId);
 
   useEffect(() => {
     storyId && dispatch(fetchStory(storyId));
@@ -33,9 +36,14 @@ const Story: FunctionComponent = () => {
 
   return (
     <div className={styles.story}>
-      <Link to="/stories" className={styles.backButton}>
-        <FormattedMessage id="goBack" />
-      </Link>
+      <div className={styles.header}>
+        <Link to="/stories" className={styles.backButton}>
+          <FormattedMessage id="goBack" />
+        </Link>
+        <h2 className={styles.storyTitle}>
+          {storyListItem && storyListItem.title}
+        </h2>
+      </div>
       {slide && (
         <div className={styles.sidepanel} key={slide.title}>
           <img src={slide.image} className={styles.previewImage} />