Wires up the earch form

fact-bounty-client/src/pages/Search/Search.jsx

@@ -1,36 +1,131 @@
 import React, { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
-import { getPostsFromKeyword } from '../../redux/actions/postActions'
+import PropTypes from 'prop-types'
+import {
+  getPostsFromKeyword,
+  loadUserVotes
+} from '../../redux/actions/postActions'
+import PostItem from '../../components/PostItem'
+import { Button } from '@material-ui/core'
 import './style.sass'
 
 class Search extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      keyword: '',
+      currentKeyword: ''
+    }
+  }
 
   componentDidMount() {
-    this.props.getPostsFromKeyword('attack')
+    this.props.loadUserVotes()
+  }
+
+  onSearchPressed = e => {
+    e.preventDefault()
+    const { keyword } = this.state
+    this.props.getPostsFromKeyword(keyword)
+    this.setState({ currentKeyword: keyword })
+  }
+
+  renderPostList = () => {
+    const { currentKeyword } = this.state
+    const { posts, userVotes } = this.props
+    const validPosts = posts ? posts : []
+
+    if (validPosts.length === 0) {
+      return (
+        <div>
+          {currentKeyword === '' ? (
+            <h3>Type a keyword and press search!</h3>
+          ) : (
+            <h3>
+              No result found for: <b>{currentKeyword}</b>
+            </h3>
+          )}
+        </div>
+      )
+    }
+    return (
+      <div>
+        <h3 style={{ marginBottom: 25 }}>
+          Showing results for: <b>{currentKeyword}</b>
+        </h3>
+        {validPosts.map((post, index) => {
+          console.log(userVotes)
+          const userVote = userVotes.filter(uv => uv.story_id === post._id)
+          return (
+            <PostItem
+              key={index}
+              post={post}
+              userVote={userVote[0] ? userVote[0].value : null}
+            />
+          )
+        })}
+      </div>
+    )
   }
 
   render() {
+    const { keyword } = this.state
     return (
       <Fragment>
         <div className="container search-wrapper">
           <div className="header">
             <h1>Search</h1>
           </div>
+          <div className="search-form-container">
+            <form onSubmit={this.onSearchPressed}>
+              <input
+                type="text"
+                name="Keyword"
+                placeholder="Keyword"
+                required
+                value={keyword}
+                onChange={e => {
+                  this.setState({ keyword: e.target.value })
+                }}
+              />
+              <Button
+                variant="contained"
+                color="primary"
+                style={{ width: 120 }}
+                type="submit"
+                loading={false}
+                disabled={false}
+              >
+                SEARCH
+              </Button>
+            </form>
+          </div>
           <hr className="hr" />
+          {this.renderPostList()}
         </div>
       </Fragment>
     )
   }
 }
 
