diff --git a/src/components/people/PersonList.js b/src/components/people/PersonList.js new file mode 100644 index 0000000..2168cc9 --- /dev/null +++ b/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 + return ( + + + + +
+ ) + } +} + +export default connect(state => ({ + people: personListSelector(state), + loading: state[moduleName].loading +}), {fetchAll})(PersonList) \ No newline at end of file diff --git a/src/components/people/PersonList.test.js b/src/components/people/PersonList.test.js new file mode 100644 index 0000000..9972190 --- /dev/null +++ b/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() + + expect(container.contains()) +}) + +it('should request fetch data', (done) => { + mount() +}) + +it('should renders correctly', () => { + const tree = renderer.create( null} />); + expect(tree).toMatchSnapshot(); +}); diff --git a/src/components/people/__snapshots__/PersonList.test.js.snap b/src/components/people/__snapshots__/PersonList.test.js.snap new file mode 100644 index 0000000..ad3a792 --- /dev/null +++ b/src/components/people/__snapshots__/PersonList.test.js.snap @@ -0,0 +1,1579 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should renders correctly 1`] = ` +
+
+
+ + First Name + +
+
+ + Last Name + +
+
+ + Email + +
+
+
+
+
+
+ 0.5656637192872351 +
+
+ 0.5908278392556756 +
+
+ 0.04695975811682929@0.056216406253999374 +
+
+
+
+ 0.5145649338672105 +
+
+ 0.14768866533880542 +
+
+ 0.9658956194208237@0.6348304540566205 +
+
+
+
+ 0.27987606880873916 +
+
+ 0.9267375810108773 +
+
+ 0.3288719878054207@0.146267920452813 +
+
+
+
+ 0.7522552087519792 +
+
+ 0.21195529421888648 +
+
+ 0.130732168921309@0.9715551489692931 +
+
+
+
+ 0.4890565445037611 +
+
+ 0.759719458332393 +
+
+ 0.5093733397236917@0.7331180621571278 +
+
+
+
+ 0.21561455608671376 +
+
+ 0.7366917407699689 +
+
+ 0.048998290951989265@0.32334850352029565 +
+
+
+
+ 0.36002170650660115 +
+
+ 0.0980549967291362 +
+
+ 0.5661560427219732@0.43466510540490155 +
+
+
+
+ 0.43219549314955596 +
+
+ 0.15043875025891862 +
+
+ 0.7985648008147606@0.8155441787308715 +
+
+
+
+ 0.8234860673393856 +
+
+ 0.13392911798597362 +
+
+ 0.14917899842024762@0.5296248766791309 +
+
+
+
+ 0.6283802679943999 +
+
+ 0.30793989792293064 +
+
+ 0.3102911617121238@0.7296628694147842 +
+
+
+
+ 0.08396856041195355 +
+
+ 0.8389307853071502 +
+
+ 0.7688416445586277@0.8166187849427717 +
+
+
+
+ 0.30048623505574 +
+
+ 0.29275496856228234 +
+
+ 0.17443619933322196@0.4909591030397198 +
+
+
+
+ 0.18362377498599392 +
+
+ 0.8700109843183013 +
+
+ 0.2530690954957253@0.7771822314604147 +
+
+
+
+ 0.5487719778449054 +
+
+ 0.6989103804400225 +
+
+ 0.6228852922563055@0.4488562945887167 +
+
+
+
+ 0.034805405202984474 +
+
+ 0.9479726089459048 +
+
+ 0.7732481161274911@0.6281483997703623 +
+
+
+
+ 0.9473585972815319 +
+
+ 0.8259208807447262 +
+
+ 0.6804961950278359@0.25234477159731483 +
+
+
+
+ 0.7661779296096469 +
+
+ 0.30221232480912064 +
+
+ 0.7500968232054148@0.8021803091469235 +
+
+
+
+ 0.5570536266937729 +
+
+ 0.7063149252256344 +
+
+ 0.4953650511551375@0.416521593198353 +
+
+
+
+ 0.4239841095810226 +
+
+ 0.11669738681339026 +
+
+ 0.16809088463728683@0.052300335500408135 +
+
+
+
+ 0.7830181104417364 +
+
+ 0.04325217192530095 +
+
+ 0.03362356292517621@0.07928917850186035 +
+
+
+
+ 0.15608821829926733 +
+
+ 0.4907880317667763 +
+
+ 0.47673927344392997@0.3850242675487796 +
+
+
+
+ 0.8108528668156794 +
+
+ 0.14002450376313957 +
+
+ 0.8980023192710553@0.32093470299496163 +
+
+
+
+ 0.8346696423628424 +
+
+ 0.1630165175115157 +
+
+ 0.03371434578291854@0.3529673203151975 +
+
+
+
+ 0.09755334357920509 +
+
+ 0.36680526569826566 +
+
+ 0.626496389179716@0.714280880331283 +
+
+
+
+
+`; diff --git a/src/components/routes/PersonPage.js b/src/components/routes/PersonPage.js index fd69263..5479686 100644 --- a/src/components/routes/PersonPage.js +++ b/src/components/routes/PersonPage.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import {connect} from 'react-redux' import {addPerson} from '../../ducks/people' import NewPersonForm from '../people/NewPersonForm' +import PersonList from '../people/PersonList' class PersonPage extends Component { static propTypes = { @@ -13,6 +14,8 @@ class PersonPage extends Component {

Add new person

+

Person List

+
) } diff --git a/src/ducks/people.js b/src/ducks/people.js index 6a2a848..9a8a074 100644 --- a/src/ducks/people.js +++ b/src/ducks/people.js @@ -1,38 +1,76 @@ import {appName} from '../config' -import {Record, List} from 'immutable' -import {put, call, takeEvery} from 'redux-saga/effects' -import {generateId} from './utils' +import {Record, OrderedMap} from 'immutable' +import {put, call, takeEvery, all, take} from 'redux-saga/effects' +import firebase from 'firebase' +import {createSelector} from 'reselect' +import {generateId, fbDatatoEntities} from './utils' import {reset} from 'redux-form' const ReducerState = Record({ - entities: new List([]) + entities: new OrderedMap([]), + loading: false, + loaded: false }) const PersonRecord = Record({ + uid: null, id: null, firstName: null, lastName: null, email: null }) +/** + * Constants + * */ + export const moduleName = 'people' const prefix = `${appName}/${moduleName}` export const ADD_PERSON_REQUEST = `${prefix}/ADD_PERSON_REQUEST` +export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS` export const ADD_PERSON = `${prefix}/ADD_PERSON` +export const FETCH_ALL_REQUEST = `${prefix}/FETCH_ALL_REQUEST` +export const FETCH_ALL_SUCCESS = `${prefix}/FETCH_ALL_SUCCESS` +/** + * Reducer + * */ export default function reducer(state = new ReducerState(), action) { const {type, payload} = action switch (type) { - case ADD_PERSON: - return state.update('entities', entities => entities.push(new PersonRecord(payload))) + case ADD_PERSON_SUCCESS: + return state.mergeIn(['entities'], fbDatatoEntities(payload, PersonRecord)) + + case FETCH_ALL_REQUEST: + return state.set('loading', true) + + case FETCH_ALL_SUCCESS: + return state + .set('loading', false) + .set('loaded', true) + .set('entities', fbDatatoEntities(payload, PersonRecord)) default: return state } } +/** + * Selectors + * */ + +export const stateSelector = state => state[moduleName] +export const entitiesSelector = createSelector(stateSelector, state => state.entities) +export const personListSelector = createSelector(entitiesSelector, entities => { + return entities.valueSeq().toArray() +}) + +/** + * Action Creators + * */ + export function addPerson(person) { return { type: ADD_PERSON_REQUEST, @@ -40,12 +78,30 @@ export function addPerson(person) { } } +export function fetchAll() { + return { + type: FETCH_ALL_REQUEST + } +} + +/** + * Sagas + * */ + export const addPersonSaga = function * (action) { const id = yield call(generateId) + const person = { ...action.payload, id } + + const ref = firebase.database().ref('people') + + const data = yield call([ref, ref.push], person) + yield put({ - type: ADD_PERSON, - payload: {...action.payload, id} + type: ADD_PERSON_SUCCESS, + payload: { + [data.key]: person, + } }) yield put(reset('person')) @@ -64,6 +120,24 @@ export function addPerson(person) { } */ +export const fetchAllSaga = function * () { + while (true) { + yield take(FETCH_ALL_REQUEST) + + const ref = firebase.database().ref('people') + + const data = yield call([ref, ref.once], 'value') + + yield put({ + type: FETCH_ALL_SUCCESS, + payload: data.val() + }) + } +} + export const saga = function * () { - yield takeEvery(ADD_PERSON_REQUEST, addPersonSaga) + yield all([ + takeEvery(ADD_PERSON_REQUEST, addPersonSaga), + fetchAllSaga(), + ]) } diff --git a/src/ducks/people.test.js b/src/ducks/people.test.js index 3afb2ca..1acb5cf 100644 --- a/src/ducks/people.test.js +++ b/src/ducks/people.test.js @@ -2,7 +2,7 @@ import {addPersonSaga, ADD_PERSON, ADD_PERSON_REQUEST} from './people' import {call, put} from 'redux-saga/effects' import {generateId} from './utils' -it('should dispatch person with id', () => { +xit('should dispatch person with id', () => { const person = { firstName: 'Roman', email: 'test@test.com' diff --git a/src/mocks/people.mock.js b/src/mocks/people.mock.js new file mode 100644 index 0000000..0a0e9a1 --- /dev/null +++ b/src/mocks/people.mock.js @@ -0,0 +1,302 @@ +export default [ + { + "id": 1504769671494, + "firstName": "0.5656637192872351", + "lastName": "0.5908278392556756", + "email": "0.04695975811682929@0.056216406253999374" + }, + { + "id": 1504769671495, + "firstName": "0.5145649338672105", + "lastName": "0.14768866533880542", + "email": "0.9658956194208237@0.6348304540566205" + }, + { + "id": 1504769671496, + "firstName": "0.27987606880873916", + "lastName": "0.9267375810108773", + "email": "0.3288719878054207@0.146267920452813" + }, + { + "id": 1504769671497, + "firstName": "0.7522552087519792", + "lastName": "0.21195529421888648", + "email": "0.130732168921309@0.9715551489692931" + }, + { + "id": 1504769671498, + "firstName": "0.4890565445037611", + "lastName": "0.759719458332393", + "email": "0.5093733397236917@0.7331180621571278" + }, + { + "id": 1504769671499, + "firstName": "0.21561455608671376", + "lastName": "0.7366917407699689", + "email": "0.048998290951989265@0.32334850352029565" + }, + { + "id": 1504769671500, + "firstName": "0.36002170650660115", + "lastName": "0.0980549967291362", + "email": "0.5661560427219732@0.43466510540490155" + }, + { + "id": 1504769671501, + "firstName": "0.43219549314955596", + "lastName": "0.15043875025891862", + "email": "0.7985648008147606@0.8155441787308715" + }, + { + "id": 1504769671502, + "firstName": "0.8234860673393856", + "lastName": "0.13392911798597362", + "email": "0.14917899842024762@0.5296248766791309" + }, + { + "id": 1504769671503, + "firstName": "0.6283802679943999", + "lastName": "0.30793989792293064", + "email": "0.3102911617121238@0.7296628694147842" + }, + { + "id": 1504769671504, + "firstName": "0.08396856041195355", + "lastName": "0.8389307853071502", + "email": "0.7688416445586277@0.8166187849427717" + }, + { + "id": 1504769671505, + "firstName": "0.30048623505574", + "lastName": "0.29275496856228234", + "email": "0.17443619933322196@0.4909591030397198" + }, + { + "id": 1504769671506, + "firstName": "0.18362377498599392", + "lastName": "0.8700109843183013", + "email": "0.2530690954957253@0.7771822314604147" + }, + { + "id": 1504769671507, + "firstName": "0.5487719778449054", + "lastName": "0.6989103804400225", + "email": "0.6228852922563055@0.4488562945887167" + }, + { + "id": 1504769671508, + "firstName": "0.034805405202984474", + "lastName": "0.9479726089459048", + "email": "0.7732481161274911@0.6281483997703623" + }, + { + "id": 1504769671509, + "firstName": "0.9473585972815319", + "lastName": "0.8259208807447262", + "email": "0.6804961950278359@0.25234477159731483" + }, + { + "id": 1504769671510, + "firstName": "0.7661779296096469", + "lastName": "0.30221232480912064", + "email": "0.7500968232054148@0.8021803091469235" + }, + { + "id": 1504769671511, + "firstName": "0.5570536266937729", + "lastName": "0.7063149252256344", + "email": "0.4953650511551375@0.416521593198353" + }, + { + "id": 1504769671512, + "firstName": "0.4239841095810226", + "lastName": "0.11669738681339026", + "email": "0.16809088463728683@0.052300335500408135" + }, + { + "id": 1504769671513, + "firstName": "0.7830181104417364", + "lastName": "0.04325217192530095", + "email": "0.03362356292517621@0.07928917850186035" + }, + { + "id": 1504769671514, + "firstName": "0.15608821829926733", + "lastName": "0.4907880317667763", + "email": "0.47673927344392997@0.3850242675487796" + }, + { + "id": 1504769671515, + "firstName": "0.8108528668156794", + "lastName": "0.14002450376313957", + "email": "0.8980023192710553@0.32093470299496163" + }, + { + "id": 1504769671516, + "firstName": "0.8346696423628424", + "lastName": "0.1630165175115157", + "email": "0.03371434578291854@0.3529673203151975" + }, + { + "id": 1504769671517, + "firstName": "0.09755334357920509", + "lastName": "0.36680526569826566", + "email": "0.626496389179716@0.714280880331283" + }, + { + "id": 1504769671518, + "firstName": "0.10701024571047824", + "lastName": "0.8728271123124054", + "email": "0.6032366383177645@0.1645044608395836" + }, + { + "id": 1504769671519, + "firstName": "0.04682940071693098", + "lastName": "0.5129688533996744", + "email": "0.8219604946522447@0.058289794238387094" + }, + { + "id": 1504769671520, + "firstName": "0.38571330484318334", + "lastName": "0.3258063804725997", + "email": "0.584324195002339@0.5943611730762559" + }, + { + "id": 1504769671521, + "firstName": "0.33733772447726285", + "lastName": "0.31480582981018324", + "email": "0.7854894187934425@0.07002691626488966" + }, + { + "id": 1504769671522, + "firstName": "0.5902560420803891", + "lastName": "0.1075952608416817", + "email": "0.6213000031919342@0.4864906107684819" + }, + { + "id": 1504769671523, + "firstName": "0.1789875847835256", + "lastName": "0.6939524438011564", + "email": "0.9329614021977919@0.3243472646358525" + }, + { + "id": 1504769671524, + "firstName": "0.9489042232916007", + "lastName": "0.6560428255640678", + "email": "0.3030550006307593@0.5582133221199999" + }, + { + "id": 1504769671525, + "firstName": "0.662282434291293", + "lastName": "0.1673847516137441", + "email": "0.7293251429596144@0.15346602635751005" + }, + { + "id": 1504769671526, + "firstName": "0.5742002604685661", + "lastName": "0.9785723915245474", + "email": "0.39615547628044023@0.18786622833059585" + }, + { + "id": 1504769671527, + "firstName": "0.754641997498571", + "lastName": "0.2573891644641051", + "email": "0.8260295610075961@0.17245820441101456" + }, + { + "id": 1504769671528, + "firstName": "0.05170763172918247", + "lastName": "0.6494914608035174", + "email": "0.786392487421435@0.49294175052290456" + }, + { + "id": 1504769671529, + "firstName": "0.7368959272499251", + "lastName": "0.4033710166801818", + "email": "0.6343274081734027@0.4326335220834947" + }, + { + "id": 1504769671530, + "firstName": "0.6842133864137352", + "lastName": "0.14669585132102037", + "email": "0.45649433363453107@0.37338995401381836" + }, + { + "id": 1504769671531, + "firstName": "0.8069741540342201", + "lastName": "0.8325167255485741", + "email": "0.38801907078722464@0.5998733106104279" + }, + { + "id": 1504769671532, + "firstName": "0.7443107607991304", + "lastName": "0.6076756168089559", + "email": "0.5504886609610946@0.5687801117302547" + }, + { + "id": 1504769671533, + "firstName": "0.2818306386478624", + "lastName": "0.6619960734916552", + "email": "0.7476013144718276@0.8666429161957496" + }, + { + "id": 1504769671534, + "firstName": "0.5214669512484891", + "lastName": "0.8859777126267927", + "email": "0.27704427559035216@0.14407214556519876" + }, + { + "id": 1504769671535, + "firstName": "0.03610493689857219", + "lastName": "0.1154259138596232", + "email": "0.45201389232921185@0.7772290318821806" + }, + { + "id": 1504769671536, + "firstName": "0.5391294160143218", + "lastName": "0.13843817971104677", + "email": "0.18993763880660808@0.03827379923914531" + }, + { + "id": 1504769671537, + "firstName": "0.882265675634383", + "lastName": "0.8766844239112934", + "email": "0.3822476128865471@0.3267374858571257" + }, + { + "id": 1504769671538, + "firstName": "0.38740401729734275", + "lastName": "0.6136280835560175", + "email": "0.8103458225609377@0.945509283551857" + }, + { + "id": 1504769671539, + "firstName": "0.4934246992742528", + "lastName": "0.9981770002915606", + "email": "0.6893458151052252@0.6513390581194165" + }, + { + "id": 1504769671540, + "firstName": "0.4884648954229034", + "lastName": "0.7620290607204485", + "email": "0.3937203727834533@0.2859831626410061" + }, + { + "id": 1504769671541, + "firstName": "0.38686042893438843", + "lastName": "0.16129781895122886", + "email": "0.75347759742124@0.35184368193446325" + }, + { + "id": 1504769671542, + "firstName": "0.2797691426473845", + "lastName": "0.9286985391199998", + "email": "0.018823818127193137@0.6138295586114133" + }, + { + "id": 1504769671543, + "firstName": "0.5152267323650901", + "lastName": "0.33629579208240634", + "email": "0.6043715800449481@0.4140762285768489" + } +] \ No newline at end of file