refactor: Creating Medias reducer

src/components/ControlPane.js

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

src/components/EntryEditor.js

@@ -5,7 +5,7 @@ import PreviewPane from './PreviewPane';
 export default class EntryEditor extends React.Component {
 
   render() {
-    const { collection, entry, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
+    const { collection, entry, getMedia, onChange, onAddMedia, onPersist } = this.props;
     return <div>
       <h1>Entry in {collection.get('label')}</h1>
       <h2>{entry && entry.get('title')}</h2>
@@ -14,13 +14,13 @@ export default class EntryEditor extends React.Component {
           <ControlPane
               collection={collection}
               entry={entry}
+              getMedia={getMedia}
               onChange={onChange}
               onAddMedia={onAddMedia}
-              onRemoveMedia={onRemoveMedia}
           />
         </div>
         <div className="cms-preview-pane" style={styles.pane}>
-          <PreviewPane collection={collection} entry={entry}/>
+          <PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
         </div>
       </div>
       <button onClick={onPersist}>Save</button>

src/components/PreviewPane.js

@@ -3,12 +3,13 @@ import Widgets from './Widgets';
 
 export default class PreviewPane extends React.Component {
   previewFor(field) {
-    const { entry } = this.props;
+    const { entry, getMedia } = this.props;
     const widget = Widgets[field.get('widget')] || Widgets._unknown;
     return React.createElement(widget.Preview, {
       key: field.get('name'),
       field: field,
-      value: entry.getIn(['data', field.get('name')])
+      value: entry.getIn(['data', field.get('name')]),
+      getMedia: getMedia,
     });
   }
 

src/components/Widgets/ImageControl.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
-import ImageProxy from '../../valueObjects/ImageProxy';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -9,7 +8,7 @@ export default class ImageControl extends React.Component {
     super(props);
 
     this.state = {
-      currentImage: props.value ? new ImageProxy(props.value, null, true) : null
+      currentImage: props.value
     };
 
     this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
@@ -22,8 +21,8 @@ export default class ImageControl extends React.Component {
   }
 
   revokeCurrentImage() {
-    if (this.state.currentImage && !this.state.currentImage.uploaded) {
-      this.props.onRemoveMedia(this.state.currentImage);
+    if (this.state.currentImage) {
+      //this.props.onRemoveMedia(this.state.currentImage);
     }
   }
 
@@ -49,7 +48,6 @@ export default class ImageControl extends React.Component {
     e.stopPropagation();
     e.preventDefault();
     this.revokeCurrentImage();
-    let imageRef = null;
     const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files;
     const files = [...fileList];
     const imageType = /^image\//;
@@ -62,17 +60,20 @@ export default class ImageControl extends React.Component {
     });
 
     if (file) {
-      imageRef = new ImageProxy(file.name, window.URL.createObjectURL(file, {oneTimeOnly: true}));
       this.props.onAddMedia(file);
+      this.props.onChange(file.name);
+      this.setState({currentImage: file.name});
+    } else {
+      this.props.onChange(null);
+      this.setState({currentImage: null});
     }
 
-    this.props.onChange(imageRef);
-    this.setState({currentImage: imageRef});
   }
 
   renderImageName() {
+
     if (!this.state.currentImage) return null;
-    return truncateMiddle(this.state.currentImage.uri, MAX_DISPLAY_LENGTH);
+    return truncateMiddle(this.props.getMedia(this.state.currentImage).uri, MAX_DISPLAY_LENGTH);
   }
 
   render() {

src/components/Widgets/ImagePreview.js

@@ -6,7 +6,7 @@ export default class ImagePreview extends React.Component {
   }
 
   render() {
-    const { value } = this.props;
-    return value ? <img src={value}/> : null;
+    const { value, getMedia } = this.props;
+    return value ? <img src={getMedia(value)}/> : null;
   }
 }