🚨 [security] Upgrade all of nextjs: 11.1.2 → 12.3.0 (major)

.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
+
+
+
 ## 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 run the admin API
+
+```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/ContentRecommendations.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/FeatureFlagComponent.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/Footer.js

@@ -7,15 +7,15 @@ const sectionStyle = {
     height: '100%'
 };
 
-const imageStyle = {
-    width: '100%'
-};
-
 const Footer = ({clientId}) => {
 
     return (
         <section id="footer" style={sectionStyle}>
-            <img src={`images/${clientId}/footer.png`} style={imageStyle} alt="Footer" />
+
+            <img src={`images/${clientId}/footer.png`}
+                 style={{width: '100%'}}
+                 alt="Footer" />
+
         </section>
     );
 }

component/Header.js

@@ -9,10 +9,6 @@ const sectionStyle = {
     backgroundSize: '100%'
 };
 
-const imageStyle = {
-    width: '100%'
-};
-
 const Header = ({...props}) => {
 
     const { clientId } = props;
@@ -21,7 +17,9 @@ const Header = ({...props}) => {
         <section id="header" style={sectionStyle}>
             <Link href="/">
                 <a>
-                    <img src={`images/${clientId}/header.png`} style={imageStyle} alt="Header" />
+                    <img src={`images/${clientId}/header.png`}
+                         style={{width: '100%'}}
+                         alt="Header" />
                 </a>
             </Link>
         </section>

component/MultiArmBanditComponent.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/TopHeader.js

@@ -5,11 +5,17 @@ export default function TopHeader() {
 
     const navLinks =
         [
-            {   name: "Personalisation",
+            {   name: "Home",
+                path: "/"
+            },
+            {   name: "Latest Deals",
                 path: "/landing"
             },
-            {   name: "CMS",
+            {   name: "News",
                 path: "/cms"
+            },
+            {   name: "Code",
+                path: "https://github.com/jondjones-poc/optimizely-fullstack-demo"
             }
         ];