Home Reference Source

app/components/FindPeople.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';

// - Import app components
import UserBoxList from 'UserBoxList';

// - Import actions
import * as userActions from 'userActions';

export class FindPeople extends Component {
    componentWillMount() {
        this.props.loadPeople();
    }

    /**
     * Reneder component DOM
     * @return {react element} return the DOM which rendered by component
     */
    render() {
        return (
            <div>
                {this.props.peopleInfo && Object.keys(this.props.peopleInfo).length !== 0 ?  
                    (<div>
                        <div className='profile__title'>
                            Suggestions for you
                        </div>
                        <UserBoxList users={this.props.peopleInfo}/>
                        <div style={{ height: '24px' }}></div>
                    </div>) :
                    
                    (<div className='g__title-center'>
                        Nothing to show! :(
                    </div>)
                }
            </div>
        )
    }
}


/**
 * Map dispatch to props
 * @param  {func} dispatch is the function to dispatch action to reducers
 * @param  {object} ownProps is the props belong to component
 * @return {object}          props of component
 */
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        loadPeople: () => dispatch(userActions.dbGetPeopleInfo())
    }
}

/**
 * Map state to props
 * @param  {object} state is the obeject from redux store
 * @param  {object} ownProps is the props belong to component
 * @return {object}          props of component
 */
const mapStateToProps = (state, ownProps) => {
    return {
        peopleInfo: state.user.info
    }
}

// - Connect component to redux store
export default connect(mapStateToProps, mapDispatchToProps)(FindPeople)