Moved draft state for an entry (when in edit mode) to Redux

src/components/ControlPane.js

@@ -3,15 +3,15 @@ import Widgets from './Widgets';
 
 export default class ControlPane extends React.Component {
   controlFor(field) {
-    const { entry } = this.props;
+    const { entry, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = Widgets[field.get('widget')] || Widgets._unknown;
     return React.createElement(widget.Control, {
       key: field.get('name'),
       field: field,
       value: entry.getIn(['data', field.get('name')]),
-      onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value)),
-      onAddMedia: (mediaFile) => this.props.onAddMedia(mediaFile),
-      onRemoveMedia: (mediaFile) => this.props.onRemoveMedia(mediaFile)
+      onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
+      onAddMedia: onAddMedia,
+      onRemoveMedia: onRemoveMedia
     });
   }
 

src/components/EntryEditor.js

@@ -1,44 +1,11 @@
 import React from 'react';
-import Immutable from 'immutable';
 import ControlPane from './ControlPane';
 import PreviewPane from './PreviewPane';
 
 export default class EntryEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      entry: props.entry,
-      mediaFiles: Immutable.List()
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleAddMedia = this.handleAddMedia.bind(this);
-    this.handleRemoveMedia = this.handleRemoveMedia.bind(this);
-    this.handleSave = this.handleSave.bind(this);
-  }
-
-  handleChange(entry) {
-    this.setState({entry: entry});
-  }
-
-  handleAddMedia(mediaFile) {
-    this.setState({mediaFiles: this.state.mediaFiles.push(mediaFile)});
-  }
-
-  handleRemoveMedia(mediaFile) {
-    const newState = this.state.mediaFiles.filterNot((item) => item === mediaFile);
-    this.state = {
-      entry: this.props.entry,
-      mediaFiles: Immutable.List(newState)
-    };
-  }
-
-  handleSave() {
-    this.props.onPersist(this.state.entry, this.state.mediaFiles);
-  }
 
   render() {
-    const { collection, entry } = this.props;
-
+    const { collection, entry, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
     return <div>
       <h1>Entry in {collection.get('label')}</h1>
       <h2>{entry && entry.get('title')}</h2>
@@ -46,17 +13,17 @@ export default class EntryEditor extends React.Component {
         <div className="cms-control-pane" style={styles.pane}>
           <ControlPane
               collection={collection}
-              entry={this.state.entry}
-              onChange={this.handleChange}
-              onAddMedia={this.handleAddMedia}
-              onRemoveMedia={this.handleRemoveMedia}
+              entry={entry}
+              onChange={onChange}
+              onAddMedia={onAddMedia}
+              onRemoveMedia={onRemoveMedia}
           />
         </div>
         <div className="cms-preview-pane" style={styles.pane}>
-          <PreviewPane collection={collection} entry={this.state.entry}/>
+          <PreviewPane collection={collection} entry={entry}/>
         </div>
       </div>
-      <button onClick={this.handleSave}>Save</button>
+      <button onClick={onPersist}>Save</button>
     </div>;
   }
 }

src/components/Widgets/ImageControl.js

@@ -62,8 +62,8 @@ export default class ImageControl extends React.Component {
     });
 
     if (file) {
-      imageRef = new ImageProxy(file.name, file);
-      this.props.onAddMedia(imageRef);
+      imageRef = new ImageProxy(file.name, window.URL.createObjectURL(file, {oneTimeOnly: true}));
+      this.props.onAddMedia(file);
     }
 
     this.props.onChange(imageRef);