Merge pull request AgileVentures#157 from AgileVentures/156_userlist_search_feature

Add user search feature to users dashboard

Author: arku

cypress/integration/common/web_steps.js

@@ -29,11 +29,16 @@ When(`I click on the Users link in the navbar`, () => {
   cy.wait('@getUsers')
 })
 
-Then(`I should see 12 cards with basic user info`, () => {
+Then(`I should see {string} cards with basic user info`, (number) => {
   cy.get('h1')
     .should('contain', 'Volunteers Directory')
     .get('.user-card')
-    .should('have.length', 12)
+    .should('have.length', Number(number))
+})
+
+When(`I enter {string} into search bar`, name => {
+  cy.get('input')
+    .type(name)
 })
 
 When("I click on a user's name", () => {

cypress/integration/journey.feature

@@ -7,7 +7,9 @@ Feature: Journey test
     Given I am at the "Home" page
     Then I should see "Scrums"
     When I click on the Users link in the navbar
-    Then I should see 12 cards with basic user info
+    Then I should see "12" cards with basic user info
+    When I enter "Matt" into search bar
+    Then I should see "3" cards with basic user info
     When I click on a user's name
     Then I should see the user's info
     When I click on the Projects link in the navbar

src/assets/UsersList.css

@@ -1,4 +1,8 @@
 h1 {
   font-size: 50px !important;
   padding: 20px !important;
-}
+}
+
+.users-list-search-input {
+  margin-bottom: 20px;
+}

src/containers/UsersList.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react'
-import { Header, Card, Grid, Container } from 'semantic-ui-react'
+import { Header, Card, Grid, Container, Input } from 'semantic-ui-react'
 import Paginate from '../components/Paginate'
 import PaginationLinks from '../components/PaginationLinks'
 import { connect } from 'react-redux'
@@ -68,6 +68,21 @@ export class UsersList extends Component {
     })
   };
 
+  handleSearchInput = e => {
+    const users = this.props.users.filter(user => {
+      const name = this.sanitizeInput(`${user.first_name} ${user.last_name}`)
+      const query = this.sanitizeInput(e.target.value)
+
+      return name.includes(query)
+    })
+
+    this.normalizeUsers(users)
+  };
+
+  sanitizeInput = input => {
+    return input.toLowerCase().trim()
+  };
+
   render () {
     let {
       firstPage,
@@ -83,20 +98,33 @@ export class UsersList extends Component {
             <Grid.Row>
               <Grid.Column width={12}>
                 <Header as='h1'>Volunteers Directory</Header>
+                <Input
+                  onChange={this.handleSearchInput}
+                  className='users-list-search-input'
+                  fluid
+                  icon='search'
+                  placeholder='Search...'
+                />
                 <Card.Group centered itemsPerRow={3}>
-                  <Paginate
-                    items={usersList}
-                    Component={User}
+                  {usersList ? (
+                    <Paginate
+                      items={usersList}
+                      Component={User}
+                      pageCount={pageCount}
+                    />
+                  ) : (
+                    'No users found.'
+                  )}
+                </Card.Group>
+                {pageCount !== 1 ? (
+                  <PaginationLinks
+                    handlePageSelect={this.handlePageSelect}
+                    firstPage={firstPage}
+                    lastPage={lastPage}
                     pageCount={pageCount}
+                    selectedPage={selectedPage}
                   />
-                </Card.Group>
-                <PaginationLinks
-                  handlePageSelect={this.handlePageSelect}
-                  firstPage={firstPage}
-                  lastPage={lastPage}
-                  pageCount={pageCount}
-                  selectedPage={selectedPage}
-                />
+                ) : null}
               </Grid.Column>
             </Grid.Row>
           </Grid>

src/fixtures/users.js

@@ -91,27 +91,27 @@ export default [
   },
   {
     id: 4,
-    email: 'test@test.com.br',
+    email: 'test@test.com.gb',
     created_at: '2015-01-26T23:19:00.575Z',
     updated_at: '2016-08-22T09:23:23.947Z',
-    first_name: 'Matt',
-    last_name: 'Tester',
+    first_name: 'Gordon',
+    last_name: 'Brown',
     display_email: null,
     slug: 'matt-tester',
     youtube_id: null,
     display_profile: true,
-    latitude: 27.5949,
-    longitude: 48.5482,
-    country_name: 'Brazil',
-    city: 'Florianopolis',
-    region: 'Santa Catarina',
+    latitude: 51.5074,
+    longitude: 0.1278,
+    country_name: 'England',
+    city: 'London',
+    region: 'London',
     youtube_user_name: null,
     github_profile_url: null,
     display_hire_me: null,
     bio: null,
     receive_mailings: true,
-    timezone_offset: -18000,
-    country_code: 'BR',
+    timezone_offset: 0,
+    country_code: 'EN',
     status_count: 0,
     deleted_at: null,
     event_participation_count: 0,

src/tests/containers/UserList.test.js

@@ -5,7 +5,7 @@ import usersFixture from '../../fixtures/users'
 import { StaticRouter } from 'react-router'
 
 describe('UsersList', () => {
-  let wrapper
+  let wrapper, usersList, searchBox
   const context = {}
   wrapper = mount(
     <StaticRouter context={context}>
@@ -23,6 +23,8 @@ describe('UsersList', () => {
       />
     </StaticRouter>
   )
+  usersList = wrapper.find('UsersList')
+  searchBox = wrapper.find('Input')
 
   it('should have a header Volunteers Directory', () => {
     expect(wrapper.find('Header').text()).toBe('Volunteers Directory')
@@ -36,12 +38,24 @@ describe('UsersList', () => {
     expect(wrapper.find('PaginationLinks')).toHaveLength(1)
   })
 
+  it('should have an Input search bar component', () => {
+    expect(wrapper.find('Input')).toHaveLength(1)
+  })
+
+  it('should normalize users for pagination', () => {
+    let users = usersList.instance().state.users
+
+    expect(Object.keys(users).length).toEqual(3)
+    expect(users[1]).toHaveLength(12)
+    expect(users[3]).toHaveLength(2)
+  })
+
   it('should call handlePageSelect when a pagination link is clicked', () => {
     let paginationLink2 = wrapper.find('span').filterWhere(item => {
       return item.text() === '2'
     })
     paginationLink2.simulate('click')
-    let usersList = wrapper.find('UsersList')
+
     expect(usersList.instance().state.selectedPage).toEqual(2)
     expect(usersList.instance().state.lastPage).toBe(false)
     expect(usersList.instance().state.firstPage).toBe(false)
@@ -52,7 +66,7 @@ describe('UsersList', () => {
       return item.text() === '3'
     })
     paginationLink2.simulate('click')
-    let usersList = wrapper.find('UsersList')
+
     expect(usersList.instance().state.lastPage).toBe(true)
   })
 
@@ -61,10 +75,36 @@ describe('UsersList', () => {
       return item.text() === '1'
     })
     paginationLink2.simulate('click')
-    let usersList = wrapper.find('UsersList')
+
     expect(usersList.instance().state.firstPage).toBe(true)
   })
 
+  it('should limit the users list after query is entered in search box', () => {
+    expect(usersList.instance().state.users[1]).toHaveLength(12)
+
+    // For some reason `searchBox.simulate('change', ...)` was not
+    // triggering the event.
+    searchBox.props().onChange({ target: { value: 'gordon' } })
+
+    expect(usersList.instance().state.users[1]).toHaveLength(1)
+    expect(usersList.instance().state.users[1][0].first_name).toEqual('Gordon')
+
+    searchBox.props().onChange({ target: { value: '' } })
+  })
+
+  it('should show no users if query in search box does not match any entry', () => {
+    expect(usersList.instance().state.users[1]).toHaveLength(12)
+
+    searchBox.props().onChange({ target: { value: 'blablabla' } })
+
+    expect(usersList.instance().state.users[1]).toBeUndefined()
+
+    let resultColumns = wrapper.find('CardGroup')
+    expect(resultColumns.text()).toEqual('No users found.')
+
+    searchBox.props().onChange({ target: { value: '' } })
+  })
+
   it("shouldn't render a Project component without users", () => {
     const wrapper = mount(
       <StaticRouter context={context}>