Merge pull request #903 from WPMedia/TMEDIA-272-simple-list-optimisat…

…ions TMEDIA-272 - Simple list React optimisations
WPMedia · Jun 15, 2021 · bf8308f · bf8308f
2 parents e872de9 + aad4cf6
commit bf8308f
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 84 deletions.
diff --git a/blocks/resizer-image-block/index.js b/blocks/resizer-image-block/index.js
@@ -308,19 +308,8 @@ const getResizedImageParams = (data, options) => {
   return data;
 };
 
-export const extractResizedParams = (storyObject) => {
-  const basicStoryObject = storyObject?.promo_items?.basic
-                        || storyObject?.promo_items?.lead_art?.promo_items?.basic;
-  if (!basicStoryObject) {
-    return [];
-  }
-
-  if (basicStoryObject.type === 'image') {
-    return basicStoryObject.resized_params;
-  }
-
-  return [];
-};
+export const extractResizedParams = (storyObject) => storyObject?.promo_items?.basic?.resized_params
+  || storyObject?.promo_items?.lead_art?.promo_items?.basic?.resized_params || [];
 
 // top level for transforming data
 // takes in content source story data via ans

diff --git a/blocks/simple-list-block/features/simple-list/_children/story-item.jsx b/blocks/simple-list-block/features/simple-list/_children/story-item.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { PrimaryFont } from '@wpmedia/shared-styles';
 import { Image } from '@wpmedia/engine-theme-sdk';
-import getProperties from 'fusion:properties';
 
 const StoryItem = (props) => {
   const {
@@ -11,10 +10,10 @@ const StoryItem = (props) => {
     websiteURL,
     showHeadline,
     showImage,
-    arcSite,
     resizedImageOptions,
     placeholderResizedImageOptions,
     targetFallbackImage,
+    imageProps,
   } = props;
 
   return (
@@ -26,40 +25,14 @@ const StoryItem = (props) => {
           aria-hidden="true"
           tabIndex="-1"
         >
-          {imageURL !== '' ? (
-            <Image
-              resizedImageOptions={resizedImageOptions}
-              url={imageURL}
-              alt={itemTitle}
-              // used this from simple results list
-              // small, including simple list, 3:2 aspect ratio
-              smallWidth={274}
-              smallHeight={183}
-              mediumWidth={274}
-              mediumHeight={183}
-              largeWidth={274}
-              largeHeight={183}
-              className="simple-list-img"
-              breakpoints={getProperties(arcSite)?.breakpoints}
-              resizerURL={getProperties(arcSite)?.resizerURL}
-            />
-          ) : (
-            <Image
-              smallWidth={274}
-              smallHeight={183}
-              mediumWidth={274}
-              mediumHeight={183}
-              largeWidth={274}
-              largeHeight={183}
-              alt={getProperties(arcSite).primaryLogoAlt || ''}
-              url={targetFallbackImage}
-              breakpoints={getProperties(arcSite)?.breakpoints}
-              resizedImageOptions={placeholderResizedImageOptions}
-              resizerURL={getProperties(arcSite)?.resizerURL}
-            />
-          )}
+          <Image
+            {...imageProps}
+            url={imageURL !== '' ? imageURL : targetFallbackImage}
+            alt={imageURL !== '' ? itemTitle : imageProps?.primaryLogoAlt}
+            resizedImageOptions={imageURL !== '' ? resizedImageOptions : placeholderResizedImageOptions}
+          />
         </a>
-      ) : <div className="simple-list-placeholder" />}
+      ) : null}
       {showHeadline && itemTitle !== '' ? (
         <a
           className="simple-list-headline-anchor"

diff --git a/blocks/simple-list-block/features/simple-list/_children/story-item.test.jsx b/blocks/simple-list-block/features/simple-list/_children/story-item.test.jsx
@@ -14,21 +14,12 @@ jest.mock('fusion:context', () => ({
   })),
 }));
 
