finished paging

client/assets/scss/Content.scss

@@ -29,4 +29,7 @@
     pre {
         white-space: pre-wrap;
     }
+    .btn{
+        width: 100%;
+    }
 }

client/assets/scss/main.scss

@@ -1,6 +1,7 @@
 @import './utils.scss';
 
 $linkColor: #3598db;
+$backgroundColor: #FFFFFF;
 
 html {
     font-family: 'Roboto Slab', serif;
@@ -9,6 +10,7 @@ html {
     overflow-y: scroll;
 }
 body {
+    background-color: $backgroundColor;
     max-width: 100%;
     overflow-x: hidden;
     position: relative;
@@ -79,3 +81,14 @@ hr {
     flex: 1;
     justify-content: center;
 }
+.btn{
+    background-color: $backgroundColor;
+    border: 1px solid #DADADA;
+    border-radius: .2em;
+    cursor: pointer;
+    padding: .5em;
+    
+    &:hover{
+        background-color: #F3F3F3;
+    }
+}

client/js/components/Preview.js

@@ -7,7 +7,7 @@ export default class Preview extends React.Component{
 
   insertPosts(posts){
     let elements = [];
-    for (let i in posts){
+    for (let i = 0; i < this.props.postLimit && i < posts.length; i++){
       elements.push(
         <div class="post" key={i}>
           <div class="date">
@@ -22,8 +22,6 @@ export default class Preview extends React.Component{
           </p>
         </div>
       );
-      
-      if(i >= this.props.postLimit) break;
     }
 
     return elements;
@@ -31,10 +29,13 @@ export default class Preview extends React.Component{
 
   render(){
     const posts = this.props.posts;
-
+    
     return (
       <div class="Content">
         {posts.length > 0 ? this.insertPosts(posts): null}
+        {posts.length > this.props.postLimit ?
+          <button class="btn" onClick={this.props.increasePostLimit.bind(this)}>Load More</button>
+          : null}
       </div>
     );
   }

client/js/components/sensors/SensorList.js

@@ -50,7 +50,6 @@ export default class SensorList extends React.Component {
     );
   }
   render(){
-    console.log(this.state);
     return (
       <div>
         {this.state.fetched ? this.state.sensors.map(this.insertSensorData) : null}

client/js/pages/Index.js

@@ -43,7 +43,11 @@ export default class Index extends React.Component {
           <div>
             <Header />
               <div class="Main">
-                  {typeof this.page === 'undefined' && !fetching ? <Preview posts={this.props.redux.preview.posts} postLimit={this.props.redux.postLimit}/> : null}
+                  {typeof this.page === 'undefined' && !fetching
+                    ? <Preview posts={this.props.redux.preview.posts}
+                               postLimit={this.props.redux.postLimit}
+                               increasePostLimit={this.props.actions.increasePostLimit}/>
+                    : null}
                   {this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
                   {fetching ? loadingElement : null}
                 <Sidebar />