-
Welcome To The Exercise
- {this.props.children}
+
+
+ {this.props.children}
+
);
}
diff --git a/views/UserDetails/index.js b/views/UserDetails/index.js
new file mode 100644
index 0000000..0027bab
--- /dev/null
+++ b/views/UserDetails/index.js
@@ -0,0 +1,153 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { loadUserDetails, resetErrorMessage, loadFollowers, loadRepos } from '../../actions'
+import zip from 'lodash/zip'
+import isEmpty from 'lodash/isEmpty'
+import values from 'lodash/values'
+
+function loadData(props) {
+ const { params: { login } } = props
+ props.loadUserDetails(login, [ 'name' ])
+ props.loadFollowers(login, ['name'])
+}
+
+export default class UserDetails extends Component {
+
+ static propTypes = {
+ user: PropTypes.object,
+ loadUserDetails: PropTypes.func,
+ loadRepos: PropTypes.func
+ }
+
+ constructor(props) {
+ super(props)
+ this.renderRepo = this.renderRepo.bind(this)
+ this.renderFollower = this.renderFollower.bind(this)
+ // this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this)
+ }
+
+ componentWillMount() {
+ loadData(this.props)
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { params: { login } } = this.props
+ if (nextProps.followers !== this.props.followers) {
+ }
+ }
+
+ renderFollower(follower) {
+ return
{follower.login}
+ }
+
+ renderRepo(repo) {
+ return
{repo.name}
+ }
+
+ render() {
+ const {params: { login } } = this.props;
+ const { repos, followers } = this.props;
+ const user = this.props.user[login];
+ if (!user) {
+ return
Loading...
+ }
+ if (isEmpty(repos)) {
+ console.log(console.log("get repos: "));
+ this.props.loadRepos(login, ['name']);
+ }
+ if (isEmpty(followers)) {
+ console.log(console.log("get repos: "));
+ this.props.loadFollowers(login, ['name']);
+ }
+ const followersArray = values(followers)
+ const reposArray = values(repos)
+ return (
+
+
+
{user.name}
+
+
+
+
+
+
Github Username
+ {user.login}
+ { user.company &&
+
+
Company
+ {user.company}
+
+ }
+ { user.blog &&
+
+ }
+ { user.location &&
+
+
Location
+ {user.location}
+
+ }
+ { user.email &&
+
+ }
+ { user.bio &&
+
+
Bio
+ {user.bio}
+
+ }
+ { user.created_at &&
+
+
Account Creation
+ {user.created_at}
+
+ }
+
+
+ { followersArray &&
+
+
Followers
+
+ {followersArray.map(this.renderFollower)}
+
+
+ }
+ { reposArray &&
+
+
Repos
+
+ {reposArray.map(this.renderRepo)}
+
+
+ }
+
+
+
+ )
+ }
+}
+
+function mapStateToProps(state,) {
+ const { entities: { user, followers, repos }, errorMessage } = state
+ return {
+ errorMessage,
+ user,
+ followers,
+ repos
+ }
+}
+
+export default connect(mapStateToProps, {
+ resetErrorMessage,
+ loadUserDetails,
+ loadFollowers,
+ loadRepos
+})(UserDetails)
diff --git a/views/UsersView/index.js b/views/UsersView/index.js
new file mode 100644
index 0000000..3cd9d47
--- /dev/null
+++ b/views/UsersView/index.js
@@ -0,0 +1,65 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import List from '../../components/List'
+import { loadSearchResults } from '../../actions'
+import zip from 'lodash/zip'
+
+function loadData(props) {
+ const { query } = props
+ props.loadSearchResults(query, [ 'name' ])
+}
+
+class UsersList extends Component {
+
+ static propTypes = {
+ query: PropTypes.string,
+ users: PropTypes.array,
+ loadSearchResults: PropTypes.func
+ }
+
+ constructor(props) {
+ super(props)
+
+ }
+
+ componentWillMount() {
+ loadData(this.props)
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.query !== this.props.query) {
+ loadData(nextProps)
+ }
+ }
+
+
+ render() {
+ const { users } = this.props
+ if (!users) {
+ return
Your search returned no results. Please search for another user.
+ }
+
+ return (
+
+
+
+ )
+ }
+}
+
+function mapStateToProps(state, ownProps) {
+
+ const query = ownProps.params.query.toLowerCase()
+ const { entities: { users } } = state
+
+ return {
+ query,
+ users
+ }
+}
+
+export default connect(mapStateToProps, {
+ loadSearchResults
+})(UsersList)