From 69ca2afd350701f764d585b6af06a820ba8550e1 Mon Sep 17 00:00:00 2001 From: Devon Wijesinghe Date: Fri, 16 Aug 2019 10:19:44 +0530 Subject: [PATCH] Wires up the earch form --- .../src/pages/Search/Search.jsx | 103 +++++++++++++++++- .../src/pages/Search/style.sass | 14 +++ .../src/redux/actions/postActions.js | 4 +- .../src/redux/reducers/postReducers.js | 68 ++++++------ 4 files changed, 151 insertions(+), 38 deletions(-) diff --git a/fact-bounty-client/src/pages/Search/Search.jsx b/fact-bounty-client/src/pages/Search/Search.jsx index 9217db2d..149002e1 100644 --- a/fact-bounty-client/src/pages/Search/Search.jsx +++ b/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 ( +
+ {currentKeyword === '' ? ( +

Type a keyword and press search!

+ ) : ( +

+ No result found for: {currentKeyword} +

+ )} +
+ ) + } + return ( +
+

+ Showing results for: {currentKeyword} +

+ {validPosts.map((post, index) => { + console.log(userVotes) + const userVote = userVotes.filter(uv => uv.story_id === post._id) + return ( + + ) + })} +
+ ) } render() { + const { keyword } = this.state return (

Search

+
+
+ { + this.setState({ keyword: e.target.value }) + }} + /> + +
+
+ {this.renderPostList()}
) } } -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( diff --git a/fact-bounty-client/src/pages/Search/style.sass b/fact-bounty-client/src/pages/Search/style.sass index c14710ce..950c0b02 100644 --- a/fact-bounty-client/src/pages/Search/style.sass +++ b/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 \ No newline at end of file diff --git a/fact-bounty-client/src/redux/actions/postActions.js b/fact-bounty-client/src/redux/actions/postActions.js index 406fac78..3d7887e9 100644 --- a/fact-bounty-client/src/redux/actions/postActions.js +++ b/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 => { diff --git a/fact-bounty-client/src/redux/reducers/postReducers.js b/fact-bounty-client/src/redux/reducers/postReducers.js index b824fde3..1d526373 100644 --- a/fact-bounty-client/src/redux/reducers/postReducers.js +++ b/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 + }) +}