LiveRadio Refactor Regarding Ares Response

src/app/containers/ATIAnalytics/params/index.test.js

@@ -68,14 +68,11 @@ const frontPage = {
   },
 };
 const media = {
-  metadata: {
-    id: 'id',
-    language: 'language',
-    analyticsLabels: {
-      pageIdentifier: 'pageIdentifier',
-      pageTitle: 'pageTitle',
-    },
-  },
+  id: 'id',
+  language: 'language',
+  pageIdentifier: 'pageIdentifier',
+  pageTitle: 'pageTitle',
+  contentType: 'player-live',
 };
 const MAP = {
   promo: {

src/app/containers/ATIAnalytics/params/radioPage/buildParams.js

@@ -1,4 +1,3 @@
-import path from 'ramda/src/path';
 import { buildATIPageTrackPath } from '../../atiUrl';
 import { LIBRARY_VERSION } from '../../../../lib/analyticsUtils';
 
@@ -14,15 +13,15 @@ export const buildRadioATIParams = (
     service,
   } = serviceContext;
 
-  const { metadata } = pageData;
+  const { id, language, pageTitle, pageIdentifier, contentType } = pageData;
 
   return {
     appName: atiAnalyticsAppName,
-    contentId: metadata.id,
-    contentType: 'player-live',
-    language: metadata.language,
-    pageIdentifier: path(['analyticsLabels', 'pageIdentifier'], metadata),
-    pageTitle: path(['analyticsLabels', 'pageTitle'], metadata),
+    contentId: id,
+    contentType,
+    language,
+    pageIdentifier,
+    pageTitle,
     producerId: atiAnalyticsProducerId,
     libraryVersion: LIBRARY_VERSION,
     statsDestination,

src/app/containers/ATIAnalytics/params/radioPage/buildParams.test.js

@@ -8,14 +8,11 @@ analyticsUtils.getPublishedDatetime = jest
   .mockReturnValue('1970-01-01T00:00:00.000Z');
 
 const radio = {
-  metadata: {
-    id: 'id',
-    language: 'language',
-    analyticsLabels: {
-      pageIdentifier: 'pageIdentifier',
-      pageTitle: 'pageTitle',
-    },
-  },
+  id: 'id',
+  language: 'language',
+  pageIdentifier: 'pageIdentifier',
+  pageTitle: 'pageTitle',
+  contentType: 'player-live',
 };
 
 const requestContext = {

src/app/containers/ChartbeatAnalytics/utils/index.js

@@ -89,7 +89,7 @@ export const getTitle = (pageType, pageData, brandName) => {
     case 'MAP':
       return path(['promo', 'headlines', 'headline'], pageData);
     case 'media':
-      return path(['promo', 'name'], pageData);
+      return path(['name'], pageData);
     default:
       return null;
   }

src/app/containers/ChartbeatAnalytics/utils/index.test.js

@@ -260,9 +260,7 @@ describe('Chartbeat utilities', () => {
     it('should return correct title when pageType is media (Live radio)', () => {
       const pageType = 'media';
       const pageData = {
-        promo: {
-          name: 'Live Radio Page Title',
-        },
+        name: 'Live Radio Page Title',
       };
 
       expect(getTitle(pageType, pageData)).toBe('Live Radio Page Title');
@@ -387,9 +385,7 @@ describe('Chartbeat utilities', () => {
         platform: 'amp',
         pageType: 'media',
         data: {
-          promo: {
-            name: 'Live Radio Page Title',
-          },
+          name: 'Live Radio Page Title',
         },
         brandName: '',
         chartbeatDomain: 'korean.bbc.co.uk',

src/app/containers/RadioPageBlocks/index.test.jsx

@@ -7,7 +7,7 @@ import { ServiceContext } from '#contexts/ServiceContext';
 import { RequestContext } from '#contexts/RequestContext';
 import RadioPageBlocks from '.';
 import amharicPageData from '#data/amharic/bbc_amharic_radio/liveradio';
-import getInitialData from '#app/routes/radio/getInitialData';
+import getInitialData from '#app/routes/liveRadio/getInitialData';
 
 const serviceContextMock = {
   service: 'amharic',

src/app/models/propTypes/data/index.js

@@ -1,14 +1,14 @@
 import { shape, oneOfType, number } from 'prop-types';
 import { frontPageDataPropTypes } from '../frontPage';
 import { articleDataPropTypes } from '../article';
-import { radioPageDataPropTypes } from '../radioPage';
+import { liveRadioPageDataPropTypes } from '../liveRadioPage';
 import { cpsAssetPageDataPropTypes } from '../cpsAssetPage';
 import { onDemandRadioPageDataPropTypes } from '../onDemandRadioPage';
 
 export const pageDataPropType = oneOfType([
   articleDataPropTypes,
   frontPageDataPropTypes,
-  radioPageDataPropTypes,
+  liveRadioPageDataPropTypes,
   cpsAssetPageDataPropTypes,
   onDemandRadioPageDataPropTypes,
 ]);

src/app/models/propTypes/radioPage/content/index.js → src/app/models/propTypes/liveRadioPage/content/index.js

@@ -2,10 +2,10 @@ import { shape, arrayOf, oneOf } from 'prop-types';
 import aresBlockPropTypes from './aresBlock';
 import versionPropTypes from './version';
 
-const radioPageContentPropTypes = {
+const liveRadioPageContentPropTypes = {
   content: shape({
     blocks: arrayOf(oneOf([versionPropTypes, aresBlockPropTypes])).isRequired,
   }),
 };
 
-export default radioPageContentPropTypes;
+export default liveRadioPageContentPropTypes;

src/app/models/propTypes/liveRadioPage/index.js

@@ -0,0 +1,22 @@
+import { bool, shape, string, number } from 'prop-types';
+import liveRadioPageContentPropTypes from './content';
+
+export const liveRadioPageDataPropTypes = shape({
+  language: string,
+  id: string,
+  name: string,
+  pageTitle: string,
+  contentType: string,
+  pageIdentifier: string,
+  summary: string,
+  content: shape(liveRadioPageContentPropTypes).isRequired,
+});
+
+const liveRadioPagePropTypes = {
+  isAmp: bool,
+  data: liveRadioPageDataPropTypes,
+  service: string,
+  status: number,
+};
+
+export default liveRadioPagePropTypes;

src/app/pages/RadioPage/index.jsx → src/app/pages/LiveRadioPage/index.jsx

@@ -15,23 +15,22 @@ const StyledGelPageGrid = styled(GelPageGrid)`
   flex-grow: 1; /* needed to ensure footer positions at bottom of viewport */
 `;
 
-const RadioPage = ({ pageData }) => {
-  const blocks = path(['content', 'blocks'], pageData);
-  const promo = path(['promo'], pageData);
-  const metadata = path(['metadata'], pageData);
+const LiveRadioPage = ({ pageData }) => {
+  const { language, name, summary, content } = pageData;
+  const blocks = path(['blocks'], content);
   const { dir } = useContext(ServiceContext);
 
   return (
     <>
       <ATIAnalytics data={pageData} />
       <ChartbeatAnalytics data={pageData} />
       <MetadataContainer
-        title={promo.name}
-        lang={metadata.language}
-        description={promo.summary}
+        title={name}
+        lang={language}
+        description={summary}
         openGraphType="website"
       />
-      <LinkedData type="RadioChannel" seoTitle={promo.name} />
+      <LinkedData type="RadioChannel" seoTitle={name} />
 
       <StyledGelPageGrid
         forwardedAs="main"
@@ -75,16 +74,15 @@ const RadioPage = ({ pageData }) => {
   );
 };
 
-RadioPage.propTypes = {
+LiveRadioPage.propTypes = {
   pageData: shape({
     metadata: shape({
       id: string,
       tags: object,
     }),
-    promo: shape({
-      subtype: string,
-      name: string,
-    }),
+    language: string,
+    name: string,
+    summary: string,
     content: shape({
       blocks: arrayOf(
         shape({
@@ -99,4 +97,4 @@ RadioPage.propTypes = {
   }).isRequired,
 };
 
-export default RadioPage;
+export default LiveRadioPage;

src/app/pages/RadioPage/index.stories.jsx → src/app/pages/LiveRadioPage/index.stories.jsx

@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
-import { RadioPage } from '..';
+import { LiveRadioPage } from '..';
 import indonesia from '#data/indonesia/bbc_indonesian_radio/liveradio.json';
 import korean from '#data/korean/bbc_korean_radio/liveradio.json';
 import tigrinya from '#data/tigrinya/bbc_tigrinya_radio/liveradio.json';
@@ -45,7 +45,7 @@ storiesOf('Pages|Radio Page', module)
   )
   .add('default', ({ service }) => (
     <BrowserRouter>
-      <RadioPage
+      <LiveRadioPage
         match={matchFixtures(service)}
         pageData={liveRadioFixtures[service]}
         status={status}

src/app/pages/RadioPage/index.test.jsx → src/app/pages/LiveRadioPage/index.test.jsx

@@ -3,11 +3,11 @@ import { BrowserRouter } from 'react-router-dom';
 import { matchSnapshotAsync } from '@bbc/psammead-test-helpers';
 import { ServiceContextProvider } from '#contexts/ServiceContext';
 import { RequestContextProvider } from '#contexts/RequestContext';
-import RadioPage from '.';
+import LiveRadioPage from '.';
 import amharicPageData from '#data/amharic/bbc_amharic_radio/liveradio';
 import * as analyticsUtils from '#lib/analyticsUtils';
 import { ToggleContextProvider } from '#contexts/ToggleContext';
-import getInitialData from '#app/routes/radio/getInitialData';
+import getInitialData from '#app/routes/liveRadio/getInitialData';
 
 fetch.mockResponse(JSON.stringify(amharicPageData));
 
@@ -37,7 +37,7 @@ describe('Radio Page Main', () => {
             statusCode={200}
           >
             <BrowserRouter>
-              <RadioPage service="amharic" pageData={pageData} />
+              <LiveRadioPage service="amharic" pageData={pageData} />
             </BrowserRouter>
           </RequestContextProvider>
         </ServiceContextProvider>
@@ -63,7 +63,7 @@ describe('Radio Page Main', () => {
             statusCode={200}
           >
             <BrowserRouter>
-              <RadioPage service="amharic" pageData={pageData} />
+              <LiveRadioPage service="amharic" pageData={pageData} />
             </BrowserRouter>
           </RequestContextProvider>
         </ServiceContextProvider>

src/app/pages/index.js

@@ -4,7 +4,7 @@ import _ErrorPage from './ErrorPage';
 import _FrontPage from './FrontPage';
 import _MediaAssetPage from './MediaAssetPage';
 import _PhotoGalleryPage from './PhotoGalleryPage';
-import _RadioPage from './RadioPage';
+import _LiveRadioPage from './LiveRadioPage';
 import _OnDemandRadioPage from './OnDemandRadioPage';
 import _StoryPage from './StoryPage';
 import withContexts from '#containers/PageHandlers/withContexts';
@@ -31,6 +31,6 @@ export const ErrorPage = applyErrorPageHandlers(_ErrorPage);
 export const FrontPage = pipe(applyBasicPageHandlers, withVariant)(_FrontPage);
 export const MediaAssetPage = applyBasicPageHandlers(_MediaAssetPage);
 export const PhotoGalleryPage = applyBasicPageHandlers(_PhotoGalleryPage);
-export const RadioPage = applyBasicPageHandlers(_RadioPage);
+export const LiveRadioPage = applyBasicPageHandlers(_LiveRadioPage);
 export const OnDemandRadioPage = applyBasicPageHandlers(_OnDemandRadioPage);
 export const StoryPage = applyBasicPageHandlers(_StoryPage);

src/app/routes/index.js

@@ -1,7 +1,7 @@
 import article from './article';
 import cpsAsset from './cpsAsset';
 import home from './home';
-import liveRadio from './radio';
+import liveRadio from './liveRadio';
 import onDemandRadio from './onDemandRadio';
 import error from './error';
 import errorNoRouteMatch from './errorNoRouteMatch';

src/app/routes/radio/getInitialData/addIdsToBlocks.js → src/app/routes/liveRadio/getInitialData/addIdsToBlocks.js

@@ -6,14 +6,14 @@ import uuid from 'uuid';
 
 const addIdToBlock = (block) => ({ ...block, uuid: uuid() });
 
-const getBlocks = path(['content', 'blocks']);
+const getBlocks = path(['blocks']);
 
 const mapBlocks = pipe(getBlocks, map(addIdToBlock));
 
 export default (jsonRaw) =>
   mergeDeepLeft(
     {
-      content: { blocks: mapBlocks(jsonRaw) },
+      blocks: mapBlocks(jsonRaw),
     },
     jsonRaw,
   );

src/app/routes/liveRadio/getInitialData/index.js

@@ -0,0 +1,36 @@
+import path from 'ramda/src/path';
+import fetchPageData from '../../utils/fetchPageData';
+import addIdsToBlocks from './addIdsToBlocks';
+
+const getLanguage = path(['metadata', 'language']);
+const getMetaDataId = path(['metadata', 'id']);
+const getPromoName = path(['promo', 'name']);
+const getPromoSummary = path(['promo', 'summary']);
+const getPageTitle = path(['metadata', 'analyticsLabels', 'pageTitle']);
+const getContentType = path(['metadata', 'analyticsLabels', 'contentType']);
+const getPageIdentifier = path([
+  'metadata',
+  'analyticsLabels',
+  'pageIdentifier',
+]);
+
+export default async ({ path: pathname }) => {
+  const { json, ...rest } = await fetchPageData(pathname);
+  const contentData = path(['content'], json);
+
+  return {
+    ...rest,
+    ...(json && {
+      pageData: {
+        content: addIdsToBlocks(contentData),
+        language: getLanguage(json),
+        id: getMetaDataId(json),
+        name: getPromoName(json),
+        summary: getPromoSummary(json),
+        pageTitle: getPageTitle(json),
+        contentType: getContentType(json),
+        pageIdentifier: getPageIdentifier(json),
+      },
+    }),
+  };
+};

src/app/routes/radio/getInitialData/index.test.js → src/app/routes/liveRadio/getInitialData/index.test.js

@@ -6,9 +6,9 @@ fetch.mockResponse(JSON.stringify(liveRadioJson));
 it('should return essential data for a page to render', async () => {
   const { pageData } = await getInitialData({ path: 'mock-live-radio-path' });
 
-  expect(pageData.promo.name).toEqual('BBC 코리아 라디오');
-  expect(pageData.metadata.language).toEqual('ko');
-  expect(pageData.promo.summary).toEqual(
+  expect(pageData.name).toEqual('BBC 코리아 라디오');
+  expect(pageData.language).toEqual('ko');
+  expect(pageData.summary).toEqual(
     '세계와 한반도 뉴스를 공정하고 객관적으로 전달해 드립니다',
   );
   expect(pageData.content.blocks.length).toBeTruthy();

src/app/routes/radio/index.js → src/app/routes/liveRadio/index.js

@@ -1,13 +1,13 @@
 import { memo } from 'react';
-import { RadioPage } from '#pages';
+import { LiveRadioPage } from '#pages';
 import pageIsSame from '../utils/pageIsSame';
 import { liveRadioPath } from '../utils/regex';
 import getInitialData from './getInitialData';
 
 export default {
   path: liveRadioPath,
   exact: true,
-  component: memo(RadioPage, pageIsSame),
+  component: memo(LiveRadioPage, pageIsSame),
   getInitialData,
   pageType: 'media',
 };