From d173b061298212c20246e07163aea4afd362798a Mon Sep 17 00:00:00 2001
From: mgerb42 <mgerb42@gmail.com>
Date: Sat, 27 Aug 2016 07:30:32 +0000
Subject: [PATCH] added check fetching functionality

---
 client/js/pages/Index.js     |  8 ++++++--
 client/js/redux/actions.js   |  8 ++++++++
 client/js/redux/constants.js |  1 +
 client/js/redux/reducers.js  | 20 +++++++++++++++-----
 client/js/redux/store.js     |  3 ++-
 package.json                 |  1 +
 6 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/client/js/pages/Index.js b/client/js/pages/Index.js
index 5f54e1a..332f5eb 100644
--- a/client/js/pages/Index.js
+++ b/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} /> : ""}
-                  {this.page === 'post' ? <Post content={this.props.redux.post}/> : ""}
+                  {typeof this.page === 'undefined' && !fetching ? <Preview posts={this.props.redux.preview.posts} /> : null}
+                  {this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
+                  {fetching ? <div class="Content">Fetching</div> : null}
                 <Sidebar />
               </div>
             <Footer />
diff --git a/client/js/redux/actions.js b/client/js/redux/actions.js
index 2be78f0..80fc555 100644
--- a/client/js/redux/actions.js
+++ b/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 => {
diff --git a/client/js/redux/constants.js b/client/js/redux/constants.js
index 80a87bb..d9cc693 100644
--- a/client/js/redux/constants.js
+++ b/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';
\ No newline at end of file
diff --git a/client/js/redux/reducers.js b/client/js/redux/reducers.js
index a1131d1..37bfec8 100644
--- a/client/js/redux/reducers.js
+++ b/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
diff --git a/client/js/redux/store.js b/client/js/redux/store.js
index 9930ebe..fc5dc04 100644
--- a/client/js/redux/store.js
+++ b/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);
diff --git a/package.json b/package.json
index 839bbc4..4d2b6ce 100644
--- a/package.json
+++ b/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",