Hw3

src/components/events/VirtualizedEventList.js

@@ -15,7 +15,7 @@ export class EventList extends Component {
 
     render() {
         const {loaded, events} = this.props
-//        if (loading) return <Loader/>
+        // if (loading) return <Loader/>
         return (
             <InfiniteLoader
                 isRowLoaded={this.isRowLoaded}

src/components/people/Persons.js

@@ -0,0 +1,44 @@
+import React,{Component} from 'react'
+import {Table, Column} from 'react-virtualized'
+import Loader from '../common/Loader'
+
+
+export default class Persons extends Component {
+    render(){
+
+        const {
+            entities=[],
+            loading=false
+        }=this.props
+
+        if (loading) return <Loader/>
+        return <div>
+            <Table
+            rowClassName="person-list__row"
+            rowCount={entities.length}
+            rowHeight={40}
+            headerHeight={50}
+            overscanRowCount={5}
+            width={700}
+            height={300}
+            rowGetter={({ index }) => entities[index]}>
+                        <Column
+                            label="firstName"
+                            dataKey="firstName"
+                            width={300}
+                        />
+                        <Column
+                            label="lastName"
+                            dataKey="lastName"
+                            width={250}
+                        />
+                        <Column
+                            label="email"
+                            dataKey="email"
+                            width={150}
+                        />
+                    </Table>
+        </div>
+    }
+
+}

src/components/people/person.test.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import {shallow} from "enzyme"
+import Persons from "./Persons"
+import NewPersonForm from "./NewPersonForm"
+import Loader from '../common/Loader'
+
+const entities=[{
+        id: 1,
+        firstName: 1,
+        lastName: 1,
+        email: 1
+    },
+    {
+        id: 2,
+        firstName: 2,
+        lastName: 2,
+        email: 2
+    },
+    {
+        id: 3,
+        firstName: 3,
+        lastName: 3,
+        email: 3
+    }
+]
+
+
+it('show loader',()=>{
+    //какие бы компоненты сюда не подставлял всегда проходит
+    //const container=shallow(<Persons/>)/NewPersonForm
+    //expect(container.contains(<Loader/>))/NewPersonForm
+    //пока я не написал вот так
+    const container=shallow(<Persons loading={true}/>)
+
+
+    expect(container.contains(<Loader/>)).toEqual(true)
+})
+
+//не прошкел тест=(
+//дедлайн поковырять не успел больше
+it('should render event list', () => {
+
+
+    const container = shallow(<Persons entities = {entities}/>)
+
+    const rows = container.find('.person-list__row')
+
+    expect(rows.length).toEqual(entities.length)
+})
+

src/components/routes/PersonPage.js

@@ -1,21 +1,40 @@
 import React, { Component } from 'react'
 import {connect} from 'react-redux'
-import {addPerson} from '../../ducks/people'
+import {addPerson,moduleName} from '../../ducks/people'
 import NewPersonForm from '../people/NewPersonForm'
+import Persons from '../people/Persons'
 
 class PersonPage extends Component {
     static propTypes = {
 
     };
 
     render() {
+        const {
+            addPerson,
+            error,
+            entities
+        }=this.props
         return (
             <div>
                 <h2>Add new person</h2>
-                <NewPersonForm onSubmit={this.props.addPerson}/>
+                <NewPersonForm onSubmit={addPerson}/>
+                <p style={{
+                    color:"red",
+                    fontSize:"21px"
+                }}>{error}</p> 
+                <Persons 
+
+                entities={entities.valueSeq().toArray()}
+                />
             </div>
         )
     }
 }
 
-export default connect(null, {addPerson})(PersonPage)
+//entities={entities.valueSeq().toArray()}
+
+export default connect(store=>({
+    error:store[moduleName].error,
+    entities:store[moduleName].entities
+}), {addPerson})(PersonPage)

src/config.js

@@ -1,13 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = "advreact-21-08"
+export const appName ="advreact-277e8"// "advreact-21-08"
 export const firebaseConfig = {
-    apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g",
+    //apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g",
+    apiKey: "AIzaSyCw2LF9saF-AiDhbN464gWERWR35m5qm0Q",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: `${appName}.appspot.com`,
-    messagingSenderId: "789814589283"
+    messagingSenderId: "313050002315"//"789814589283"
 }
 
 firebase.initializeApp(firebaseConfig)

src/ducks/people.js

@@ -3,9 +3,11 @@ import {Record, List} from 'immutable'
 import {put, call, takeEvery} from 'redux-saga/effects'
 import {generateId} from './utils'
 import {reset} from 'redux-form'
+import firebase from 'firebase'
 
 const ReducerState = Record({
-    entities: new List([])
+    entities: new List([]),
+    error:null
 })
 
 const PersonRecord = Record({
@@ -19,15 +21,19 @@ 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 ADD_PERSON_ERROR = `${prefix}/ADD_PERSON_ERROR`
+
+
 
 
 export default function reducer(state = new ReducerState(), action) {
-    const {type, payload} = action
+    const {type, payload,error} = action
 
     switch (type) {
         case ADD_PERSON:
             return state.update('entities', entities => entities.push(new PersonRecord(payload)))
-
+        case ADD_PERSON_ERROR:
+            return state.set('error', error.message)
         default:
             return state
     }
@@ -39,18 +45,41 @@ export function addPerson(person) {
         payload: person
     }
 }
+export function addPersonToFB(userId, {firstName,lastName,email}) {
+    firebase.database().ref('users/' + userId).set({
+        firstName,
+        lastName,
+        email
+    });
+  }
+
 
 export const addPersonSaga = function * (action) {
-    const id = yield call(generateId)
+    try {
+        const id = yield call(generateId)
+
+        yield call(()=>addPersonToFB(id,action.payload))
+
+        yield put({
+             type: ADD_PERSON,
+             payload: {...action.payload, id}
+        })
 
-    yield put({
-        type: ADD_PERSON,
-        payload: {...action.payload, id}
-    })
+        yield put(reset('person'))
+
+    } catch (error) {
+        yield put({
+            type: ADD_PERSON_ERROR,
+            error
+        })
+    }
+
 
-    yield put(reset('person'))
+
 }
 
+
+
 /*
 export function addPerson(person) {
     return (dispatch) => {

src/ducks/people.test.js

@@ -1,10 +1,11 @@
-import {addPersonSaga, ADD_PERSON, ADD_PERSON_REQUEST} from './people'
+import {addPersonSaga,addPersonToFB, ADD_PERSON, ADD_PERSON_REQUEST} from './people'
 import {call, put} from 'redux-saga/effects'
 import {generateId} from './utils'
 
 it('should dispatch person with id', () => {
     const person = {
         firstName: 'Roman',
+        lastName:'Roman',
         email: 'test@test.com'
     }
 
@@ -13,10 +14,19 @@ it('should dispatch person with id', () => {
         payload: person
     })
 
+
+
     expect(saga.next().value).toEqual(call(generateId))
 
     const id = generateId()
 
+    //в начале я написл так
+    //expect(saga.next(id).value).toEqual(call(()=>addPersonToFB(id, person)))
+    //спустя тек оверфлоу написал так
+    //жестко или норм?
+     expect(JSON.stringify(saga.next(id).value))
+    .toBe(JSON.stringify(call(()=>addPersonToFB(id, person))))
+
     expect(saga.next(id).value).toEqual(put({
         type: ADD_PERSON,
         payload: {id, ...person}