bug 1520893 - Display spocs (#4680)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -39,6 +39,27 @@ export function isAllowedCSS(property, value) {
     url.slice(5).startsWith(prefix)));
 }
 
+function maybeInjectSpocs(data, spocs) {
+  if (!data || !spocs.positions || !spocs.positions.length) {
+    return data;
+  }
+
+  const recommendations = [...data.recommendations];
+
+  for (let position of spocs.positions) {
+    const {result} = position;
+    if (result) {
+      // Insert spoc into the desired index.
+      recommendations.splice(position.index, 0, result);
+    }
+  }
+
+  return {
+    ...data,
+    recommendations,
+  };
+}
+
 export class _DiscoveryStreamBase extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -116,7 +137,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
           <ImpressionStats rows={rows} dispatch={this.props.dispatch} source={component.type}>
             <CardGrid
               title={component.header && component.header.title}
-              data={component.data}
+              data={maybeInjectSpocs(component.data, component.spocs)}
               feed={component.feed}
               border={component.properties.border}
               type={component.type}
@@ -130,7 +151,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
           <ImpressionStats rows={rows} dispatch={this.props.dispatch} source={component.type}>
             <Hero
               title={component.header && component.header.title}
-              data={component.data}
+              data={maybeInjectSpocs(component.data, component.spocs)}
               border={component.properties.border}
               type={component.type}
               dispatch={this.props.dispatch}

content-src/lib/selectLayoutRender.js

@@ -1,19 +1,5 @@
 import {createSelector} from "reselect";
 
-function calculateSpocs(component, spocs) {
-  let spocIndex = 0;
-  return component.spocs.positions.map(position => {
-    const rickRoll = Math.random();
-    if (spocs.data.spocs[spocIndex] && rickRoll <= component.spocs.probability) {
-      return {
-        ...position,
-        result: spocs.data.spocs[spocIndex++],
-      };
-    }
-    return position;
-  });
-}
-
 export const selectLayoutRender = createSelector(
   // Selects layout, feeds, spocs so that we only recompute if
   // any of these values change.
@@ -26,6 +12,21 @@ export const selectLayoutRender = createSelector(
   // Adds data to each component from feeds. This function only re-runs if one of the inputs change.
   // TODO: calculate spocs
   function layoutRender(layout, feeds, spocs) {
+    let spocIndex = 0;
+
+    function calculateSpocs(component) {
+      return component.spocs.positions.map(position => {
+        const rickRoll = Math.random();
+        if (spocs.data.spocs[spocIndex] && rickRoll <= component.spocs.probability) {
+          return {
+            ...position,
+            result: spocs.data.spocs[spocIndex++],
+          };
+        }
+        return position;
+      });
+    }
+
     return layout.map(row => ({
       ...row,
 
@@ -40,7 +41,7 @@ export const selectLayoutRender = createSelector(
         if (component.spocs && spocs.data.spocs && spocs.data.spocs.length) {
           component.spocs = {
             ...component.spocs,
-            positions: calculateSpocs(component, spocs),
+            positions: calculateSpocs(component),
           };
         }