Merge pull request #12271 from bbc/WSTEAM1-1550-no-unstable-nested-co…

…mponents WSTEAM1-1550: Fixes no-unstable-nested-components linting rules on eslint-config-airbnb 19.0.4
bbc · Jan 21, 2025 · ff06f70 · ff06f70
2 parents b3c415c + 0efc304
commit ff06f70
Show file tree

Hide file tree

Showing 8 changed files with 357 additions and 218 deletions.
diff --git a/src/app/components/MostRead/index.tsx b/src/app/components/MostRead/index.tsx
@@ -3,7 +3,7 @@ import { RequestContext } from '#contexts/RequestContext';
 import useToggle from '#hooks/useToggle';
 import { getMostReadEndpoint } from '#app/lib/utilities/getUrlHelpers/getMostReadUrls';
 import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
-import { OptimizelyContext } from '@optimizely/react-sdk';
+import { OptimizelyContext, ReactSDKClient } from '@optimizely/react-sdk';
 import { ServiceContext } from '../../contexts/ServiceContext';
 import Canonical from './Canonical';
 import Amp from './Amp';
@@ -39,6 +39,72 @@ interface MostReadProps {
   sendOptimizelyEvents?: boolean;
 }
 
+// We render amp on ONLY STY, CSP and ARTICLE pages using amp-list.
+const AmpMostRead = ({
+  pageType,
+  className,
+  mobileDivider,
+  headingBackgroundColour,
+  endpoint,
+  size,
+}: {
+  pageType: PageTypes;
+  className: string;
+  mobileDivider: boolean;
+  headingBackgroundColour: string;
+  endpoint: string;
+  size: Size;
+}) =>
+  mostReadAmpPageTypes.includes(pageType) ? (
+    <MostReadSection {...(className && { className })}>
+      <MostReadSectionLabel
+        mobileDivider={mobileDivider}
+        backgroundColor={headingBackgroundColour}
+      />
+      <Amp
+        endpoint={`${getEnvConfig().SIMORGH_MOST_READ_CDN_URL}${endpoint}`}
+        size={size}
+      />
+    </MostReadSection>
+  ) : null;
+
+// Do not render on Canonical if data is not provided
+const CanonicalMostRead = ({
+  data,
+  className,
+  mobileDivider,
+  headingBackgroundColour,
+  columnLayout,
+  size,
+  eventTrackingData,
+}: {
+  data: MostReadData | undefined;
+  className: string;
+  mobileDivider: boolean;
+  headingBackgroundColour: string;
+  columnLayout?: ColumnLayout;
+  size: Size;
+  eventTrackingData: {
+    optimizely?: ReactSDKClient | null | undefined;
+    optimizelyMetricNameOverride?: string | undefined;
+    componentName: string;
+  };
+}) =>
+  data ? (
+    <MostReadSection className={className}>
+      <MostReadSectionLabel
+        mobileDivider={mobileDivider}
+        backgroundColor={headingBackgroundColour}
+      />
+      <Canonical
+        data={data}
+        columnLayout={columnLayout}
+        size={size}
+        eventTrackingData={eventTrackingData}
+      />
+    </MostReadSection>
+  ) : null;
+
 const MostRead = ({
   data,
   columnLayout = 'multiColumn',
@@ -73,21 +139,6 @@ const MostRead = ({
     isBff,
   });
 
-  // We render amp on ONLY STY, CSP and ARTICLE pages using amp-list.
-  const AmpMostRead = () =>
-    mostReadAmpPageTypes.includes(pageType) ? (
-      <MostReadSection {...(className && { className })}>
-        <MostReadSectionLabel
-          mobileDivider={mobileDivider}
-          backgroundColor={headingBackgroundColour}
-        />
-        <Amp
-          endpoint={`${getEnvConfig().SIMORGH_MOST_READ_CDN_URL}${endpoint}`}
-          size={size}
-        />
-      </MostReadSection>
-    ) : null;
-
   const eventTrackingData = {
     ...blockLevelEventTrackingData,
     ...(sendOptimizelyEvents && {
@@ -96,24 +147,26 @@ const MostRead = ({
     }),
   };
 
-  // Do not render on Canonical if data is not provided
-  const CanonicalMostRead = () =>
-    data ? (
-      <MostReadSection className={className}>
-        <MostReadSectionLabel
-          mobileDivider={mobileDivider}
-          backgroundColor={headingBackgroundColour}
-        />
-        <Canonical
-          data={data}
-          columnLayout={columnLayout}
-          size={size}
-          eventTrackingData={eventTrackingData}
-        />
-      </MostReadSection>
-    ) : null;
-
-  return isAmp ? <AmpMostRead /> : <CanonicalMostRead />;
+  return isAmp ? (
+    <AmpMostRead
+      pageType={pageType}
+      className={className}
+      mobileDivider={mobileDivider}
+      headingBackgroundColour={headingBackgroundColour}
+      endpoint={endpoint}
+      size={size}
+    />
+  ) : (
+    <CanonicalMostRead
+      data={data}
+      className={className}
+      mobileDivider={mobileDivider}
+      headingBackgroundColour={headingBackgroundColour}
+      columnLayout={columnLayout}
+      size={size}
+      eventTrackingData={eventTrackingData}
+    />
+  );
 };
 
 export default MostRead;
diff --git a/src/app/legacy/containers/CpsOnwardJourney/index.jsx b/src/app/legacy/containers/CpsOnwardJourney/index.jsx
@@ -90,6 +90,28 @@ const OptionallyRenderedSkipWrapper = ({
     children
   );
 
+const CpsOnwardJourneyWrapper = ({
+  children,
+  parentColumns,
+  labelId,
+  a11yAttributes,
+  className,
+  dir,
+}) =>
+  parentColumns ? (
+    <Wrapper
+      data-e2e={labelId}
+      {...a11yAttributes}
+      {...(className && { className })}
+    >
+      {children}
+    </Wrapper>
+  ) : (
+    <GridWrapper data-e2e={labelId} {...a11yAttributes}>
+      <LegacyGridItemLarge dir={dir}>{children}</LegacyGridItemLarge>
+    </GridWrapper>
+  );
+
 const CpsOnwardJourney = ({
   className = '',
   LabelComponent = StyledSectionLabel,
@@ -116,27 +138,18 @@ const CpsOnwardJourney = ({
     'aria-labelledby': labelId,
   };
 
-  const CpsOnwardJourneyWrapper = ({ children }) =>
-    parentColumns ? (
-      <Wrapper
-        data-e2e={labelId}
-        {...a11yAttributes}
-        {...(className && { className })}
-      >
-        {children}
-      </Wrapper>
-    ) : (
-      <GridWrapper data-e2e={labelId} {...a11yAttributes}>
-        <LegacyGridItemLarge dir={dir}>{children}</LegacyGridItemLarge>
-      </GridWrapper>
-    );
-
   if (!content.length) return null;
   const hasSingleContent = content.length === 1;
   const [singleContent] = content;
 
   return (
-    <CpsOnwardJourneyWrapper>
+    <CpsOnwardJourneyWrapper
+      parentColumns={parentColumns}
+      labelId={labelId}
+      a11yAttributes={a11yAttributes}
+      className={className}
+      dir={dir}
+    >
       <OptionallyRenderedSkipWrapper skipLink={skipLink} service={service}>
         {title ? (
           <LabelComponent

diff --git a/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/index.jsx b/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/index.jsx
@@ -32,10 +32,23 @@ const StyledSectionLabel = styled(SectionLabel)`
     margin-bottom: ${GEL_SPACING_TRPL};
   }
 `;
+
 const InlineDiv = styled.div`
   display: inline;
 `;
 
+const getAmpImageComponent =
+  ({ image, altText }) =>
+  () => (
+    <amp-img
+      layout="responsive"
+      width="16"
+      height="9"
+      src={image}
+      alt={altText}
+    />
+  );
+
 const RecentVideoEpisodes = ({ masterBrand, episodes }) => {
   const { script, service, dir, timezone, datetimeLocale, translations } =
     useContext(ServiceContext);
@@ -101,15 +114,7 @@ const RecentVideoEpisodes = ({ masterBrand, episodes }) => {
                 locale: datetimeLocale,
               })}
               {...(isAmp && {
-                as: () => (
-                  <amp-img
-                    layout="responsive"
-                    width="16"
-                    height="9"
-                    src={episode.image}
-                    alt={episode.altText}
-                  />
-                ),
+                as: getAmpImageComponent(episode),
               })}
             />
             {/* these must be concatenated for screen reader UX */}

diff --git a/src/app/legacy/containers/PageHandlers/withOptimizelyProvider/index.test.jsx b/src/app/legacy/containers/PageHandlers/withOptimizelyProvider/index.test.jsx
@@ -21,9 +21,9 @@ const props = {
   },
 };
 
-const TestComponent = () => {
-  const Component = () => <h1>Hola Optimizely</h1>;
+const Component = () => <h1>Hola Optimizely</h1>;
 
+const TestComponent = () => {
   const OptimizelyComponent = withOptimizelyProvider(Component);
 
   const memoizedServiceContextValue = useMemo(

diff --git a/src/app/lib/utilities/episodeAvailability/withMediaError/index.jsx b/src/app/lib/utilities/episodeAvailability/withMediaError/index.jsx
@@ -2,21 +2,23 @@ import React from 'react';
 import { EPISODE_STATUS } from '../episodeStatus';
 import ErrorMessage from '../ErrorMessage';
 
+const getErrorComponent = episodeAvailability => errorProps => (
+  <ErrorMessage {...errorProps} episodeAvailability={episodeAvailability} />
+);
+
 const withMediaError = PageComponent => {
   const MediaErrorComponent = props => {
     const { pageData: { episodeAvailability } = null } = props;
     const mediaIsAvailable =
       episodeAvailability === EPISODE_STATUS.EPISODE_IS_AVAILABLE;
 
-    const ErrorComponent = errorProps => (
-      <ErrorMessage {...errorProps} episodeAvailability={episodeAvailability} />
-    );
-
     return (
       <PageComponent
         {...props}
         mediaIsAvailable={mediaIsAvailable}
-        MediaError={mediaIsAvailable ? () => null : ErrorComponent}
+        MediaError={
+          mediaIsAvailable ? () => null : getErrorComponent(episodeAvailability)
+        }
       />
     );
   };