Adds loading and validation text

scorelab · Aug 16, 2019 · 36a277e · 36a277e
1 parent 69ca2af
commit 36a277e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/fact-bounty-client/src/pages/Search/Search.jsx b/fact-bounty-client/src/pages/Search/Search.jsx
@@ -69,6 +69,7 @@ class Search extends Component {
 
   render() {
     const { keyword } = this.state
+    const { loadingPosts } = this.props
     return (
       <Fragment>
         <div className="container search-wrapper">
@@ -92,15 +93,14 @@ class Search extends Component {
                 color="primary"
                 style={{ width: 120 }}
                 type="submit"
-                loading={false}
-                disabled={false}
+                disabled={loadingPosts}
               >
                 SEARCH
               </Button>
             </form>
           </div>
           <hr className="hr" />
-          {this.renderPostList()}
+          {loadingPosts ? <h2>Loading...</h2> : this.renderPostList()}
         </div>
       </Fragment>
     )
@@ -111,16 +111,14 @@ Search.propTypes = {
   posts: PropTypes.array,
   loadingPosts: PropTypes.bool,
   userVotes: PropTypes.array,
-  loadingUserVotes: PropTypes.bool,
-  user: PropTypes.object,
   getPostsFromKeyword: PropTypes.func,
   loadUserVotes: PropTypes.func
 }
 
 const mapStatetoProps = state => ({
   posts: state.posts.searchedPosts,
   userVotes: state.posts.userVotes,
-  user: state.auth.user
+  loadingPosts: state.posts.searchedPostsLoading
 })
 
 const mapDispatchToProps = dispatch => ({

diff --git a/fact-bounty-client/src/redux/actions/actionTypes.js b/fact-bounty-client/src/redux/actions/actionTypes.js
@@ -12,6 +12,7 @@ export const LOADING_USER_VOTES = 'LOADING_USER_VOTES'
 export const SET_USER_VOTES = 'SET_USER_VOTES'
 export const UPDATE_USER_VOTES = 'UPDATE_USER_VOTES'
 export const UPDATE_POST_VOTES = 'UPDATE_POST_VOTES'
+export const START_POSTS_SEARCH = 'START_POSTS_SEARCH'
 export const SET_POSTS_ON_SEARCH = 'SET_POSTS_ON_SEARCH'
 
 export const START_CONTACT_FORM_SUBMIT = 'START_CONTACT_FORM_SUBMIT'

diff --git a/fact-bounty-client/src/redux/actions/postActions.js b/fact-bounty-client/src/redux/actions/postActions.js
@@ -8,7 +8,8 @@ import {
   SET_USER_VOTES,
   UPDATE_USER_VOTES,
   UPDATE_POST_VOTES,
-  SET_POSTS_ON_SEARCH
+  SET_POSTS_ON_SEARCH,
+  START_POSTS_SEARCH
 } from './actionTypes'
 import PostsService from '../../services/PostsService'
 
@@ -81,10 +82,9 @@ export const loadUserVotes = () => dispatch => {
 }
 
 export const getPostsFromKeyword = keyword => dispatch => {
-  dispatch({ type: LOADING_USER_VOTES })
+  dispatch({ type: START_POSTS_SEARCH })
   PostsService.getPostsFromKeyword(keyword)
     .then(res => {
-      console.log('getPostsFromKeyword', res)
       dispatch({
         type: SET_POSTS_ON_SEARCH,
         payload: res.data.stories ? res.data.stories : null

diff --git a/fact-bounty-client/src/redux/reducers/postReducers.js b/fact-bounty-client/src/redux/reducers/postReducers.js
@@ -8,7 +8,8 @@ import {
   SET_USER_VOTES,
   UPDATE_USER_VOTES,
   UPDATE_POST_VOTES,
-  SET_POSTS_ON_SEARCH
+  SET_POSTS_ON_SEARCH,
+  START_POSTS_SEARCH
 } from '../actions/actionTypes'
 
 const initialState = {
@@ -18,7 +19,8 @@ const initialState = {
   page: 1,
   userVotes: [],
   loadingPosts: false,
-  loadingUserVotes: false
+  loadingUserVotes: false,
+  searchedPostsLoading: false
 }
 
 export default function(state = initialState, action) {
@@ -86,10 +88,17 @@ export default function(state = initialState, action) {
         searchedPosts: getUpdatedItemsAfterVote(state.searchedPosts, action)
       }
     }
+    case START_POSTS_SEARCH: {
+      return {
+        ...state,
+        searchedPostsLoading: true
+      }
+    }
     case SET_POSTS_ON_SEARCH: {
       return {
         ...state,
-        searchedPosts: action.payload
+        searchedPosts: action.payload,
+        searchedPostsLoading: false
       }
     }
     default: {