Started react implementation

resources/assets/js/image-manager.js

@@ -0,0 +1,63 @@
+
+class ImageList extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            images: [],
+            hasMore: false,
+            page: 0
+        };
+    }
+
+    componentDidMount() {
+        $.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
+            });
+        });
+    }
+
+    render() {
+        var images = this.state.images.map(function(image) {
+            return (
+                <div key={image.id}>
+                    <img src={image.thumbnail}/>
+                </div>
+            );
+        });
+        return (
+            <div className="image-list">
+                {images}
+                <div className="load-more" onClick={this.loadMore}>Load More</div>
+            </div>
+        );
+    }
+
+}
+
+class ImageManager extends React.Component {
+    render() {
+        return (
+            <div id="image-manager">
+                <ImageList/>
+            </div>
+        );
+    }
+}
+
+React.render(
+    <ImageManager />,
+    document.getElementById('container')
+);

resources/assets/sass/image-manager.scss

@@ -9,7 +9,7 @@
   border-radius: 4px;
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
   overflow: hidden;
-  .image-manager-display img {
+  .image-list img {
     border-radius: 0;
     float: left;
     margin: 1px;
@@ -36,34 +36,23 @@
     pointer-events: none;
   }
 }
-.image-manager-left {
-  background-color: #FFF;
+.image-manager-display-wrap {
+  height: 100%;
+  padding-top: 87px;
+  position: absolute;
+  top: 0;width: 100%;
+}
+.image-manager-display {
   height: 100%;
   width: 100%;
   text-align: left;
-  position: relative;
-  .image-manager-display-wrap {
-    height: 100%;
-    padding-top: 87px;
-    position: absolute;
-    top: 0;width: 100%;
-  }
-  .image-manager-display {
-    height: 100%;
-    width: 100%;
-    text-align: left;
-    overflow-y: scroll;
-  }
-  .image-manager-header {
-    z-index: 50;
-    position: relative;
-  }
+  overflow-y: scroll;
 }
 
 #image-manager .load-more {
   width: 150px;
   height: 150px;
-  display: none;
+  display: block;
   float: left;
   text-align: center;
   background-color: #888;

resources/views/base.blade.php

@@ -10,6 +10,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src="/bower/bootstrap/dist/js/bootstrap.js"></script>
     <script src="/bower/jquery-sortable/source/js/jquery-sortable.js"></script>
+    <script src="https://fb.me/react-0.13.3.js"></script>
     <script>
         $.fn.smoothScrollTo = function() {
             if(this.length === 0) return;
@@ -62,5 +63,7 @@
     </section>
 
 @yield('bottom')
+
+    <script src="/js/all.js"></script>
 </body>
 </html>

resources/views/home.blade.php

@@ -0,0 +1,5 @@
+@extends('base')
+
+@section('content')
+    <div id="container"></div>
+@stop