import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import moment from 'moment';
import { ascendingBy } from 'utils';
// STORE
import { loadUsers } from 'redux/modules/usersModule';
// COMPONENTS
import { LoadingScreen } from 'components';
// LAYOUT
import Grid from 'react-bootstrap/lib/Grid';
import { List, ListItem } from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import styles from './UsersPage.scss';

const mappedState = ({ users }) => ({
  users: users.all,
  loadingUsers: users.loadingUsers,
  usersLoaded: users.usersLoaded,
});

const mappedActions = {
  loadUsers,
  pushState: push
};

@connect(mappedState, mappedActions)
class UsersPage extends Component {
  static propTypes = {
    users: PropTypes.array.isRequired,
    loadingUsers: PropTypes.bool.isRequired,
    usersLoaded: PropTypes.bool.isRequired,
    loadUsers: PropTypes.func.isRequired,
    pushState: PropTypes.func.isRequired
  }

  componentWillMount() {
    if (!this.props.usersLoaded) this.props.loadUsers();
  }

  handleUserClick(userId) {
    this.props.pushState(`/user/${userId}`);
  }

  render() {
    return (
      <LoadingScreen loading={this.props.loadingUsers}>
        <Grid className={styles.UsersPage}>
          <h1>Users</h1>
          <List>
            {
              this.props.users.sort(ascendingBy('firstName')).map((user) => {
                const date = moment(user.createdAt).format('MMMM Do YYYY');
                return (
                  <ListItem
                    key={user.id}
                    primaryText={`${user.firstName} ${user.lastName}`}
                    secondaryText={`User since: ${date}`}
                    leftAvatar={<Avatar src={user.pictureURL} />}
                    onClick={() => this.handleUserClick(user.id)}
                  />
                );
              })
            }
          </List>
        </Grid>
      </LoadingScreen>
    );
  }
}

export default UsersPage;

@@ -550,16 +550,22 @@
 ate = (%7B
+ auth,
  users %7D
@@ -572,16 +572,35 @@
 ) =%3E (%7B%0A
+  user: auth.user,%0A
   users:
@@ -841,16 +841,44 @@
 pes = %7B%0A
+    user: PropTypes.object,%0A
     user
@@ -1208,46 +1208,214 @@
     
-this.props.pushState(%60/user/$%7BuserId%7D%60
+// If user clicked on himself, redirect him to his profile page. Otherwise show user details.%0A    const route = userId === this.props.user.id ? '/profile' : %60/user/$%7BuserId%7D%60;%0A    this.props.pushState(route
 );%0A 

Fix redirections from users' page