start with simple lazy load

client/app/api.js

@@ -6,12 +6,17 @@ class Api extends React.Component {
     return $.get(config.api + 'all-categories');
   }
 
-  static items(type, category, filterBy) {
-    return $.get(config.api + type + '-items/' + category + '/' + filterBy);
+  static items(type, category, filterBy, currentLoaded) {
+    return $.get(config.api + type + '-items/' + category + '/' + filterBy + '/' + currentLoaded);
   }
 
   static categoryItems(category) {
-    return $.get(config.api + 'category-items/' + category + '/' + this.usersFilterFor(category), {loading: config.loadItems});
+    return $.get(config.api + 'category-items/' + category + '/' + this.usersFilterFor(category) + '/' + config.loadingItems);
+  }
+
+  static moreCategoryItems(category, currentLoaded) {
+    return $.get(config.api + 'more-category-items/' + category.id + '/' + this.usersFilterFor(category.slug) + '/' + config.loadingItems + '/' + currentLoaded);
+
   }
 
   static usersFilterFor(category) {

client/app/partials/box.js

@@ -13,6 +13,12 @@ class Box extends React.Component {
     items: this.props.items
   }
 
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      items: nextProps.items
+    });
+  }
+
   render() {
     let items = this.state.items.map((value, key) => {
       return <Item key={key} data={value} category={this.props.category.slug} />
@@ -44,10 +50,10 @@ class Box extends React.Component {
 
     this.setState({
       items: []
-    })
+    });
 
     setTimeout(() => {
-      Api.items(this.props.type, this.props.category.slug, filterBy).then((value) => {
+      Api.items(this.props.type, this.props.category.slug, filterBy, this.props.currentLoaded).then((value) => {
         this.setState({
           items: value.items
         });

client/app/sites/category.js

@@ -6,7 +6,8 @@ class Category extends React.Component {
 
   state = {
     category: {},
-    items: []
+    items: [],
+    currentLoaded: config.loadingItems
   }
 
   componentWillReceiveProps(nextProps) {
@@ -26,9 +27,12 @@ class Category extends React.Component {
   // todo: fix icon load.
   render() {
     return (
+
       <div>
-        { ! this.state.items.length ? <i className="icon-content-load"></i> : <Box items={this.state.items} category={this.state.category} type="category" />}
+        { ! this.state.items.length ? <i className="icon-content-load"></i> : <Box items={this.state.items} category={this.state.category} type="category" currentLoaded={this.state.currentLoaded} />}
+        {this.state.items.length >= config.loadingItems ? <div className="wrap"><div className="load-more" onClick={this.loadMore.bind(this)}>Load more {this.state.category.name}</div></div> : ''}
       </div>
+
     );
   }
 
@@ -42,6 +46,15 @@ class Category extends React.Component {
       });
     }, 200);
   }
+
+  loadMore() {
+    Api.moreCategoryItems(this.state.category, this.state.currentLoaded).then((value) => {
+      this.setState({
+        currentLoaded: this.state.currentLoaded + config.loadingItems,
+        items: this.state.items.concat(value)
+      });
+    });
+  }
 }
 
 export default Category;

client/app/sites/home.js

@@ -15,7 +15,7 @@ class Home extends React.Component {
 
   render() {
     let boxes = this.state.items.map((value, key) => {
-      return <Box items={value.items} category={value.category} key={key} type="home" />
+      return <Box items={value.items} category={value.category} key={key} type="home" currentLoaded="5" />
     });
 
     return (

client/assets/sass/_base.scss

@@ -5,7 +5,7 @@
 }
 
 .wrap {
-  width: 1100px;
+  width: $width;
   margin: 0 auto;
   padding: 0 20px;
 }

client/assets/sass/_content.scss

@@ -239,4 +239,20 @@
     color: $main;
     font-size: 32px;
   }
+}
+
+.load-more {
+  background: #242424;
+  padding: 10px;
+  float: left;
+  width: 100%;
+  margin: 0 0 40px 0;
+  text-align: center;
+  text-transform: uppercase;
+  color: #555;
+  cursor: pointer;
+
+  .light-theme & {
+    background: #e9e9e9;
+  }
 }

client/assets/sass/_mixins.scss

@@ -1,2 +1,3 @@
 $main: #ba59d2;
 $dark: #1b1b1b;
+$width: 1100px;

public/assets/js/config.js

@@ -6,6 +6,6 @@ window.config = {
   posterSmall: 'http://image.tmdb.org/t/p/w185',
   posterBig: 'http://image.tmdb.org/t/p/w300',
 
-  loadItems: 20
+  loadingItems: 20
 
 };

server/app/Http/Controllers/APIController.php

@@ -10,16 +10,22 @@
   use Illuminate\Support\Facades\Request;
   use Illuminate\Support\Str;
 
+  // todo: Rewrite API.
   class APIController extends Controller {
 
-    public function homeItems($category, $orderBy)
+    public function homeItems($category, $orderBy, $loading = 5)
     {
-      return $this->getItems($category, $orderBy, 5);
+      return $this->getItems($category, $orderBy, $loading);
     }
 
-    public function categoryItems($category, $orderBy)
+    public function categoryItems($category, $orderBy, $loading)
     {
-      return $this->getItems($category, $orderBy, Request::input('loading'));
+      return $this->getItems($category, $orderBy, $loading);
+    }
+
+    public function moreCategoryItems($categoryID, $orderBy, $loading, $loaded)
+    {
+      return Item::where('category_id', $categoryID)->orderBy($orderBy, 'desc')->take($loading)->skip($loaded)->get();
     }
 
     public function allCategories()

server/app/Http/routes.php

@@ -3,13 +3,12 @@
   Route::group(['prefix' => 'api'], function() {
 
     get('all-categories', 'APIController@allCategories');
-    get('home-items/{category}/{orderBy}', 'APIController@homeItems');
-    get('category-items/{category}/{orderBy}', 'APIController@categoryItems');
-    //get('item/{slug}', 'APIController@slugItem');
+    get('home-items/{category}/{orderBy}/{loading?}', 'APIController@homeItems');
+    get('category-items/{category}/{orderBy}/{loading}', 'APIController@categoryItems');
+    get('more-category-items/{categoryID}/{orderBy}/{loading}/{loaded}', 'APIController@moreCategoryItems');
 
     get('search/flox/{title}', 'APIController@searchFloxByTitle');
     get('search/tmdb/{title}', 'APIController@searchTMDBByTitle');
-    //get('search/tmdb/id/{id}', 'APIController@searchTMDBByID');
 
     post('new', 'APIController@newItem');
 

server/database/seeds/DatabaseSeeder.php

@@ -15,7 +15,9 @@
       Model::unguard();
 
       $this->call(CategoryTableSeeder::class);
-      $this->call(ItemTableSeeder::class);
+      foreach(range(1,20) as $i) {
+        $this->call(ItemTableSeeder::class);
+      }
 
       Model::reguard();
     }