From c5886c6408bbcf7b78e034a546e332264c6f552a Mon Sep 17 00:00:00 2001
From: James Greenaway <james@greenaway.io>
Date: Thu, 2 Jun 2016 17:33:44 +0100
Subject: [PATCH] Add start of EmbedCode templater

---
 package.json                                  |  1 +
 src/components/EmbedCode/EmbedCode.js         | 22 +++++++++++++++++++
 src/components/EmbedCode/index.js             |  2 ++
 .../components/DisplayPicker/DisplayPicker.js | 16 +++++++++-----
 .../DisplayPicker/DisplayPickerEmbedCode.js   |  9 --------
 .../DisplayPicker/DisplayPickerStage.js       |  8 +++----
 .../Home/containers/DisplayPickerContainer.js | 10 +++++----
 src/routes/Home/modules/display.js            |  1 +
 tests/components/EmbedCode.spec.js            |  8 +++++++
 9 files changed, 53 insertions(+), 24 deletions(-)
 create mode 100644 src/components/EmbedCode/EmbedCode.js
 create mode 100644 src/components/EmbedCode/index.js
 delete mode 100644 src/routes/Home/components/DisplayPicker/DisplayPickerEmbedCode.js
 create mode 100644 tests/components/EmbedCode.spec.js

diff --git a/package.json b/package.json
index d104acf..c417bf0 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
     "redux-thunk": "^2.0.0",
     "rimraf": "^2.5.1",
     "sass-loader": "^3.0.0",
+    "string-template": "^1.0.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.6",
     "webpack": "^1.12.14",
diff --git a/src/components/EmbedCode/EmbedCode.js b/src/components/EmbedCode/EmbedCode.js
new file mode 100644
index 0000000..2806859
--- /dev/null
+++ b/src/components/EmbedCode/EmbedCode.js
@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+import format from 'string-template';
+
+
+const template = `
+<script src="https://npmcdn.com/react@^15.0/dist/react.min.js"></script>
+<script src="https://npmcdn.com/react-dom@^15.0/dist/react-dom.min.js"></script>
+<script src="https://npmcdn.com/react-climb-social@2.0.0-alpha.5/dist/react-climb-social.min.js"></script>
+<div data-climb data-collection-id="{id}" data-layout="{layout}"></div>
+`.replace(/\r?\n|\r/g, '');
+
+
+const EmbedCode = ({ collectionId: id, layoutName: layout }) => (
+  <code>{format(template, { id, layout })}</code>
+);
+
+EmbedCode.propTypes = {
+  collectionId: PropTypes.string.isRequired,
+  layoutName: PropTypes.string.isRequired,
+};
+
+export default EmbedCode;
diff --git a/src/components/EmbedCode/index.js b/src/components/EmbedCode/index.js
new file mode 100644
index 0000000..b79b212
--- /dev/null
+++ b/src/components/EmbedCode/index.js
@@ -0,0 +1,2 @@
+import EmbedCode from './EmbedCode';
+export default EmbedCode;
diff --git a/src/routes/Home/components/DisplayPicker/DisplayPicker.js b/src/routes/Home/components/DisplayPicker/DisplayPicker.js
index 82439ed..a729a3c 100644
--- a/src/routes/Home/components/DisplayPicker/DisplayPicker.js
+++ b/src/routes/Home/components/DisplayPicker/DisplayPicker.js
@@ -1,11 +1,12 @@
 import React, { PropTypes } from 'react';
+
 import Navigation from './DisplayPickerNavigation';
 import Stage from './DisplayPickerStage';
-import EmbedCode from './DisplayPickerEmbedCode';
-
+import EmbedCode from 'components/EmbedCode';
 import FastInput from 'components/FastInput';
 
