Merge pull request #4536 from bbc/social-embed-provider-name

Remove dependency on fixture for onRender prop
BBC-archive · Aug 19, 2021 · f4f7a0d · f4f7a0d
2 parents f0b7e2c + b5cbfa4
commit f4f7a0d
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "@bbc/psammead-rich-text-transforms": "2.0.6",
     "@bbc/psammead-script-link": "3.0.20",
     "@bbc/psammead-section-label": "7.1.0",
-    "@bbc/psammead-social-embed": "3.2.0",
+    "@bbc/psammead-social-embed": "3.2.1",
     "@bbc/psammead-story-promo": "8.0.21",
     "@bbc/psammead-story-promo-list": "6.0.19",
     "@bbc/psammead-storybook-helpers": "9.0.14",

diff --git a/packages/components/psammead-social-embed/CHANGELOG.md b/packages/components/psammead-social-embed/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 | Version       | Description                                                                                                 |
 | ------------- | ----------------------------------------------------------------------------------------------------------- |
+| 3.2.1 | [PR#4536](https://github.com/bbc/psammead/pull/4536) Remove use of fixtures for provider name |
 | 3.2.0 | [PR#4535](https://github.com/bbc/psammead/pull/4535) Add onRender prop |
 | 3.1.16 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles |
 | 3.1.15 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies |

diff --git a/packages/components/psammead-social-embed/package.json b/packages/components/psammead-social-embed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-social-embed",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-social-embed/src/Canonical/index.jsx b/packages/components/psammead-social-embed/src/Canonical/index.jsx
@@ -1,8 +1,8 @@
+/* eslint-disable no-console */
 import React, { memo, useEffect } from 'react';
 import { func, shape, string } from 'prop-types';
 import styled from '@emotion/styled';
 import useScript from './useScript';
-import fixtures from '../fixtures';
 
 const LANDSCAPE_RATIO = '56.25%';
 
@@ -15,6 +15,9 @@ const OEmbed = styled.div`
   justify-content: center;
 `;
 
+const getOnRenderError = providerName =>
+  `onRender callback function not implemented for ${providerName}`;
+
 /**
  * The following object declares a list of supported Canonical providers
  * and their attributes. Not all providers have the same attributes.
@@ -34,6 +37,7 @@ export const providers = {
         window.instgrm.Embeds.process();
       }
     },
+    onLibraryLoad: () => console.error(getOnRenderError('Instagram')),
   },
   twitter: {
     script: 'https://platform.twitter.com/widgets.js',
@@ -48,7 +52,7 @@ export const providers = {
         window.twttr.widgets.load();
       }
     },
-    onSdkLoad: onRender => {
+    onLibraryLoad: onRender => {
       window.twttr.ready(twttr => {
         twttr.events.bind('rendered', onRender);
       });
@@ -70,18 +74,21 @@ export const providers = {
       }
     `,
     enrich: () => {},
+    onLibraryLoad: () => console.error(getOnRenderError('YouTube')),
   },
 };
 
 const CanonicalEmbed = ({ provider, oEmbed, onRender }) => {
-  const isSdkLoaded = useScript(providers[provider].script);
+  const hasLoadedLibrary = useScript(providers[provider].script);
   useEffect(providers[provider].enrich);
 
   useEffect(() => {
-    if (provider === fixtures.twitter.source && isSdkLoaded && onRender) {
-      providers[fixtures.twitter.source].onSdkLoad(onRender);
+    const { onLibraryLoad } = providers[provider];
+
+    if (onRender && hasLoadedLibrary && onLibraryLoad) {
+      onLibraryLoad(onRender);
     }
-  }, [isSdkLoaded]);
+  }, [hasLoadedLibrary]);
 
   return (
     <OEmbed