Load, display and edit entries from test repo and github

src/components/ControlPane.js

@@ -8,8 +8,8 @@ export default class ControlPane extends React.Component {
     return React.createElement(widget.Control, {
       key: field.get('name'),
       field: field,
-      value: entry.get(field.get('name')),
-      onChange: (value) => this.props.onChange(entry.set(field.get('name'), value))
+      value: entry.getIn(['data', field.get('name')]),
+      onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value))
     });
   }
 
@@ -18,7 +18,7 @@ export default class ControlPane extends React.Component {
     if (!collection) { return null; }
 
     return <div>
-      {collection.get('fields').map((field) => <div>{this.controlFor(field)}</div>)}
+      {collection.get('fields').map((field) => <div key={field.get('names ')}>{this.controlFor(field)}</div>)}
     </div>;
   }
 }

src/components/EntryEditor.js

@@ -19,14 +19,23 @@ export default class EntryEditor extends React.Component {
     return <div>
       <h1>Entry in {collection.get('label')}</h1>
       <h2>{entry && entry.get('title')}</h2>
-      <div className="cms-container">
-        <div className="cms-control-pane">
+      <div className="cms-container" style={styles.container}>
+        <div className="cms-control-pane" style={styles.pane}>
           <ControlPane collection={collection} entry={this.state.entry} onChange={this.handleChange}/>
         </div>
-        <div className="cms-preview-pane">
+        <div className="cms-preview-pane" style={styles.pane}>
           <PreviewPane collection={collection} entry={this.state.entry}/>
         </div>
       </div>
     </div>;
   }
 }
+
+const styles = {
+  container: {
+    display: 'flex'
+  },
+  pane: {
+    width: '50%'
+  }
+};

src/components/PreviewPane.js

@@ -8,7 +8,7 @@ export default class PreviewPane extends React.Component {
     return React.createElement(widget.Preview, {
       key: field.get('name'),
       field: field,
-      value: entry.get(field.get('name'))
+      value: entry.getIn(['data', field.get('name')])
     });
   }
 

src/components/Widgets/UnknownControl.js

@@ -3,7 +3,6 @@ import React from 'react';
 export default class UnknownControl extends React.Component {
   render() {
     const { field } = this.props;
-    console.log('field: %o', field.toObject());
 
     return <div>No control for widget '{field.get('widget')}'.</div>;
   }