@times-components/ts-components 1.46.0 → 1.46.3

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

@@ -33,16 +33,16 @@ storiesOf('Typescript Component/Recommended Articles', module)
   ))
   .add('Recommended Articles - 1 Article', () => (
     <FetchProvider previewData={getArticles(previewData, 1)}>
-      <RecommendedArticles heading="Today's news" isVisible />
+      <RecommendedArticles heading="Today's news" />
     </FetchProvider>
   ))
   .add('Recommended Articles - 2 Article', () => (
     <FetchProvider previewData={getArticles(previewData, 2)}>
-      <RecommendedArticles heading="Today's business" isVisible />
+      <RecommendedArticles heading="Today's business" />
     </FetchProvider>
   ))
   .add('Recommended Articles - 3 Article', () => (
     <FetchProvider previewData={previewData}>
-      <RecommendedArticles heading="Today's sport" isVisible />
+      <RecommendedArticles heading="Today's sport" />
     </FetchProvider>
   ));

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import get from 'lodash.get';
 
 import RelatedArticles from '@times-components/related-articles';
 
@@ -8,17 +9,22 @@ import { getRelatedArticlesSlice } from './formatters';
 
 export const RecommendedArticles: React.FC<{
   heading: string;
-  isVisible?: boolean;
-}> = ({ heading, isVisible }) => {
+}> = ({ heading }) => {
   const { loading, error, data } = useFetch<any>();
 
-  if (loading || error || data === undefined) {
+  if (loading || error) {
+    return null;
+  }
+
+  const articles = get(data, 'recommendations.articles');
+
+  if (!articles || !articles.length) {
     return null;
   }
 
   const { fireAnalyticsEvent } = useTrackingContext();
 
-  const slice = getRelatedArticlesSlice(data.recommendations);
+  const slice = getRelatedArticlesSlice(articles);
 
   const onClickHandler = (__: MouseEvent, article: { url: string }) => {
     const found = slice.items.find(
@@ -34,10 +40,7 @@ export const RecommendedArticles: React.FC<{
   };
 
   return (
-    <div
-      id="recommended-articles"
-      style={{ display: isVisible ? 'block' : 'none' }}
-    >
+    <div id="recommended-articles" style={{ display: 'none' }}>
       <RelatedArticles
         heading={heading}
         slice={slice}

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

@@ -1,3 +1,9 @@
+declare global {
+  interface Window {
+    nuk: any;
+  }
+}
+
 import React, { useEffect, useState } from 'react';
 
 import { FetchProvider } from '../../helpers/fetch/FetchProvider';
@@ -8,12 +14,18 @@ export const RecommendedFetch: React.FC<{
   articleId: string;
   articleHeadline: string;
   articleSection: string;
-  isVisible?: boolean;
-}> = ({ articleId, articleHeadline, articleSection, isVisible }) => {
+}> = ({ articleId, articleHeadline, articleSection }) => {
   const [isClientSide, setIsClientSide] = useState<boolean>(false);
 
   useEffect(() => {
-    setIsClientSide(true);
+    try {
+      if (window.nuk.getCookieValue('acs_tnl')) {
+        setIsClientSide(true);
+      }
+    } catch (e) {
+      // tslint:disable-next-line:no-console
+      console.log(e);
+    }
   }, []);
 
   const heading = `Today's ${articleSection}`;
@@ -37,7 +49,7 @@ export const RecommendedFetch: React.FC<{
           }
         }}
       >
-        <RecommendedArticles heading={heading} isVisible={isVisible} />
+        <RecommendedArticles heading={heading} />
       </TrackingContextProvider>
     </FetchProvider>
   ) : null;

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

@@ -82,7 +82,7 @@ describe('<RecommendedArticles>', () => {
     });
 
     const { asFragment, getByText } = render(
-      <RecommendedArticles heading={heading} isVisible />
+      <RecommendedArticles heading={heading} />
     );
 
     expect(getByText(heading));
@@ -109,7 +109,7 @@ describe('<RecommendedArticles>', () => {
     (useFetch as jest.Mock).mockReturnValue({ data: previewData });
 
     const { asFragment, getByText } = render(
-      <RecommendedArticles heading={heading} isVisible />
+      <RecommendedArticles heading={heading} />
     );
 
     expect(getByText(heading));
@@ -129,7 +129,7 @@ describe('<RecommendedArticles>', () => {
         context={initialContext}
         analyticsStream={analyticsStream}
       >
-        <RecommendedArticles heading={heading} isVisible />
+        <RecommendedArticles heading={heading} />
       </TrackingContextProvider>
     );
 

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

@@ -18,6 +18,13 @@ jest.mock('../../../helpers/fetch/FetchProvider', () => ({
 
 describe('<RecommendedFetch>', () => {
   it('should render correctly', () => {
+    // @ts-ignore
+    delete window.location;
+    // @ts-ignore
+    window.location = { search: '?recommendedArticles=1' };
+
+    window.nuk = { getCookieValue: () => true };
+
     const { asFragment, getByText } = render(
       <RecommendedFetch
         articleId="1234"

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

@@ -4,7 +4,7 @@ exports[`<RecommendedArticles> should render RelatedArticles correctly with 1 ar
 <DocumentFragment>
   <div
     id="recommended-articles"
-    style="display: block;"
+    style="display: none;"
   >
     <div>
       RelatedArticles
@@ -45,7 +45,7 @@ exports[`<RecommendedArticles> should render RelatedArticles correctly with 3 ar
 <DocumentFragment>
   <div
     id="recommended-articles"
-    style="display: block;"
+    style="display: none;"
   >
     <div>
       RelatedArticles

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

@@ -78,23 +78,21 @@ const getImage = (media?: Media) => {
 // MAIN
 
 export const getRelatedArticlesSlice = (
-  recommendations: any
+  articles: 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)
-    : []
+  items: 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)
 });