Add start of EmbedCode templater

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",

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/[email protected]/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;

src/components/EmbedCode/index.js

@@ -0,0 +1,2 @@
+import EmbedCode from './EmbedCode';
+export default EmbedCode;

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,
 };
 

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,
 };
 

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) =>

src/routes/Home/modules/display.js

@@ -5,6 +5,7 @@ const displayOptions = [
   {
     key: 'list',
     name: 'List',
+    layout: 'list',
   },
   {
     key: 'grid',

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', () => {
+
+  });
+});