-Search.propTypes = {}
+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 => ({
-  searchedPosts: state.posts.searchedPosts
+  posts: state.posts.searchedPosts,
+  userVotes: state.posts.userVotes,
+  user: state.auth.user
 })
 
 const mapDispatchToProps = dispatch => ({
   getPostsFromKeyword: keyword => dispatch(getPostsFromKeyword(keyword)),
+  loadUserVotes: () => dispatch(loadUserVotes())
 })
 
 export default connect(

fact-bounty-client/src/pages/Search/style.sass

@@ -12,3 +12,17 @@
       padding: 10px
   .hr
     margin-bottom: 40px
+  .search-form-container
+    text-align: center
+    form
+        display: flex
+        flex-direction: row
+        input
+            z-index: 1
+            box-shadow: 1px 1px 15px rgba(0, 0, 0, .1)
+            border: none
+            border-radius: 3px
+            padding: 12px
+            resize: none
+            width: 500px
+            margin-right: 15px

fact-bounty-client/src/redux/actions/postActions.js

@@ -84,10 +84,10 @@ export const getPostsFromKeyword = keyword => dispatch => {
   dispatch({ type: LOADING_USER_VOTES })
   PostsService.getPostsFromKeyword(keyword)
     .then(res => {
-      console.log(res)
+      console.log('getPostsFromKeyword', res)
       dispatch({
         type: SET_POSTS_ON_SEARCH,
-        payload: res.data
+        payload: res.data.stories ? res.data.stories : null
       })
     })
     .catch(err => {

fact-bounty-client/src/redux/reducers/postReducers.js

@@ -13,12 +13,12 @@ import {
 
 const initialState = {
   items: [], // the posts
+  searchedPosts: [], // the posts in search
   currentPost: null, // the current post in the post detail view
   page: 1,
   userVotes: [],
   loadingPosts: false,
-  loadingUserVotes: false,
-  searchedPosts: null
+  loadingUserVotes: false
 }
 
 export default function(state = initialState, action) {
@@ -80,38 +80,10 @@ export default function(state = initialState, action) {
       }
     }
     case UPDATE_POST_VOTES: {
-      const { story_id, value, userVote } = action.payload
-      const updatedItems = state.items.map(item => {
-        if (item._id === story_id) {
-          let approved_count_diffValue = 0
-          let mixedvote_count_diffValue = 0
-          let fake_count_diffValue = 0
-
-          if (value === 1) {
-            approved_count_diffValue = userVote === 1 ? 0 : 1
-            mixedvote_count_diffValue = userVote === 0 ? -1 : 0
-            fake_count_diffValue = userVote === -1 ? -1 : 0
-          } else if (value === 0) {
-            approved_count_diffValue = userVote === 1 ? -1 : 0
-            mixedvote_count_diffValue = userVote === 0 ? 0 : 1
-            fake_count_diffValue = userVote === -1 ? -1 : 0
-          } else if (value === -1) {
-            approved_count_diffValue = userVote === 1 ? -1 : 0
-            mixedvote_count_diffValue = userVote === 0 ? -1 : 0
-            fake_count_diffValue = userVote === -1 ? 0 : 1
-          }
-          return {
-            ...item,
-            approved_count: item.approved_count + approved_count_diffValue,
-            mixedvote_count: item.mixedvote_count + mixedvote_count_diffValue,
-            fake_count: item.fake_count + fake_count_diffValue
-          }
-        }
-        return item
-      })
       return {
         ...state,
-        items: updatedItems
+        items: getUpdatedItemsAfterVote(state.items, action),
+        searchedPosts: getUpdatedItemsAfterVote(state.searchedPosts, action)
       }
     }
     case SET_POSTS_ON_SEARCH: {
@@ -125,3 +97,35 @@ export default function(state = initialState, action) {
     }
   }
 }
+
+const getUpdatedItemsAfterVote = (items, action) => {
+  const { story_id, value, userVote } = action.payload
+  return items.map(item => {
+    if (item._id === story_id) {
+      let approved_count_diffValue = 0
+      let mixedvote_count_diffValue = 0
+      let fake_count_diffValue = 0
+
+      if (value === 1) {
+        approved_count_diffValue = userVote === 1 ? 0 : 1
+        mixedvote_count_diffValue = userVote === 0 ? -1 : 0
+        fake_count_diffValue = userVote === -1 ? -1 : 0
+      } else if (value === 0) {
+        approved_count_diffValue = userVote === 1 ? -1 : 0
+        mixedvote_count_diffValue = userVote === 0 ? 0 : 1
+        fake_count_diffValue = userVote === -1 ? -1 : 0
+      } else if (value === -1) {
+        approved_count_diffValue = userVote === 1 ? -1 : 0
+        mixedvote_count_diffValue = userVote === 0 ? -1 : 0
+        fake_count_diffValue = userVote === -1 ? 0 : 1
+      }
+      return {
+        ...item,
+        approved_count: item.approved_count + approved_count_diffValue,
+        mixedvote_count: item.mixedvote_count + mixedvote_count_diffValue,
+        fake_count: item.fake_count + fake_count_diffValue
+      }
+    }
+    return item
+  })
+}