IndexPage.js

import { PageWrapper, ListContainer, ListItem, Loader, UserContainer } from './styledComponents'

const IndexPage = ({ status, userList, selectedUser, userSelect, message, match, history }) => {
  const userParam = get(match, 'params.user')
  if (selectedUser) {
    userParam !== selectedUser.user && history.push(`/${selectedUser.user}`)
  }
  return (
    <PageWrapper>
      <UserContainer>
        {status === 'SUCCESS' ? (
          <Fragment>
            <h3>Users</h3>
            <ListContainer style={{ height: '500px' }}>
              {userList.map((user, i) => (
                <ListItem key={i} onClick={() => userSelect(user)} selected={user === selectedUser}>
                  <p>{user.user}</p>
                </ListItem>
              ))}
            </ListContainer>
          </Fragment>
        ) : (
          <Loader status={status} message={message} />
        )}
      </UserContainer>
    </PageWrapper>
  )
}