@times-components/ts-components 1.36.3 → 1.37.0

package/src/components/recommended-articles/RecommendedArticles.stories.tsx

@@ -1,77 +1,60 @@
 import React from 'react';
 
 import { showcaseConverter } from '@times-components/storybook';
-import { MockedProvider } from '@times-components/provider-test-tools';
-import { recommendations } from '@times-components/provider-queries';
 
+import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import previewData from '../../fixtures/preview-data/recommended-articles';
 import analyticsStream from '../../fixtures/analytics-actions/analytics-actions';
+
 import { RecommendedArticles } from './RecommendedArticles';
 
-const mocks = [
-  {
-    delay: 1000,
-    request: {
-      query: recommendations,
-      variables: {
-        publisher: 'TIMES',
-        recomArgs: {
-          userId: '1234',
-          articleId: '94a01926-719a-11ec-aacf-0736e08b15cd'
-        }
-      }
-    },
-    result: {
-      data: {
-        recommendations: {
-          __typename: 'Recommendations',
-          leadAsset: 'null',
-          articles: [
-            {
-              __typename: 'UniversalArticle',
-              headline:
-                'Whole world is against us, says top Russian strategist',
-              id: 'a9ffb7cc-d5d1-11ec-bb99-1bcd45646516',
-              media: {
-                __typename: 'Image'
-              },
-              slug:
-                'were-no-match-for-ukrainian-grit-and-firepower-says-retired-russian-colonel',
-              url:
-                'https://www.staging-thetimes.co.uk/article/were-no-match-for-ukrainian-grit-and-firepower-says-retired-russian-colonel-lhnvsfj33'
-            },
-            {
-              __typename: 'UniversalArticle',
-              headline: 'Vardys leave court with swipe at Wayne Rooney',
-              id: 'f3d730a0-d5c2-11ec-8585-951ab3afb4d2',
-              media: {
-                __typename: 'Image'
-              },
-              slug:
-                'wayne-rooney-to-give-evidence-in-wagatha-christie-trial-as-jamie-vardy-attends-court-for-first-time',
-              url:
-                'https://www.staging-thetimes.co.uk/article/wayne-rooney-to-give-evidence-in-wagatha-christie-trial-as-jamie-vardy-attends-court-for-first-time-wlzvxklc6'
-            }
-          ]
-        }
-      }
-    }
+export const getArticles = (data: any, numOfArticles: number) => ({
+  recommendations: {
+    articles: data.recommendations.articles.slice(0, numOfArticles)
   }
-];
+});
 
-const recarticles = {
+const recommArticles = {
   children: [
     {
       component: () => (
-        <MockedProvider mocks={mocks}>
+        <FetchProvider previewData={getArticles(previewData, 1)}>
           <RecommendedArticles
-            articleId="94a01926-719a-11ec-aacf-0736e08b15cd"
             section="News"
+            isVisible
             analyticsStream={analyticsStream}
           />
-        </MockedProvider>
+        </FetchProvider>
       ),
-
-      name: 'Recommended Articles',
+      name: 'Recommended Articles - 1 Article',
+      platform: 'web',
+      type: 'story'
+    },
+    {
+      component: () => (
+        <FetchProvider previewData={getArticles(previewData, 2)}>
+          <RecommendedArticles
+            section="Business"
+            isVisible
+            analyticsStream={analyticsStream}
+          />
+        </FetchProvider>
+      ),
+      name: 'Recommended Articles - 2 Article',
+      platform: 'web',
+      type: 'story'
+    },
+    {
+      component: () => (
+        <FetchProvider previewData={previewData}>
+          <RecommendedArticles
+            section="Sport"
+            isVisible
+            analyticsStream={analyticsStream}
+          />
+        </FetchProvider>
+      ),
+      name: 'Recommended Articles - 3 Article',
       platform: 'web',
       type: 'story'
     }
@@ -79,4 +62,4 @@ const recarticles = {
   name: 'Typescript Component/Recommended Articles'
 };
 
-showcaseConverter(module, recarticles);
+showcaseConverter(module, recommArticles);

package/src/components/recommended-articles/RecommendedArticles.tsx

@@ -1,69 +1,40 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
+import { Placeholder } from '@times-components/image';
 import RelatedArticles from '@times-components/related-articles';
-import { GetRecommendedArticles } from '@times-components/provider';
 
-import { RelatedArticleSliceType } from '../../types/related-article-slice';
+import { useFetch } from '../../helpers/fetch/FetchProvider';
+import { getRelatedArticlesSlice } from './formatters';
 
-import { Placeholder } from '@times-components/image';
+import { PlaceholderContainer } from '../common-styles';
 
-type RecommendedArticlesProps = {
-  articleId: string;
+export const RecommendedArticles: React.FC<{
   section: string;
+  isVisible?: boolean;
   analyticsStream?: (evt: any) => void;
-};
-
-export const RecommendedArticles = ({
-  articleId,
-  section,
-  analyticsStream
-}: RecommendedArticlesProps) => {
-  const [isReady, setIsReady] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, []);
+}> = ({ section, isVisible, analyticsStream }) => {
+  const { loading, error, data } = useFetch<any>();
+
+  if (loading && isVisible) {
+    return (
+      <PlaceholderContainer>
+        <Placeholder />
+      </PlaceholderContainer>
+    );
+  }
 
-  if (!isReady) {
+  if (error || data === undefined) {
     return null;
   }
 
   return (
-    <GetRecommendedArticles
-      publisher={'TIMES'}
-      recomArgs={{ userId: '1234', articleId }}
-      ssr={false}
-      debounceTimeMs={0}
-    >
-      {({ isLoading, error, recommendations }: any) => {
-        if (error) {
-          return null;
-        }
-
-        if (isLoading || !recommendations) {
-          return (
-            <div className="placeholder">
-              <Placeholder />
-            </div>
-          );
-        }
-
-        const slice: RelatedArticleSliceType = {
-          sliceName: 'StandardSlice',
-          items: recommendations
-            ? recommendations.articles.map((article: any) => ({ article }))
-            : []
-        };
-
-        return (
-          <RelatedArticles
-            heading={`Today's ${section}`}
-            slice={slice}
-            isVisible
-            analyticsStream={analyticsStream}
-          />
-        );
-      }}
-    </GetRecommendedArticles>
+    <div style={{ display: isVisible ? 'block' : 'none' }}>
+      <RelatedArticles
+        heading={`Today's ${section}`}
+        slice={getRelatedArticlesSlice(data.recommendations)}
+        isVisible
+        analyticsStream={analyticsStream}
+      />
+    </div>
   );
 };

package/src/components/recommended-articles/RecommendedFetch.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+
+import { FetchProvider } from '../../helpers/fetch/FetchProvider';
+import { RecommendedArticles } from './RecommendedArticles';
+
+export const RecommendedFetch: React.FC<{
+  articleId: string;
+  section: string;
+  analyticsStream?: (evt: any) => void;
+}> = ({ articleId, section, analyticsStream }) => {
+  const [isClientSide, setIsClientSide] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsClientSide(true);
+  });
+
+  return isClientSide ? (
+    <FetchProvider url={`/api/recommended-articles/${articleId}`}>
+      <RecommendedArticles
+        section={section}
+        analyticsStream={analyticsStream}
+      />
+    </FetchProvider>
+  ) : null;
+};

package/src/components/recommended-articles/__tests__/RecommendedArticles.test.tsx

@@ -1,91 +1,61 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render } from '@testing-library/react';
+
+import { useFetch } from '../../../helpers/fetch/FetchProvider';
+import previewData from '../../../fixtures/preview-data/recommended-articles';
 
 import { RecommendedArticles } from '../RecommendedArticles';
 
-import { MockedProvider } from '@times-components/provider-test-tools';
-import { recommendations } from '@times-components/provider-queries';
+jest.mock('@times-components/image', () => ({
+  Placeholder: () => <div>Placeholder</div>
+}));
 
-const mocks = [
-  {
-    delay: 1000,
-    request: {
-      query: recommendations,
-      variables: {
-        publisher: 'TIMES',
-        recomArgs: {
-          userId: '1234',
-          articleId: '94a01926-719a-11ec-aacf-0736e08b15cd'
-        }
-      }
-    },
-    result: {
-      data: {
-        recommendations: {
-          __typename: 'Recommendations',
-          leadAsset: 'null',
-          articles: [
-            {
-              __typename: 'UniversalArticle',
-              headline:
-                'Whole world is against us, says top Russian strategist',
-              id: 'a9ffb7cc-d5d1-11ec-bb99-1bcd45646516',
-              media: {
-                __typename: 'Image'
-              },
-              slug:
-                'were-no-match-for-ukrainian-grit-and-firepower-says-retired-russian-colonel',
-              url:
-                'https://www.staging-thetimes.co.uk/article/were-no-match-for-ukrainian-grit-and-firepower-says-retired-russian-colonel-lhnvsfj33'
-            },
-            {
-              __typename: 'UniversalArticle',
-              headline: 'Vardys leave court with swipe at Wayne Rooney',
-              id: 'f3d730a0-d5c2-11ec-8585-951ab3afb4d2',
-              media: {
-                __typename: 'Image'
-              },
-              slug:
-                'wayne-rooney-to-give-evidence-in-wagatha-christie-trial-as-jamie-vardy-attends-court-for-first-time',
-              url:
-                'https://www.staging-thetimes.co.uk/article/wayne-rooney-to-give-evidence-in-wagatha-christie-trial-as-jamie-vardy-attends-court-for-first-time-wlzvxklc6'
-            }
-          ]
-        }
-      }
-    }
-  }
-];
+jest.mock('@times-components/related-articles', () => 'RelatedArticles');
 
-describe('Recommended Articles', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-    cleanup();
-  });
+jest.mock('../../../helpers/fetch/FetchProvider', () => ({
+  useFetch: jest.fn()
+}));
 
-  it('it renders', () => {
-    const { asFragment } = render(
-      <MockedProvider mocks={mocks}>
-        <RecommendedArticles
-          articleId="94a01926-719a-11ec-aacf-0736e08b15cd"
-          section="News"
-          analyticsStream={jest.fn()}
-        />
-      </MockedProvider>
+describe('<RecommendedArticles>', () => {
+  it('should render the initial loading state correctly', () => {
+    (useFetch as jest.Mock).mockReturnValue({ loading: true });
+
+    const { asFragment, getByText } = render(
+      <RecommendedArticles
+        section="News"
+        isVisible
+        analyticsStream={() => ({})}
+      />
     );
+
+    expect(getByText('Placeholder'));
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('degrades gracefully', () => {
+  it('should render the error state correctly', () => {
+    (useFetch as jest.Mock).mockReturnValue({ error: 'Some error occurred' });
+
     const { asFragment } = render(
-      <MockedProvider mocks={mocks}>
-        <RecommendedArticles
-          articleId=""
-          section="News"
-          analyticsStream={jest.fn()}
-        />
-      </MockedProvider>
+      <RecommendedArticles section="News" analyticsStream={() => ({})} />
     );
+
+    expect(asFragment().firstChild).toBeNull();
+  });
+
+  it('should render RelatedArticles correctly', () => {
+    (useFetch as jest.Mock).mockReturnValue({ data: previewData });
+
+    const { container, asFragment } = render(
+      <RecommendedArticles
+        section="News"
+        isVisible
+        analyticsStream={() => ({})}
+      />
+    );
+
+    const related = container.querySelector('relatedarticles') as HTMLElement;
+    expect(related.getAttribute('heading')).toEqual("Today's News");
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/recommended-articles/__tests__/RecommendedFetch.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { RecommendedFetch } from '../RecommendedFetch';
+
+jest.mock('../../../helpers/fetch/FetchProvider', () => ({
+  FetchProvider: () => <div>FetchProvider</div>
+}));
+
+describe('<RecommendedFetch>', () => {
+  it('should render correctly', () => {
+    const { asFragment, getByText } = render(
+      <RecommendedFetch
+        articleId="1234"
+        section="News"
+        analyticsStream={() => ({})}
+      />
+    );
+
+    expect(getByText('FetchProvider'));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/recommended-articles/__tests__/__snapshots__/RecommendedArticles.test.tsx.snap

@@ -1,70 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Recommended Articles degrades gracefully 1`] = `
+exports[`<RecommendedArticles> should render RelatedArticles correctly 1`] = `
 <DocumentFragment>
   <div
-    class="placeholder"
+    style="display: block;"
   >
-    <div
-      class="tc-view__TcView-nuazoi-0 fPjBcr"
-      height="100%"
-      style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
-      width="100%"
-    >
-      <svg
-        height="auto"
-        style="max-width: 25%; max-height: 50%;"
-        version="1.1"
-        viewBox="145 50 108 120"
-        width="100%"
-      >
-        <g
-          fill="none"
-          fill-rule="evenodd"
-          stroke="none"
-          stroke-width="1"
-        >
-          <path
-            d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
-            fill="#FFFFFF"
-          />
-        </g>
-      </svg>
-    </div>
+    <relatedarticles
+      heading="Today's News"
+      slice="[object Object]"
+    />
   </div>
 </DocumentFragment>
 `;
 
-exports[`Recommended Articles it renders 1`] = `
+exports[`<RecommendedArticles> should render the initial loading state correctly 1`] = `
 <DocumentFragment>
   <div
-    class="placeholder"
+    class="sc-bdVaJa dwiMsX"
   >
-    <div
-      class="tc-view__TcView-nuazoi-0 fPjBcr"
-      height="100%"
-      style="align-items: center; background-color: rgb(237, 237, 237); bottom: 0px; justify-content: center; left: 0px; position: absolute; right: 0px; top: 0px; z-index: 0; border-radius: 0;"
-      width="100%"
-    >
-      <svg
-        height="auto"
-        style="max-width: 25%; max-height: 50%;"
-        version="1.1"
-        viewBox="145 50 108 120"
-        width="100%"
-      >
-        <g
-          fill="none"
-          fill-rule="evenodd"
-          stroke="none"
-          stroke-width="1"
-        >
-          <path
-            d="M211.26076,54 L211.231367,54 L147.67512,54 L145,85.7081465 L146.922096,86.4489102 C146.922096,86.4489102 164.867589,68.1355181 168.301115,65.0001546 C171.728017,61.8689133 174.237132,61.0885763 176.436179,60.3527593 C180.998206,59.169681 185.977937,59.2150255 185.977937,59.2150255 L186.109581,59.2150255 L186.109581,156.560932 L169.259886,164.473953 L169.259886,166 L228.735147,166 L228.735147,164.473953 L211.889177,156.560932 L211.889177,59.2150255 L212.01751,59.2150255 C212.01751,59.2150255 216.992272,59.169681 221.558854,60.3527593 C223.757072,61.0885763 226.266601,61.8689133 229.691848,65.0001546 C233.130341,68.1355181 251.071695,86.4489102 251.071695,86.4489102 L253,85.7081465 L250.317842,54 L211.270695,54 L211.242545,54"
-            fill="#FFFFFF"
-          />
-        </g>
-      </svg>
+    <div>
+      Placeholder
     </div>
   </div>
 </DocumentFragment>

package/src/components/recommended-articles/__tests__/__snapshots__/RecommendedFetch.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RecommendedFetch> should render correctly 1`] = `
+<DocumentFragment>
+  <div>
+    FetchProvider
+  </div>
+</DocumentFragment>
+`;

package/src/components/recommended-articles/formatters.ts

@@ -0,0 +1,100 @@
+import { RelatedArticleSliceType } from '../../types/related-article-slice';
+
+// TYPES
+
+export type Byline =
+  | { __typename: string; type: 'author'; name: string }
+  | { __typename: string; type: 'inline'; value: string };
+
+type MediaCrop = {
+  __typename: string;
+  url: string;
+  alt?: string;
+  aspectRatio: string;
+};
+type Media = { __typename: string; crops: MediaCrop[] };
+
+export type SummaryText = { __typename: string; text: string };
+type Summary = { __typename: string; children: SummaryText[] };
+
+export type Article = {
+  __typename: string;
+  url: string;
+  slug: string;
+  label: string;
+  headline: string;
+  publishedDateTime: string;
+  bylines?: Byline[];
+  summary?: Summary;
+  media?: Media;
+};
+
+// HELPERS
+
+const getBylineAttr = (byline: Byline) => ({
+  value: byline.type === 'author' ? byline.name : byline.value
+});
+
+const getByline = (byline: Byline) => ({
+  name: byline.type,
+  children: [{ name: 'text', attributes: getBylineAttr(byline), children: [] }]
+});
+
+const getBylines = (bylines?: Byline[]) => {
+  if (bylines) {
+    return bylines.map((byline: Byline) => ({ byline: [getByline(byline)] }));
+  }
+  return undefined;
+};
+
+const getSummaryText = (summary: Summary) => {
+  const text = summary.children
+    .map((child: SummaryText) => child.text)
+    .join('');
+  return { value: text.slice(0, text.slice(0, 125).lastIndexOf(' ')) };
+};
+
+const getSummaryParagraph = (summary: Summary) => [
+  { name: 'text', attributes: getSummaryText(summary), children: [] }
+];
+
+const getSummary = (summary?: Summary) => {
+  if (summary && summary.children) {
+    return [{ name: 'paragraph', children: getSummaryParagraph(summary) }];
+  }
+  return [];
+};
+
+const getImage = (media?: Media) => {
+  if (media && media.crops) {
+    const image = media.crops.find(
+      (crop: MediaCrop) => crop.aspectRatio === '16:9'
+    );
+    return image ? { crop169: { url: image.url }, title: image.alt } : null;
+  }
+  return {};
+};
+
+// MAIN
+
+export const getRelatedArticlesSlice = (
+  recommendations: any
+): RelatedArticleSliceType => ({
+  sliceName: 'StandardSlice',
+  items: recommendations
+    ? recommendations.articles
+        .map((article: Article) => ({
+          article: {
+            slug: article.slug,
+            shortIdentifier: article.url.slice(-9),
+            label: article.label,
+            headline: article.headline,
+            publishedTime: article.publishedDateTime,
+            bylines: getBylines(article.bylines),
+            summary125: getSummary(article.summary),
+            leadAsset: getImage(article.media)
+          }
+        }))
+        .slice(0, 3)
+    : []
+});