Hw3

src/components/people/NewPersonForm.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import {reduxForm, Field} from 'redux-form'
 import validateEmail from 'email-validator'
 import ErrorField from '../common/ErrorField'
+import PeopleList from './PeopleList'
 
 class NewPersonForm extends Component {
     static propTypes = {
@@ -19,6 +20,7 @@ class NewPersonForm extends Component {
                         <input type="submit" />
                     </div>
                 </form>
+                <PeopleList/>
             </div>
         )
     }

src/components/people/PeopleList.js

@@ -0,0 +1,59 @@
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+import {moduleName, selectEvent, fetchAll} from '../../ducks/people'
+import {Table, Column, InfiniteLoader} from 'react-virtualized'
+import 'react-virtualized/styles.css'
+import Loader from '../common/Loader'
+
+export class PeopleList extends Component {
+    static propTypes = {};
+
+    componentDidMount() {
+        this.props.fetchAll()
+    }
+
+    render() {
+        const {loading, people} = this.props
+        return (
+            <div>
+                {loading ? <Loader/>:
+                    <Table
+                        rowCount={people.toArray().length}
+                        rowGetter={this.rowGetter}
+                        rowHeight={50}
+                        headerHeight={100}
+                        width={500}
+                        height={500}
+                        rowClassName="people_table"
+                    >
+                        <Column
+                            label="First Name"
+                            dataKey="firstName"
+                            width={300}
+                        />
+                        <Column
+                            label="Last Name"
+                            dataKey="lastName"
+                            width={250}
+                        />
+                        <Column
+                            label="Email"
+                            dataKey="email"
+                            width={150}
+                        />
+                    </Table>
+                }
+            </div>)
+}
+
+rowGetter = ({ index }) =>{
+    console.log(this.props.people.toArray()[index].email, 'this.props.people');
+    return this.props.people.toArray()[index];
+}
+
+}
+
+export default connect(state => ({
+    people: state.people,
+    loading: state[moduleName].loading
+}),{fetchAll})(PeopleList)

src/components/people/PeopleList.test.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import {shallow, mount} from 'enzyme'
+import events from '../../mocks/conferences'
+import {PeopleList} from './PeopleList'
+import Loader from '../common/Loader'
+import {Table, Column, InfiniteLoader} from 'react-virtualized'
+import {Record, OrderedMap, OrderedSet,List} from 'immutable'
+import people from '../../mocks/people'
+
+const testPeople = new OrderedMap({people})
+
+it('should render loader', () => {
+    const container = shallow(<PeopleList loading />)
+
+    expect(container.contains(<Loader/>))
+})
+

src/config.js

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

src/ducks/events.js

@@ -4,7 +4,6 @@ import {Record, OrderedMap, OrderedSet} from 'immutable'
 import firebase from 'firebase'
 import {createSelector} from 'reselect'
 import {fbDatatoEntities} from './utils'
-
 /**
  * Constants
  * */
@@ -36,7 +35,6 @@ export const EventRecord = Record({
     when: null,
     month: null,
     submissionDeadline: null
-
 })
 
 export default function reducer(state = new ReducerRecord(), action) {

src/ducks/people.js

@@ -1,8 +1,10 @@
 import {appName} from '../config'
-import {Record, List} from 'immutable'
-import {put, call, takeEvery} from 'redux-saga/effects'
+import {all, take, call, put, select, takeEvery} from 'redux-saga/effects'
 import {generateId} from './utils'
 import {reset} from 'redux-form'
+import firebase from 'firebase'
+import {Record, OrderedMap, OrderedSet,List} from 'immutable'
+import {fbDatatoEntities} from './utils'
 
 const ReducerState = Record({
     entities: new List([])
@@ -15,9 +17,25 @@ const PersonRecord = Record({
     email: null
 })
 
+
+export const ReducerRecord = Record({
+    entities: new OrderedMap({}),
+    selected: new OrderedSet([]),
+    loading: false,
+    loaded: false
+})
+
+export const PeopleRecord = Record({
+    email: null,
+    firstName: null,
+    lastName: null
+})
+
 export const moduleName = 'people'
 const prefix = `${appName}/${moduleName}`
 export const ADD_PERSON_REQUEST = `${prefix}/ADD_PERSON_REQUEST`
+export const FETCH_ALL_REQUEST = `${prefix}/FETCH_ALL_REQUEST`
+export const FETCH_ALL_SUCCESS = `${prefix}/FETCH_ALL_REQUEST`
 export const ADD_PERSON = `${prefix}/ADD_PERSON`
 
 
@@ -26,7 +44,14 @@ export default function reducer(state = new ReducerState(), action) {
 
     switch (type) {
         case ADD_PERSON:
-            return state.update('entities', entities => entities.push(new PersonRecord(payload)))
+            return state.update('people', entities => entities.push(new PersonRecord(payload)))
+
+        case FETCH_ALL_SUCCESS:
+            console.log(payload,'payload');
+            return new OrderedMap(payload);
+
+        case FETCH_ALL_REQUEST:
+            return state.set('loading', true);
 
         default:
             return state
@@ -39,10 +64,26 @@ export function addPerson(person) {
         payload: person
     }
 }
+export function fetchAll() {
+    return {
+        type: FETCH_ALL_REQUEST
+    }
+}
+
 
 export const addPersonSaga = function * (action) {
+
     const id = yield call(generateId)
 
+    function saveEventsToFB(person) {
+        const eventsRef = firebase.database().ref('/people')
+        eventsRef.push(person);
+    }
+
+    firebase.database().ref('/people').once('value', data => {
+        saveEventsToFB(action.payload)
+    })
+
     yield put({
         type: ADD_PERSON,
         payload: {...action.payload, id}
@@ -51,19 +92,24 @@ export const addPersonSaga = function * (action) {
     yield put(reset('person'))
 }
 
-/*
-export function addPerson(person) {
-    return (dispatch) => {
-        dispatch({
-            type: ADD_PERSON,
-            payload: {
-                person: {id: Date.now(), ...person}
-            }
+
+export const fetchAllSaga = function * () {
+    console.log('while start');
+    while (true) {
+        yield console.log('while true')
+        yield take(FETCH_ALL_REQUEST)
+        const ref = firebase.database().ref('people')
+        const data = yield call([ref, ref.once], 'value')
+        console.log(data.val(), 'data.val()');
+        yield put({
+            type: FETCH_ALL_SUCCESS,
+            payload: data.val()
         })
     }
 }
-*/
-
 export const saga = function * () {
-    yield takeEvery(ADD_PERSON_REQUEST, addPersonSaga)
+    yield all([
+        fetchAllSaga(),
+        takeEvery(ADD_PERSON_REQUEST, addPersonSaga),
+    ])
 }

src/mocks/people.js

@@ -0,0 +1,52 @@
+export default [
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    },
+    {
+        "email": "agent@agent.com",
+        "lastName": "Agent ",
+        "firstName": "Conf"
+    }
+]