-jest.mock('fusion:properties', () => (jest.fn(() => ({
-  fallbackImage: 'placeholder.jpg',
-}))));
-
 describe('Story item', () => {
   it('renders title if title provided', () => {
     const testText = 'Man Bites Dog';
     const wrapper = mount(<StoryItem itemTitle={testText} showHeadline showImage />);
     expect(wrapper.text()).toBe(testText);
   });
-  it('renders placeholder if no props provided', () => {
-    const wrapper = mount(<StoryItem />);
-
-    expect(wrapper.find('.simple-list-placeholder').length).toBe(1);
-  });
   it('renders no title if no title provided', () => {
     const wrapper = mount(<StoryItem />);
 

diff --git a/blocks/simple-list-block/features/simple-list/default.jsx b/blocks/simple-list-block/features/simple-list/default.jsx
@@ -2,36 +2,27 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { useContent } from 'fusion:content';
-import { useFusionContext } from 'fusion:context';
 import { LazyLoad, isServerSide } from '@wpmedia/engine-theme-sdk';
-import { extractResizedParams } from '@wpmedia/resizer-image-block';
+import { extractResizedParams, extractImageFromStory } from '@wpmedia/resizer-image-block';
 import { PrimaryFont } from '@wpmedia/shared-styles';
 import getProperties from 'fusion:properties';
 import Consumer from 'fusion:consumer';
 import StoryItem from './_children/story-item';
 import './simple-list.scss';
 
-// helpers start
-const extractImage = (storyObject) => storyObject.promo_items
-  && storyObject.promo_items.basic
-  && storyObject.promo_items.basic.type === 'image'
-  && storyObject.promo_items.basic.url;
-
 const unserializeStory = (arcSite) => (acc, storyObject) => {
   if (storyObject.websites?.[arcSite]) {
     return acc.concat({
       id: storyObject._id,
       itemTitle: storyObject.headlines.basic,
-      imageURL: extractImage(storyObject) || '',
+      imageURL: extractImageFromStory(storyObject) || '',
       websiteURL: storyObject.websites[arcSite].website_url || '',
       resizedImageOptions: extractResizedParams(storyObject),
     });
   }
   return acc;
 };
 
-// helpers end
-
 @Consumer
 class SimpleListWrapper extends Component {
   constructor(props) {
@@ -40,16 +31,32 @@ class SimpleListWrapper extends Component {
       placeholderResizedImageOptions: {},
     };
     const { lazyLoad = false } = props.customFields || {};
+    const {
+      websiteDomain, fallbackImage, primaryLogoAlt, breakpoints, resizerURL,
+    } = getProperties(props.arcSite) || {};
 
     this.lazyLoad = lazyLoad;
     this.isAdmin = props.isAdmin;
+    this.websiteDomain = websiteDomain;
+    this.fallbackImage = fallbackImage;
+    this.imageProps = {
+      smallWidth: 274,
+      smallHeight: 183,
+      mediumWidth: 274,
+      mediumHeight: 183,
+      largeWidth: 274,
+      largeHeight: 183,
+      primaryLogoAlt,
+      breakpoints,
+      resizerURL,
+    };
 
     this.fetchPlaceholder();
   }
 
   getFallbackImageURL() {
-    const { arcSite, deployment, contextPath } = this.props;
-    let targetFallbackImage = getProperties(arcSite).fallbackImage;
+    const { deployment, contextPath } = this.props;
+    let targetFallbackImage = this.fallbackImage;
 
     if (!targetFallbackImage.includes('http')) {
       targetFallbackImage = deployment(`${contextPath}/${targetFallbackImage}`);
@@ -80,12 +87,15 @@ class SimpleListWrapper extends Component {
 
     const { placeholderResizedImageOptions } = this.state;
     const targetFallbackImage = this.getFallbackImageURL();
+
     return (
       <LazyLoad enabled={this.lazyLoad && !this.isAdmin}>
         <SimpleList
           {...this.props}
           placeholderResizedImageOptions={placeholderResizedImageOptions}
           targetFallbackImage={targetFallbackImage}
+          websiteDomain={this.websiteDomain}
+          imageProps={this.imageProps}
         />
       </LazyLoad>
     );
@@ -94,6 +104,8 @@ class SimpleListWrapper extends Component {
 
 const SimpleList = (props) => {
   const {
+    arcSite,
+    websiteDomain,
     customFields: {
       listContentConfig: {
         contentService = '',
@@ -106,14 +118,9 @@ const SimpleList = (props) => {
     id = '',
     placeholderResizedImageOptions,
     targetFallbackImage,
+    imageProps,
   } = props;
 
-  const { arcSite } = useFusionContext();
-
-  const {
-    websiteDomain,
-  } = getProperties(arcSite);
-
   // need to inject the arc site here into use content
   const { content_elements: contentElements = [] } = useContent({
     source: contentService,
@@ -125,7 +132,7 @@ const SimpleList = (props) => {
           basic
         }
         website_url
-        ${showImage ? `promo_items {
+        promo_items {
           basic {
             type
             url
@@ -143,8 +150,9 @@ const SimpleList = (props) => {
                 }
               }
             }
+            type
           }
-        }` : null}
+        }
         websites {
           ${arcSite} {
             website_url
@@ -157,11 +165,11 @@ const SimpleList = (props) => {
   return (
     <div key={id} className="list-container layout-section">
       { title
-        && (
-        <PrimaryFont as="div" className="list-title">
-          {title}
-        </PrimaryFont>
-        )}
+        ? (
+          <PrimaryFont as="div" className="list-title">
+            {title}
+          </PrimaryFont>
+        ) : null}
       {
         contentElements.reduce(unserializeStory(arcSite), []).map(({
           id: listItemId, itemTitle, imageURL, websiteURL, resizedImageOptions,
@@ -180,6 +188,7 @@ const SimpleList = (props) => {
               placeholderResizedImageOptions={placeholderResizedImageOptions}
               targetFallbackImage={targetFallbackImage}
               arcSite={arcSite}
+              imageProps={imageProps}
             />
             <hr />
           </React.Fragment>

diff --git a/blocks/simple-list-block/features/simple-list/default.test.jsx b/blocks/simple-list-block/features/simple-list/default.test.jsx
@@ -146,6 +146,7 @@ describe('Simple list', () => {
 
     const wrapper = mount(<SimpleList
       customFields={customFields}
+      arcSite="the-sun"
       deployment={jest.fn((path) => path)}
     />);
 
@@ -166,6 +167,7 @@ describe('Simple list', () => {
 
     const wrapper = mount(<SimpleList
       customFields={customFields}
+      arcSite="the-sun"
       deployment={jest.fn((path) => path)}
     />);
 
@@ -175,7 +177,10 @@ describe('Simple list', () => {
 
 describe('Simple list', () => {
   it('should render content only for the arcSite', () => {
-    const wrapper = mount(<SimpleList deployment={jest.fn((path) => path)} />);
+    const wrapper = mount(<SimpleList
+      arcSite="the-sun"
+      deployment={jest.fn((path) => path)}
+    />);
 
     expect(wrapper.find('StoryItem')).toHaveLength(2);
   });