move to initializer for final package

Expects a div id
Expects a function to call for opening templates

public/index.html

@@ -51,5 +51,9 @@
     function openInCbox(url){
       alert('Would have opened in colorbox on server: ' + url);
     }
+    initTemplateBrowser({
+      divId: 'root',
+
+    })
   </script>
 </html>

specs/features/users-can-open-templates.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Browser from '../../src/components/Browser';
+import create from '../spec-helpers';
+
+describe('Feature: Users can open templates', () => {
+  it('calls the attached function with expected params', () => {
+    const templates = [ 
+      create('template', {id: 23, type: 'TextOnly'})
+    ];
+    const openTemplate = jest.fn( () => {} );
+    const app = mount(<Browser templates={templates} onTemplateOpen={ openTemplate } />);
+
+    app.find('Template').simulate('click');
+
+    expect(openTemplate.mock.calls[0]).toEqual([23, 'TextOnly']);
+  });
+
+});

src/components/Browser.js

@@ -77,7 +77,12 @@ class Browser extends Component {
   render() {
     const tags = this.getTags();
     const filteredTemplates = this.getFilteredTemplates().map( (template, i) => {
-      return(<Template key={`template-item-${i}`} template={ template } options={ this.state.templateOptions } />);
+      return(
+        <Template key={`template-item-${i}`}
+          template={ template }
+          openTemplate={ this.props.onTemplateOpen }
+          options={ this.state.templateOptions } />
+      );
     });
     const page = this.state.page || 1;
     const templates = PaginationPane.paginate(filteredTemplates, page)

src/components/Template.js

@@ -3,7 +3,6 @@ import TemplateFeatures from './TemplateFeatures';
 import LoadingSpinner from './LoadingSpinner';
 import hoverIntent from 'hoverintent';
 import { padLeft } from '../helpers/StringHelpers';
-import { openTemplateEditorUrl } from '../helpers/ExternalServices';
 import './Template.css';
 
 class Template extends Component {
@@ -45,7 +44,10 @@ class Template extends Component {
 
   handleClickOnTemplate (e) {
     e.preventDefault();
-    openTemplateEditorUrl( this.createLink() );
+    this.props.openTemplate(
+      this.props.template.id,
+      this.props.template.type
+    )
   }
 
   handleHoverOn () {

src/index.js

@@ -4,7 +4,19 @@ import Browser from './components/Browser';
 
 let templates = require('./stores/live-data-faker').default;
 
-ReactDOM.render(
-  <Browser templates={ templates } />,
-  document.getElementById('root')
-);
+/*
+  Required options:
+    divId: (string) id of the div that will house the browser
+    onTemplateOpen: (function(templateId)) function to call when opening a template it
+      will recieve the following:
+        templateId: (int) the id of the template opened
+        templateTypeString: (string) the type of template. Eg: 'TextOnly'
+*/
+function initTemplateBrowser (options) {
+  ReactDOM.render(
+    <Browser templates={ templates } />,
+    document.getElementById(options.divId)
+  );
+}
+
+window.initTemplateBrowser = initTemplateBrowser;