-const DisplayPicker = ({ setCollection, collectionId, ...props }) => (
+
+const DisplayPicker = ({ setCollection, collectionId, selected, ...props }) => (
   <div>
     <FastInput
       type="text"
@@ -16,6 +17,7 @@ const DisplayPicker = ({ setCollection, collectionId, ...props }) => (
     {collectionId?
       <div>
         <Navigation
+          selected={selected}
           {...props}
         />
 
@@ -24,7 +26,11 @@ const DisplayPicker = ({ setCollection, collectionId, ...props }) => (
           {...props}
         />
 
-        <EmbedCode />
+        <EmbedCode
+          collectionId={collectionId}
+          layoutName={selected.layout}
+          {...props}
+        />
       </div>
       :
       <div>
@@ -38,9 +44,7 @@ const DisplayPicker = ({ setCollection, collectionId, ...props }) => (
 
 DisplayPicker.propTypes = {
   collectionId: PropTypes.string,
-  options: PropTypes.arrayOf(PropTypes.object).isRequired,
   selected: PropTypes.object.isRequired,
-  setDisplay: PropTypes.func.isRequired,
   setCollection: PropTypes.func.isRequired,
 };
 
diff --git a/src/routes/Home/components/DisplayPicker/DisplayPickerEmbedCode.js b/src/routes/Home/components/DisplayPicker/DisplayPickerEmbedCode.js
deleted file mode 100644
index 3850057..0000000
--- a/src/routes/Home/components/DisplayPicker/DisplayPickerEmbedCode.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const DisplayPickerEmbedCode = () => (
-  <div>
-    <p>Embed Code</p>
-  </div>
-);
-
-export default DisplayPickerEmbedCode;
diff --git a/src/routes/Home/components/DisplayPicker/DisplayPickerStage.js b/src/routes/Home/components/DisplayPicker/DisplayPickerStage.js
index ab13e32..7cac28b 100644
--- a/src/routes/Home/components/DisplayPicker/DisplayPickerStage.js
+++ b/src/routes/Home/components/DisplayPicker/DisplayPickerStage.js
@@ -2,18 +2,16 @@ import React, { PropTypes } from 'react';
 import { ClimbView } from 'react-climb-social';
 
 
-const DisplayPickerStage = ({ collectionId, layout, ...props }) => (
+const DisplayPickerStage = ({ layout, ...props }) => (
   <ClimbView
-    collectionId={collectionId}
     View={layout}
-    domain="http://curate.vm-08.graph.uk"
+    hostname="curate.vm-08.graph.uk"
     {...props}
   />
 );
 
 DisplayPickerStage.propTypes = {
-  name: PropTypes.string,
-  layout: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  layout: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   collectionId: PropTypes.string,
 };
 
diff --git a/src/routes/Home/containers/DisplayPickerContainer.js b/src/routes/Home/containers/DisplayPickerContainer.js
index 8eb740b..426e73d 100644
--- a/src/routes/Home/containers/DisplayPickerContainer.js
+++ b/src/routes/Home/containers/DisplayPickerContainer.js
@@ -1,14 +1,16 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { actions as displayActions } from '../modules/display';
+import { findView } from 'react-climb-social';
 
 import DisplayPicker from '../components/DisplayPicker';
 
 
-const mapStateToProps = (state) => ({
-  collectionId: state.display.collectionId,
-  options: state.display.options,
-  selected: state.display.selected,
+const mapStateToProps = ({ display }) => ({
+  collectionId: display.collectionId,
+  options: display.options,
+  selected: display.selected,
+  layout: findView(display.selected.layout),
 });
 
 const mapDispatchToProps = (dispatch) =>
diff --git a/src/routes/Home/modules/display.js b/src/routes/Home/modules/display.js
index 5b447ca..4336f15 100644
--- a/src/routes/Home/modules/display.js
+++ b/src/routes/Home/modules/display.js
@@ -5,6 +5,7 @@ const displayOptions = [
   {
     key: 'list',
     name: 'List',
+    layout: 'list',
   },
   {
     key: 'grid',
diff --git a/tests/components/EmbedCode.spec.js b/tests/components/EmbedCode.spec.js
new file mode 100644
index 0000000..4330f41
--- /dev/null
+++ b/tests/components/EmbedCode.spec.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import EmbedCode from 'components/EmbedCode/EmbedCode'
+
+describe('(Component) EmbedCode', () => {
+  it('should exist', () => {
+
+  });
+});