added check fetching functionality

client/js/pages/Index.js

@@ -33,12 +33,16 @@ export default class Index extends React.Component {
     }
 
     render() {
+      const fetched = this.props.redux.fetched;
+      const fetching = this.props.redux.fetching;
+      
         return (
           <div>
             <Header />
               <div class="Main">
-                  {typeof this.page === 'undefined' ? <Preview posts={this.props.redux.preview.posts} /> : ""}
+                  {typeof this.page === 'undefined' && !fetching ? <Preview posts={this.props.redux.preview.posts} /> : null}
-                  {this.page === 'post' ? <Post content={this.props.redux.post}/> : ""}
+                  {this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
+                  {fetching ? <div class="Content">Fetching</div> : null}
                 <Sidebar />
               </div>
             <Footer />

client/js/redux/actions.js

@@ -15,10 +15,17 @@ function loadPost(post){
     }
 }
 
+function fetching(){
+    return{
+        type: types.FETCHING
+    }
+}
+
 //using redux-thunk we can modify actions before they get called
 //in this case we can send the http request here rather in the react component
 export function fetchPreview() {
     return (dispatch) => {
+        dispatch(fetching());
         return fetch('/public/metadata.json')
             .then(response => response.json())
             .then(json => {
@@ -32,6 +39,7 @@ export function fetchPreview() {
 
 export function fetchPost(category, post) {
     return (dispatch) => {
+        dispatch(fetching());
         return fetch(`/public/posts/${category}/${post}.md`)
             .then(response => response.text())
             .then(response => {

client/js/redux/constants.js

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

client/js/redux/reducers.js

@@ -17,7 +17,9 @@ const defaultState = {
     filteredPreview: {
         posts: []
     },
-    post: ""
+    post: "",
+    fetched: false,
+    fetching: false
 };
 
 //default reducer
@@ -26,7 +28,9 @@ function reducer(state = defaultState, action) {
     switch (action.type) {
         case types.INIT_PREVIEW:
             return Object.assign({}, state, {
-                preview: Object.assign({}, state.preview, action.posts)
+                preview: Object.assign({}, state.preview, action.posts),
+                fetched: true,
+                fetching: false
             });
         case types.FILTER_PREVIEW:
             return Object.assign({}, state, {
@@ -34,9 +38,15 @@ function reducer(state = defaultState, action) {
             });
         case types.LOAD_POST:
             return Object.assign({}, state, {
-                post: action.post
+                post: action.post,
-            })
+                fetched: true,
-
+                fetching: false
+            });
+        case types.FETCHING:
+            return Object.assign({}, state, {
+                fetched : false,
+                fetching: true
+            });
     }
 
     //return present state if no actions get called

client/js/redux/store.js

@@ -2,10 +2,11 @@ import {applyMiddleware, createStore} from 'redux';
 import {syncHistoryWithStore} from 'react-router-redux';
 import {browserHistory} from 'react-router';
 import thunk from 'redux-thunk';
+import logger from 'redux-logger';
 
 import reducers from './reducers';
 
-const middleware = applyMiddleware(thunk);
+const middleware = applyMiddleware(thunk, logger());
 
 //create the new store with default state as an empty object
 const store = createStore(reducers, {}, middleware);

package.json

@@ -50,6 +50,7 @@
     "react-router": "^2.6.1",
     "react-router-redux": "^4.0.5",
     "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
     "redux-thunk": "^2.1.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",