changes

client/assets/scss/Content.scss

@@ -1,6 +1,7 @@
 .Content {
   flex: 1;
   flex-wrap: wrap;
+  min-width: 0;
     .post + .post {
         margin-top: 2em;
     }

client/js/components/Preview.js

@@ -22,6 +22,8 @@ export default class Preview extends React.Component{
           </p>
         </div>
       );
+      
+      if(i >= this.props.postLimit) break;
     }
 
     return elements;
@@ -32,7 +34,7 @@ export default class Preview extends React.Component{
 
     return (
       <div class="Content">
-        {posts.length > 0 ? this.insertPosts(posts): ""}
+        {posts.length > 0 ? this.insertPosts(posts): null}
       </div>
     );
   }

client/js/pages/Index.js

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

client/js/redux/actions.js

@@ -2,6 +2,12 @@ import * as types from "./constants";
 import marked from 'marked';
 import 'whatwg-fetch';
 
+export function increasePostLimit(){
+    return {
+        type: types.INCREASE_POST_LIMIT
+    }
+}
+
 function initPreview(posts) {
     return {
         type: types.INIT_PREVIEW,

client/js/redux/constants.js

@@ -2,4 +2,5 @@
 export const INIT_PREVIEW = 'INIT_PREVIEW';
 export const FILTER_PREVIEW = 'FILTER_PREVIEW';
 export const LOAD_POST = 'LOAD_POST';
-export const FETCHING = 'FETCHING';
+export const FETCHING = 'FETCHING';
+export const INCREASE_POST_LIMIT = 'INCREASE_POST_LIMIT';

client/js/redux/reducers.js

@@ -14,12 +14,10 @@ const defaultState = {
     preview: {
         posts: []
     },
-    filteredPreview: {
-        posts: []
-    },
     post: "",
     fetched: false,
-    fetching: false
+    fetching: false,
+    postLimit: 10
 };
 
 //default reducer
@@ -32,10 +30,6 @@ function reducer(state = defaultState, action) {
                 fetched: true,
                 fetching: false
             });
-        case types.FILTER_PREVIEW:
-            return Object.assign({}, state, {
-                filteredPreview: Object.assign({}, state.filteredPreview, action.posts)
-            });
         case types.LOAD_POST:
             return Object.assign({}, state, {
                 post: action.post,
@@ -47,6 +41,10 @@ function reducer(state = defaultState, action) {
                 fetched : false,
                 fetching: true
             });
+        case types.INCREASE_POST_LIMIT:
+            return Object.assign({}, state, {
+                postLimit : state.postLimit + 10
+            });
     }
 
     //return present state if no actions get called