hw-3 add person list

src/components/people/PersonList.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import { Table, Column } from 'react-virtualized'
+import {moduleName, fetchAll, personListSelector} from '../../ducks/people'
+import Loader from '../common/Loader'
+
+export class PersonList extends Component {
+    componentDidMount() {
+        this.props.fetchAll()
+    }
+
+    rowGetter = ({ index }) => this.props.people[index]
+
+    render() {
+        const { loading, people } = this.props
+
+        if (loading) return <Loader/>
+        return (
+            <Table
+              rowCount={people.length}
+              rowGetter={this.rowGetter}
+              rowHeight={20}
+              headerHeight={30}
+              width={600}
+              height={300}
+              rowClassName="test--people-list__row"
+            >
+                <Column
+                  label="First Name"
+                  dataKey="firstName"
+                  width={200}
+                />
+                <Column
+                  label="Last Name"
+                  dataKey="lastName"
+                  width={200}
+                />
+                <Column
+                  label="Email"
+                  dataKey="email"
+                  width={200}
+                />
+            </Table>
+        )
+    }
+}
+
+export default connect(state => ({
+    people: personListSelector(state),
+    loading: state[moduleName].loading
+}), {fetchAll})(PersonList)

src/components/people/PersonList.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {shallow, mount} from 'enzyme'
+import {PersonList} from './PersonList'
+import Loader from '../common/Loader'
+import renderer from 'react-test-renderer'
+import people from '../../mocks/people.mock'
+
+jest.mock('react-dom', () => ({
+  findDOMNode: () => ({}),
+}));
+
+const testPeople = people;
+
+it('should render loader', () => {
+    const container = shallow(<PersonList loading />)
+
+    expect(container.contains(<Loader/>))
+})
+
+it('should request fetch data', (done) => {
+  mount(<PersonList people = {[]} fetchAll={done}/>)
+})
+
+it('should renders correctly', () => {
+  const tree = renderer.create(<PersonList people={testPeople} fetchAll={() => null} />);
+  expect(tree).toMatchSnapshot();
+});