Merge pull request #1346 from ubilabs/feat/adapt-story

Feat/adapt story

src/scripts/actions/fetch-story.ts

@@ -5,6 +5,7 @@ import {languageSelector} from '../selectors/language';
 import {State} from '../reducers/index';
 
 import {LegacyStory} from '../types/legacy-story';
+import {Story} from '../types/story';
 
 export const FETCH_STORY_SUCCESS = 'FETCH_STORY_SUCCESS';
 export const FETCH_STORY_ERROR = 'FETCH_STORY_ERROR';
@@ -13,7 +14,7 @@ interface FetchStorySuccessAction {
   type: typeof FETCH_STORY_SUCCESS;
   id: string;
   language: string;
-  story: LegacyStory;
+  story: LegacyStory | Story;
 }
 
 interface FetchStoryErrorAction {
@@ -50,17 +51,15 @@ function fetchStoryErrorAction(
   };
 }
 
-const fetchStory = (id: string) => (
-  dispatch: Dispatch,
-  getState: () => State
-) => {
-  const language = languageSelector(getState());
+const fetchStory =
+  (id: string) => (dispatch: Dispatch, getState: () => State) => {
+    const language = languageSelector(getState());
 
-  return fetchStoryApi(id, language)
-    .then(story => dispatch(fetchStorySuccessAction(id, language, story)))
-    .catch(error =>
-      dispatch(fetchStoryErrorAction(id, language, error.message))
-    );
-};
+    return fetchStoryApi(id, language)
+      .then(story => dispatch(fetchStorySuccessAction(id, language, story)))
+      .catch(error =>
+        dispatch(fetchStoryErrorAction(id, language, error.message))
+      );
+  };
 
 export default fetchStory;

src/scripts/components/stories/story/story.tsx

@@ -76,7 +76,7 @@ const Story: FunctionComponent = () => {
   const getRightSideComponent = (slide: Slide, story: StoryType) => {
     if (slide.galleryItems) {
       return (
-        <StoryGallery mode={mode} storyId={story.id}>
+        <StoryGallery mode={mode} storyId={story.id} key={story.id}>
           {slide.galleryItems.map(item => {
             switch (item.type) {
               case GalleryItemType.Image:

src/scripts/libs/is-legacy-story.ts

@@ -0,0 +1,22 @@
+import {LegacyStory} from '../types/legacy-story';
+import {Story} from '../types/story';
+
+/**
+ * Checks if a given story is a legacy story.
+ * Background: Currently, we have stories that adhere to the "legacy" structure of a story
+ * as well as stories with the updated structure to support mixed content
+ * @param story - The story to check.
+ * @returns True if the story is a legacy story, false otherwise.
+ *
+ */
+export const isLegacyStory = (story: LegacyStory | Story): boolean => {
+  // If a story slide contains the property "galleryItems", we infer that is a new story
+  // Otherwise, it is a legacy story
+  for (const slide of story.slides) {
+    if ('galleryItems' in slide) {
+      return false;
+    }
+  }
+
+  return true;
+};

src/scripts/reducers/story/selected.ts

@@ -4,6 +4,8 @@ import {
 } from '../../actions/fetch-story';
 
 import {convertLegacyStory} from '../../libs/convert-legacy-story';
+import {isLegacyStory} from '../../libs/is-legacy-story';
+import {LegacyStory} from '../../types/legacy-story';
 
 import {Story} from '../../types/story';
 
@@ -12,8 +14,11 @@ function selectedStoryReducer(
   action: FetchStoryActions
 ): Story | null {
   switch (action.type) {
-    case FETCH_STORY_SUCCESS:
-      return convertLegacyStory(action.story);
+    case FETCH_STORY_SUCCESS: {
+      return isLegacyStory(action.story)
+        ? convertLegacyStory(action.story as LegacyStory)
+        : (action.story as Story);
+    }
     default:
       return storyState;
   }