Got react image manager working

resources/assets/js/image-manager.js

@@ -1,63 +1,140 @@
 
-class ImageList extends React.Component {
+(function() {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            images: [],
-            hasMore: false,
-            page: 0
-        };
-    }
 
-    componentDidMount() {
-        $.getJSON('/images/all', data => {
-            this.setState({
-                images: data.images,
-                hasMore: data.hasMore
+    class ImageManager extends React.Component {
+
+        constructor(props) {
+            super(props);
+            this.state = {
+                images: [],
+                hasMore: false,
+                page: 0
+            };
+        }
+
+        show(callback) {
+            $(React.findDOMNode(this)).show();
+            this.callback = callback;
+        }
+
+        hide() {
+            $(React.findDOMNode(this)).hide();
+        }
+
+        selectImage(image) {
+            if(this.callback) {
+                this.callback(image);
+            }
+            this.hide();
+        }
+
+        componentDidMount() {
+            var _this = this;
+            // Set initial images
+            $.getJSON('/images/all', data => {
+                this.setState({
+                    images: data.images,
+                    hasMore: data.hasMore
+                });
             });
-        });
-    }
-
-    loadMore() {
-        this.state.page++;
-        $.getJSON('/images/all/' + this.state.page, data => {
-            this.setState({
-                images: this.state.images.concat(data.images),
-                hasMore: data.hasMore
+            // Create dropzone
+            this.dropZone = new Dropzone(React.findDOMNode(this.refs.dropZone), {
+                url: '/upload/image',
+                init: function() {
+                    var dz = this;
+                    this.on("sending", function(file, xhr, data) {
+                        data.append("_token", document.querySelector('meta[name=token]').getAttribute('content'));
+                    });
+                    this.on("success", function(file, data) {
+                        _this.state.images.unshift(data);
+                        _this.setState({
+                            images: _this.state.images
+                        });
+                        //$(file.previewElement).fadeOut(400, function() {
+                        //    dz.removeFile(file);
+                        //})
+                    });
+                }
             });
-        });
-    }
+        }
 
-    render() {
-        var images = this.state.images.map(function(image) {
+        loadMore() {
+            this.state.page++;
+            $.getJSON('/images/all/' + this.state.page, data => {
+                this.setState({
+                    images: this.state.images.concat(data.images),
+                    hasMore: data.hasMore
+                });
+            });
+        }
+
+        render() {
+            var loadMore = this.loadMore.bind(this);
+            var selectImage = this.selectImage.bind(this);
             return (
-                <div key={image.id}>
-                    <img src={image.thumbnail}/>
+                <div className="overlay">
+                    <div id="image-manager">
+                        <div className="image-manager-content">
+                            <div className="dropzone-container" ref="dropZone">
+                                <div className="dz-message">Drop files or click here to upload</div>
+                            </div>
+                            <ImageList data={this.state.images} loadMore={loadMore} selectImage={selectImage} hasMore={this.state.hasMore}/>
+                        </div>
+                        <div className="image-manager-sidebar">
+                            <h2>Images</h2>
+                        </div>
+                    </div>
                 </div>
             );
-        });
-        return (
-            <div className="image-list">
-                {images}
-                <div className="load-more" onClick={this.loadMore}>Load More</div>
-            </div>
+        }
+
+    }
+    window.ImageManager = new ImageManager();
+
+    class ImageList extends React.Component {
+
+        render() {
+            var selectImage = this.props.selectImage;
+            var images = this.props.data.map(function(image) {
+                return (
+                    <Image key={image.id} image={image} selectImage={selectImage} />
+                );
+            });
+            return (
+                <div className="image-manager-list clearfix">
+                    {images}
+                    { this.props.hasMore ? <div className="load-more" onClick={this.props.loadMore}>Load More</div> : null }
+                </div>
+            );
+        }
+
+    }
+
+    class Image extends React.Component {
+
+        setImage() {
+            this.props.selectImage(this.props.image);
+        }
+
+        render() {
+            var setImage = this.setImage.bind(this);
+            return (
+                <div>
+                    <img onDoubleClick={setImage} src={this.props.image.thumbnail}/>
+                </div>
+            );
+        }
+
+    }
+
+    if(document.getElementById('image-manager-container')) {
+        window.ImageManager = React.render(
+            <ImageManager />,
+            document.getElementById('image-manager-container')
         );
     }
 
-}
+})();
 
-class ImageManager extends React.Component {
-    render() {
-        return (
-            <div id="image-manager">
-                <ImageList/>
-            </div>
-        );
-    }
-}
 
-React.render(
-    <ImageManager />,
-    document.getElementById('container')
-);