From 822ddbe6afd566fb5e6388bede3aa31daf5a7434 Mon Sep 17 00:00:00 2001 From: varenik163 Date: Tue, 5 Sep 2017 23:14:10 +0400 Subject: [PATCH 1/4] add protected route --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3bd00c1..42f95bc 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ ##HT1.1 Сделать форму для добавления людей(firstName, lastName, email) с валидацией, по /people роуту ##HT1.2 добавлять их в редакс-стор -##HT1.3 Создать собственный проект на firebase и использовать его в своих ДЗ \ No newline at end of file +##HT1.3 Создать собственный проект на firebase и использовать его в своих Д \ No newline at end of file From 71b21a4c438479252066ba93fd22dd9c1f81f541 Mon Sep 17 00:00:00 2001 From: varenik163 Date: Wed, 6 Sep 2017 02:51:34 +0400 Subject: [PATCH 2/4] add to FB, people List --- src/components/people/PeopleList.js | 40 +++++++++++++++ src/components/routes/PersonPage.js | 2 + src/config.js | 16 +++--- src/ducks/people.js | 77 ++++++++++++++++++++++++----- src/ducks/utils.js | 8 ++- src/mocks/index.js | 5 ++ src/redux/entitiesSelector.js | 6 +++ 7 files changed, 134 insertions(+), 20 deletions(-) create mode 100644 src/components/people/PeopleList.js create mode 100644 src/redux/entitiesSelector.js diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js new file mode 100644 index 0000000..7bcfd4a --- /dev/null +++ b/src/components/people/PeopleList.js @@ -0,0 +1,40 @@ +import React, {Component} from 'react' +import {connect} from 'react-redux' +import {moduleName, peopleListSelector, fetchPeople} from '../../ducks/people' +import {List} from 'react-virtualized' +import 'react-virtualized/styles.css' + +class PeopleList extends Component { + + componentDidMount(){ + this.props.fetchPeople() + } + + render() { + + const {people} = this.props + + return + } + + rowRenderer ({key, index, isScrolling, isVisible, style}) { + return ( +
+ {this.props.people[index]} +
+ ) + } +} + +export default connect(state => ({ + people: peopleListSelector(state) +}), {fetchPeople})(PeopleList) \ No newline at end of file diff --git a/src/components/routes/PersonPage.js b/src/components/routes/PersonPage.js index fd69263..9bf8df9 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 PeopleList from '../people/PeopleList' class PersonPage extends Component { static propTypes = { @@ -13,6 +14,7 @@ class PersonPage extends Component {

Add new person

+
) } diff --git a/src/config.js b/src/config.js index e8d8d78..3077535 100644 --- a/src/config.js +++ b/src/config.js @@ -1,13 +1,13 @@ import firebase from 'firebase' -export const appName = "advreact-21-08" +export const appName = "advanced-react-varenik163" export const firebaseConfig = { - apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g", - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: `${appName}.appspot.com`, - messagingSenderId: "789814589283" -} + apiKey: "AIzaSyDVBpwgGnjIYZu7iKWsPUiUPVvVc92XC2w", + authDomain: "advanced-react-varenik163.firebaseapp.com", + databaseURL: "https://advanced-react-varenik163.firebaseio.com", + projectId: "advanced-react-varenik163", + storageBucket: "advanced-react-varenik163.appspot.com", + messagingSenderId: "860869576887" +}; firebase.initializeApp(firebaseConfig) \ No newline at end of file diff --git a/src/ducks/people.js b/src/ducks/people.js index 6a2a848..6077ffd 100644 --- a/src/ducks/people.js +++ b/src/ducks/people.js @@ -1,11 +1,18 @@ import {appName} from '../config' import {Record, List} from 'immutable' -import {put, call, takeEvery} from 'redux-saga/effects' -import {generateId} from './utils' +import {put, call, all, take} from 'redux-saga/effects' +import {generateId, fbPeopleDatatoEntities} from './utils' import {reset} from 'redux-form' +import {addPersonToFB} from '../mocks/index' +import {createSelector} from 'reselect' +import {entitiesSelector} from "../redux/entitiesSelector" +import firebase from 'firebase' + const ReducerState = Record({ - entities: new List([]) + entities: new List([]), + loading: false, + loaded: false }) const PersonRecord = Record({ @@ -19,20 +26,37 @@ export const moduleName = 'people' const prefix = `${appName}/${moduleName}` export const ADD_PERSON_REQUEST = `${prefix}/ADD_PERSON_REQUEST` export const ADD_PERSON = `${prefix}/ADD_PERSON` - +export const FETCH_PEOPLE_REQUEST = `${prefix}/FETCH_PEOPLE_REQUEST` +export const FETCH_PEOPLE_SUCCESS = `${prefix}/FETCH_PEOPLE_SUCCESS` export default function reducer(state = new ReducerState(), action) { const {type, payload} = action switch (type) { + case FETCH_PEOPLE_REQUEST: return state + .set('loading', true) + case ADD_PERSON: return state.update('entities', entities => entities.push(new PersonRecord(payload))) + case FETCH_PEOPLE_SUCCESS: + console.log(payload) + return state + .set('loading', false) + .set('loaded', true) + .set('entities', fbPeopleDatatoEntities(payload, PersonRecord)) + default: return state } } + + +export const peopleListSelector = createSelector(entitiesSelector(moduleName), entities => ( + entities.valueSeq().toArray() +)) + export function addPerson(person) { return { type: ADD_PERSON_REQUEST, @@ -40,15 +64,43 @@ export function addPerson(person) { } } +export function fetchPeople() { + return { + type: FETCH_PEOPLE_REQUEST + } +} + export const addPersonSaga = function * (action) { - const id = yield call(generateId) - yield put({ - type: ADD_PERSON, - payload: {...action.payload, id} - }) + while(true) { + yield take(ADD_PERSON_REQUEST) + + const id = yield call(generateId) - yield put(reset('person')) + addPersonToFB(action.payload) + + yield put({ + type: ADD_PERSON, + payload: {...action.payload, id} + }) + + yield put(reset('person')) + } +} + +export const fetchPeopleSaga = function * () { + while (true) { + yield take(FETCH_PEOPLE_REQUEST) + + const ref = firebase.database().ref('people') + + const data = yield call([ref, ref.once], 'value') + + yield put({ + type: FETCH_PEOPLE_SUCCESS, + payload: data.val() + }) + } } /* @@ -65,5 +117,8 @@ export function addPerson(person) { */ export const saga = function * () { - yield takeEvery(ADD_PERSON_REQUEST, addPersonSaga) + yield all([ + addPersonSaga, + fetchPeopleSaga() + ]) } diff --git a/src/ducks/utils.js b/src/ducks/utils.js index be9b34c..ed64312 100644 --- a/src/ducks/utils.js +++ b/src/ducks/utils.js @@ -1,4 +1,4 @@ -import {OrderedMap, Map} from 'immutable' +import {OrderedMap, Map, List} from 'immutable' export function generateId() { return Date.now() @@ -8,4 +8,10 @@ export function fbDatatoEntities(data, RecordModel = Map) { return (new OrderedMap(data)).mapEntries(([uid, value]) => ( [uid, (new RecordModel(value)).set('uid', uid)] )) +} + +export function fbPeopleDatatoEntities(data, RecordModel = Map) { + return (new List(data)).mapEntries(([uid, value]) => ( + [uid, (new RecordModel(value)).set('id', uid)] + )) } \ No newline at end of file diff --git a/src/mocks/index.js b/src/mocks/index.js index f6189bf..4b428fc 100644 --- a/src/mocks/index.js +++ b/src/mocks/index.js @@ -10,4 +10,9 @@ window.runMigration = function() { firebase.database().ref('/events').once('value', data => { if (!data.val()) saveEventsToFB() }) +} + +export function addPersonToFB(person) { + const peopleRef = firebase.database().ref('/people') + peopleRef.push(person) } \ No newline at end of file diff --git a/src/redux/entitiesSelector.js b/src/redux/entitiesSelector.js new file mode 100644 index 0000000..06f3713 --- /dev/null +++ b/src/redux/entitiesSelector.js @@ -0,0 +1,6 @@ +import {createSelector} from 'reselect' + +export function entitiesSelector(moduleName) { + const stateSelector = state => state[moduleName] + return createSelector(stateSelector, state => state.entities) +} \ No newline at end of file From a9fe876b6b803d13cde20dccddf9891a03529929 Mon Sep 17 00:00:00 2001 From: varenik163 Date: Wed, 6 Sep 2017 22:03:29 +0400 Subject: [PATCH 3/4] varenik163 HT_3 --- src/components/people/PeopleList.js | 20 +++++++++++++++----- src/components/people/PeopleList.test.js | 23 +++++++++++++++++++++++ src/ducks/people.js | 23 ++++++++++------------- src/ducks/utils.js | 6 +++--- 4 files changed, 51 insertions(+), 21 deletions(-) create mode 100644 src/components/people/PeopleList.test.js diff --git a/src/components/people/PeopleList.js b/src/components/people/PeopleList.js index 7bcfd4a..1919109 100644 --- a/src/components/people/PeopleList.js +++ b/src/components/people/PeopleList.js @@ -6,6 +6,10 @@ import 'react-virtualized/styles.css' class PeopleList extends Component { + constructor(props) { + super(props) + } + componentDidMount(){ this.props.fetchPeople() } @@ -13,23 +17,29 @@ class PeopleList extends Component { render() { const {people} = this.props + console.log(people) - return + rowRenderer={this.rowRenderer(people)} + /> } - rowRenderer ({key, index, isScrolling, isVisible, style}) { + rowRenderer = people => ({key, index, isScrolling, isVisible, style}) => { return (
- {this.props.people[index]} + {people[index].firstName } +   + {people[index].lastName } +   + {people[index].email }
) } diff --git a/src/components/people/PeopleList.test.js b/src/components/people/PeopleList.test.js new file mode 100644 index 0000000..2faeed2 --- /dev/null +++ b/src/components/people/PeopleList.test.js @@ -0,0 +1,23 @@ +import React from 'react' +import {shallow, mount} from 'enzyme' +import {PeopleList} from './PeopleList' +import {PersonRecord} from '../../ducks/people' + +const testPeople = [{ + firstName: 'Alex', + lastName : 'Ivanov', + email: 'iva@gmail.com' +},{ + firstName: 'Masha', + lastName : 'Popova', + email: 'mash@gmail.com' +}].map(event => new PersonRecord({...event, uid: Math.random().toString()})) + +it('should render people list', () => { + const container = shallow() + + const rows = container.find('.test--people-list__row') + + expect(rows.length).toEqual(testEvents.length) +}) + diff --git a/src/ducks/people.js b/src/ducks/people.js index 6077ffd..da40c4c 100644 --- a/src/ducks/people.js +++ b/src/ducks/people.js @@ -1,6 +1,6 @@ import {appName} from '../config' import {Record, List} from 'immutable' -import {put, call, all, take} from 'redux-saga/effects' +import {put, call, all, take, takeEvery} from 'redux-saga/effects' import {generateId, fbPeopleDatatoEntities} from './utils' import {reset} from 'redux-form' import {addPersonToFB} from '../mocks/index' @@ -15,7 +15,7 @@ const ReducerState = Record({ loaded: false }) -const PersonRecord = Record({ +export const PersonRecord = Record({ id: null, firstName: null, lastName: null, @@ -72,20 +72,17 @@ export function fetchPeople() { export const addPersonSaga = function * (action) { - while(true) { - yield take(ADD_PERSON_REQUEST) + const id = yield call(generateId) - const id = yield call(generateId) + addPersonToFB(action.payload) - addPersonToFB(action.payload) + yield put({ + type: ADD_PERSON, + payload: {...action.payload, id} + }) - yield put({ - type: ADD_PERSON, - payload: {...action.payload, id} - }) + yield put(reset('person')) - yield put(reset('person')) - } } export const fetchPeopleSaga = function * () { @@ -117,8 +114,8 @@ export function addPerson(person) { */ export const saga = function * () { + yield takeEvery(ADD_PERSON_REQUEST, addPersonSaga)//не понял, как их объединить? yield all([ - addPersonSaga, fetchPeopleSaga() ]) } diff --git a/src/ducks/utils.js b/src/ducks/utils.js index ed64312..ab0d4ea 100644 --- a/src/ducks/utils.js +++ b/src/ducks/utils.js @@ -1,4 +1,4 @@ -import {OrderedMap, Map, List} from 'immutable' +import {OrderedMap, Map} from 'immutable' export function generateId() { return Date.now() @@ -11,7 +11,7 @@ export function fbDatatoEntities(data, RecordModel = Map) { } export function fbPeopleDatatoEntities(data, RecordModel = Map) { - return (new List(data)).mapEntries(([uid, value]) => ( + return Map(data).mapEntries(([uid, value]) => ( [uid, (new RecordModel(value)).set('id', uid)] - )) + )).toList() } \ No newline at end of file From 016236ac45d2328c567ae750543d3b9d2d06ad35 Mon Sep 17 00:00:00 2001 From: Valeriy Rysin Date: Thu, 7 Sep 2017 15:12:38 +0400 Subject: [PATCH 4/4] Update PeopleList.test.js --- src/components/people/PeopleList.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/people/PeopleList.test.js b/src/components/people/PeopleList.test.js index 2faeed2..91e2310 100644 --- a/src/components/people/PeopleList.test.js +++ b/src/components/people/PeopleList.test.js @@ -18,6 +18,6 @@ it('should render people list', () => { const rows = container.find('.test--people-list__row') - expect(rows.length).toEqual(testEvents.length) + expect(rows.length).toEqual(testPeople.length) })