Content Recs

Author: jondjones

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next"
 }

README.md

@@ -9,14 +9,29 @@ This project makes uses of NextJs, Optimizely Fullstack and the JS SDK.  I want
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/19b26768-2571-46e7-89b3-eefc07ec35c2/deploy-status)](https://app.netlify.com/sites/optimizely-demo/deploys)
 
+## Api
+
+- [API](https://optimizely-demo.netlify.app/.netlify/functions/admin)
+
 ## How To Use ☄️
 
-First, run the development server:
+**Website**: First, run the development server:
 
 ```bash
 npm run dev
 ```
 
+The site will load on `http:localhost:3000`
+
+**API**:  To update or run the admin API run:
+
+```bash
+npm run start-api
+```
+
+The API will load on `http://localhost:9000/admin`
+
+
 Click this button to create a new Github repo, new Netlify project and deploy this example yourself
 
 [![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/jondjones-poc/Fullstack-demo)

component/ABComponent.js

@@ -18,20 +18,15 @@ const sectionStyle = (backgroundColor) => (
 
 const ABComponent = ({...props}) => {
 
-    const { backgroundColor, bannerText } = props;
-
-    const addEvent = () => {
-        console.log("AB Component Event Example")
-        props.optimizelyClient.track('button_click', props.userId);
-    }
+    const { backgroundColor, bannerText, buttonUrl } = props;
 
     return (
 
         <div className="container">
             <header>
             <h2>
                 <strong>
-                A/B/C Experiment
+                    A/B/C Experiment
                 </strong>
             </h2>
             </header>
@@ -45,7 +40,7 @@ const ABComponent = ({...props}) => {
                     {bannerText} today!
                 </div>
 
-                <a className={styles.btnBgstroke} onClick={addEvent} >
+                <a className={styles.btnBgstroke} href={buttonUrl} >
                     Buy now
                 </a>
 

component/Content.js

@@ -0,0 +1,111 @@
+import { useEffect, useState, useCallback  } from "react";
+
+const imageStyle = {
+    backgroundRepeat: 'no-repeat',
+    width: '100%',
+    height: '100%',
+};
+
+const ContentRecommendations= ({...props}) => {
+
+    const { contentRecsKey } = props;
+    const recommendations = useContentRecommendations()
+
+    return (
+      <>
+        <script
+          className="idio-recommendations"
+          data-api-key={contentRecsKey}
+          data-rpp="5"
+          type="text/x-mustache"
+        />
+
+        {recommendations.length > 0 && (
+          <div>
+            <ul className="divided">
+                <ContentRecommendationsList recommendations={recommendations} />
+            </ul>
+          </div>
+        )}
+      </>
+    )
+  }
+
+  function ContentRecommendationsList({ recommendations }) {
+    const formatDate = (date) =>
+      new Date(date).toLocaleString('en', { dateStyle: 'medium' })
+
+    return recommendations.map((recommendation) => (
+        <li  key={recommendation.id}>
+            <article className="box excerpt" >
+                <header>
+                    <span className="date">
+                        {formatDate(recommendation.published)}
+                    </span>
+                        <h3>
+                            <a href="#">
+                            {recommendation.title}
+                            </a>
+                        </h3>
+                    </header>
+                <p>
+                    <img alt={recommendation.title} src={recommendation.main_image_url}  style={imageStyle} />
+                </p>
+                <p>{recommendation.abstract}</p>
+            </article>
+      </li>
+    ))
+  }
+
+  function useContentRecommendations() {
+    const [recommendations, setRecommendations] = useState([])
+
+    useIdioProxy(setRecommendations)
+    useIdioPersonalizationScript()
+
+    return recommendations
+  }
+
+
+  function useIdioProxy(setRecommendations) {
+    const handleAjaxResponse = useCallback(
+      (data, statusCode) => {
+        if (statusCode !== 200) {
+          return
+        }
+
+        setRecommendations(data.content)
+      },
+      [setRecommendations]
+    )
+
+    useEffect(() => {
+      window.idio = new Proxy(
+        {},
+        {
+          get(target, property) {
+            return property === 'r0' ? handleAjaxResponse : target[property]
+          },
+        }
+      )
+
+      return () => delete window.idio
+    }, [handleAjaxResponse])
+  }
+
+
+  function useIdioPersonalizationScript() {
+    useEffect(() => {
+      const script = document.createElement('script')
+      script.async = true
+      script.src = 'https://s.idio.co/ip.js'
+
+      document
+        .querySelector('script')
+        .insertAdjacentElement('beforebegin', script)
+
+      return () => script.remove()
+    }, [])
+  }
+
+  export default ContentRecommendations

component/ContentRecommendations.js

@@ -11,22 +11,37 @@ const featureFlagStyle = {
     backgroundSize: '100%'
 }
 
-const imageStyle = {
-    width: '100%'
-};
-
 const FeatureFlagComponent = ({...props}) => {
 
-    const { userId, optimizelyClient, clientId } = props;
+    const { userId, optimizelyClient, clientId, isFeatureEnabled } = props;
 
-    const addEvent = () => {
+    const addEvent = (optimizelyClient, userId) => {
         optimizelyClient?.track('button_click', userId);
+        console.log('feature_flag_component_click')
     }
 
     return (
-        <div className="container" id="feature-flag" onClick={featureFlagStyle} style={imageStyle}>
-            <img src={`images/${clientId}/feature.png`} style={imageStyle} alt="feature-flag" />
+        <section id="features">
+            <div className="container" id="feature-container">
+            <header>
+                <h2>
+                <strong>
+                    {"Feature Flag Example: " + isFeatureEnabled}
+                </strong>
+                </h2>
+            </header>
+            {isFeatureEnabled &&
+                <div className="container"
+                     id="feature-flag"
+                     onClick={() => addEvent(optimizelyClient, userId)} style={featureFlagStyle}>
+
+                    <img src={`images/${clientId}/feature.png`}
+                         style={{width: '100%'}}
+                         alt="feature-flag" />
+                </div>
+            }
         </div>
+      </section>
     )
 }
 

component/FeatureFlagComponent.js

@@ -1,14 +1,6 @@
 import React from 'react'
 import Link from "next/link";
 
-const sectionStyle = {
-  width: '100%'
-};
-
-const imageStyle = {
-  width: '100%'
-};
-
 const MultiArmBanditComponent = ({...props}) => {
 
     const { userId, postId, optimizelyClient, clientId } = props;
@@ -28,12 +20,14 @@ const MultiArmBanditComponent = ({...props}) => {
                 </h2>
               </header>
 
-              <div id="multi-arm-bandit" style={sectionStyle}>
+              <div id="multi-arm-bandit" style={{width: '100%'}}>
                 <Link href="/">
                   <a onClick={() => bannerClicked(optimizelyClient)}>
-                    <img src={`images/${clientId}/${postId}.png`} style={imageStyle} alt="multi-arm bandit" />
+                    <img src={`images/${clientId}/${postId}.png`}
+                         style={{width: '100%'}}
+                         alt="multi-arm bandit" />
                   </a>
-                </Link>{" "}
+                </Link>
               </div>
         </div>
     )

component/MultiArmBanditComponent.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { fetchContentfulEntry } from '../utils/contentfulConnector';
+
+const VariationContainerRenderer = ({...props}) => {
+
+    let [ variationItem, setVariationContent ] = useState('');
+
+    const { item, variationId, userId, optimizelyClient } = props;
+    const { content } = item;
+
+    const entityId = content?.fields?.meta[variationId];
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const result = await fetchContentfulEntry(entityId);
+            setVariationContent(result);
+          }
+          fetchData().catch(console.error);
+    }, [entityId]);
+
+    const buttonClicked = (optimizelyClient, userId, entityId) => {
+        optimizelyClient?.track('blog_post_click', userId, {variation: entityId});
+        console.log(`Blog post ${entityId} clicked`)
+    }
+
+    return (
+        <article className="box post">
+            <header>
+                <h2>
+                    {variationItem.title}
+                </h2>
+            </header>
+
+            <a href="#" className="image featured">
+                <img src={variationItem?.heroImage?.fields.file.url} alt={item.slug} />
+            </a>
+
+            <div className="header" dangerouslySetInnerHTML={{ __html: variationItem.content }} />
+
+            <ul className="actions" >
+                <li>
+                    <div className="button icon solid fa-file" onClick={() => buttonClicked(optimizelyClient, userId, entityId)}>
+                        Continue Reading...
+                    </div>
+                </li>
+            </ul>
+        </article>
+    )
+}
+
+export default VariationContainerRenderer;

component/VariationContainerRenderer.js

@@ -0,0 +1,33 @@
+const data = require('./data.json');
+
+const headers = {
+    'content-type': 'application/json' ,
+    'Access-Control-Allow-Origin': "*"
+};
+
+exports.handler = async (event, context) => {
+
+    const sdkKey = process.env.NEXT_PUBLIC_API_KEY;
+    const projectId = process.env.NEXT_PUBLIC_DEFAULT_PROJECT_ID;
+
+    const axios = require('axios');
+    axios.defaults.headers.common['Authorization'] = sdkKey;
+
+    axios.get(`https://api.optimizely.com/v2/environments?project_id=${projectId}`)
+        .then((response) => {
+            response.data.map(x => {
+                return {
+                    name: x.name,
+                    datafile: JSON.stringify(x.datafile)
+                };
+            });
+        }).catch((e) => {
+            console.log(e);
+        });
+
+    return {
+        body: JSON.stringify(data),
+        statusCode: 200,
+        headers: headers
+    };
+};