Integrating Story pages with Arrow

Story templates are now integrated with Arrow Styles:

StoryWrapper component

• Once the story is fetched, based on story-template we can switch to the Text / Video / Photo / Listicle / Blog template.

• Passing common Template Configuration (like: related stories, slots, publisher details and other props) for all Story Templates in
  Wrapper component itself .



Please check the following snippet 


       import React, { useState, useEffect } from "react";
       import { loadRelatedStories } from "../../../api/utils";
       import { TextStory, LiveBlogStory, ListicleStory, PhotoStory, VideoStory } from "./index";
       import { AdPlaceholder } from "../../arrow/components/Atoms/AdPlaceholder";
 
    function StoryWrapper({ story, config }) {
       const [relatedStories, setRelatedStories] = useState([]);
       const storyTemplate = story["story-template"];
       const templateConfig = {
         asideCollection: {
           data: relatedStories,
           slotData: [
              {
                type: "ad",
              },
              {
                type: "collection",
              },
              {
                type: "ad",
              },
            ],
            config: {
              collectionNameBorderColor: "#3a9fdd",
              title: "Aside Collection Title",
              showAuthor: true,
              showTime: true,
              showReadTime: true,
              showSection: true,
            },
           },
           templateType: "default",
           showSection: true,
           publishedDetails: {
             enablePublishedTime: true,
             enableUpdatedTime: true,
             showReadTime: true,
           },
        }
       .....
       ......

      useEffect(() => {
         loadRelatedStories(story, config).then((relatedStories) => setRelatedStories(relatedStories));
       }, []);

      switch (storyTemplate) {
        case "text":
           return (
             <TextStory
                story={story}
                config={{ ...config, ...templateConfig }}
                adWidget={adWidget}
                adPlaceholder={<AdPlaceholder height="250px" width="300px" />}
             />
          );
       case "video":  ....;
       
       case "photo":  ....;
      
       case "listicle": ....;
     

       case "live-blog": ....;
      
        default: ....;
     
       }
     }
    ....
    ....
   export default React.memo(StoryWrapper);

• Add the loadRelatedStories function under app > api > utils

export const loadRelatedStories = async (story, config) => {
  const { mountAt } = config || {};
  const mountAtPrefix = mountAt || "";
  const sectionQuery = story.sections && story.sections.length !== 0 ? `section-id=${story.sections[0].id}` : "";
  const response = await global
    .wretch(`${mountAtPrefix}/api/v1/stories/${story.id}/related-stories?${sectionQuery}`)
    .query({
      fields: STORY_FIELDS,
    })
    .get()
    .json((relatedStories) => relatedStories["related-stories"]);
  return response;
};

We can override the configuration inside the individual Text / Photo / ... component(s)

Please check the snippet below.

import React from "react";
import TextStoryTemplate from "../../../arrow/components/Rows/StoryTemplates/TextStoryTemplates";

const TextStory = ({ story, config, adWidget, adPlaceholder }) => {
   const templateSpecific = {
    templateType: "headline-overlay-priority",
    showSection: false,
  };
  return (
    <TextStoryTemplate
      story={story}
      config={{ ...config, ...templateSpecific }}
      adComponent={adWidget}
      widgetComp={adWidget}
      firstChild={adPlaceholder}
      secondChild={adPlaceholder}
    />
  );
};


export default TextStory;