Home task 3.1

admin-panel/src/components/events/EventsTableVirtualized.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {connect} from 'react-redux'
 import {fetchAllEvents, selectEvent, eventListSelector, loadedSelector, loadingSelector} from '../../ducks/events'
 import Loader from '../common/Loader'
-import {Table, Column} from 'react-virtualized'
+import {Table, Column, InfiniteLoader} from 'react-virtualized'
 import 'react-virtualized/styles.css'
 
 export class EventsTableVirtualized extends Component {

admin-panel/src/components/people/PeopleList.js

@@ -1,15 +1,18 @@
 import React, { Component } from 'react'
 import {connect} from 'react-redux'
-import {peopleListSelector} from '../../ducks/people'
+import {peopleListSelector, getPeople, loadingSelector} from '../../ducks/people'
 import {List} from 'react-virtualized'
+import Loader from '../common/Loader'
 import 'react-virtualized/styles.css'
 
 class PeopleList extends Component {
-    static propTypes = {
-
-    };
+    componentDidMount() {
+      this.props.getPeople()
+    }
 
     render() {
+        if (this.props.loading) return <Loader />
+
         return <List
             rowRenderer={this.rowRenderer}
             rowCount={this.props.people.length}
@@ -40,5 +43,6 @@ class PeopleList extends Component {
 }
 
 export default connect((state) => ({
-    people: peopleListSelector(state)
-}))(PeopleList)
+    people: peopleListSelector(state),
+    loading: loadingSelector(state)
+}), { getPeople })(PeopleList)

admin-panel/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-04-12'
+export const appName = 'advreact-386f6'
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    apiKey: "AIzaSyDSPRtistNZnrnNMJXCra5uS9Ugpken3F0",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "95255462276"
+    messagingSenderId: "648901552269"
 }
 
 firebase.initializeApp(config)

admin-panel/src/ducks/people.js

@@ -1,27 +1,33 @@
 import {appName} from '../config'
 import {Record, OrderedMap} from 'immutable'
 import {createSelector} from 'reselect'
-import {put, call, all, takeEvery} from 'redux-saga/effects'
+import {put, call, all, takeEvery, takeLatest} from 'redux-saga/effects'
 import {reset} from 'redux-form'
-import {generateId} from './utils'
+import firebase from 'firebase'
 
 /**
  * Constants
  * */
 export const moduleName = 'people'
 const prefix = `${appName}/${moduleName}`
-export const ADD_PERSON = `${prefix}/ADD_PERSON`
+export const ADD_PERSON_REQUEST = `${prefix}/ADD_PERSON_REQUEST`
 export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS`
+export const ADD_PERSON_ERROR = `${prefix}/ADD_PERSON_ERROR`
+
+export const GET_PEOPLE_REQUEST = `${prefix}/GET_PEOPLE_REQUEST`
+export const GET_PEOPLE_SUCCESS = `${prefix}/GET_PEOPLE_SUCCESS`
+export const GET_PEOPLE_ERROR = `${prefix}/GET_PEOPLE_ERROR`
 
 /**
  * Reducer
  * */
 const ReducerState = Record({
-    entities: new OrderedMap({})
+    entities: new OrderedMap({}),
+    loading: false,
+    error: null
 })
 
 const PersonRecord = Record({
-    id: null,
     firstName: null,
     lastName: null,
     email: null
@@ -31,8 +37,30 @@ export default function reducer(state = new ReducerState(), action) {
     const {type, payload} = action
 
     switch (type) {
+        case ADD_PERSON_REQUEST:
+        case GET_PEOPLE_REQUEST:
+            return state.set('loading', true)
+
         case ADD_PERSON_SUCCESS:
-            return state.setIn(['entities', payload.uid],new PersonRecord(payload))
+            return state
+              .set('loading', false)
+              .setIn(['entities', payload.uid], new PersonRecord(payload))
+
+        case GET_PEOPLE_SUCCESS:
+            let nextState = state;
+
+            Object.entries(payload).forEach(([key, val]) => {
+              nextState = nextState.setIn(['entities', key], new PersonRecord(val))
+            })
+
+            return nextState
+              .set('loading', false)
+
+        case ADD_PERSON_ERROR:
+        case GET_PEOPLE_ERROR:
+          return state
+              .set('loading', false)
+              .set('error', payload.error.message)
 
         default:
             return state
@@ -45,37 +73,73 @@ export default function reducer(state = new ReducerState(), action) {
 export const stateSelector = state => state[moduleName]
 export const entitiesSelector = createSelector(stateSelector, state => state.entities)
 export const peopleListSelector = createSelector(entitiesSelector, entities => entities.valueSeq().toArray())
+export const loadingSelector = createSelector(stateSelector, state => state.loading)
 
 /**
  * Action Creators
  * */
 
 export function addPerson(person) {
     return {
-        type: ADD_PERSON,
+        type: ADD_PERSON_REQUEST,
         payload: { person }
     }
 }
 
+export function getPeople() {
+    return {
+        type: GET_PEOPLE_REQUEST,
+    }
+}
+
 /**
  * Sagas
  */
 
-export const addPersonSaga = function * (action) {
-    const { person } = action.payload
+export const fetchPeople = function* () {
+  const ref = firebase.database().ref('/people')
+
+  try {
+    const dataSnapshot = yield call([ref, ref.once], 'value')
 
-    const uid = yield call(generateId)
+    console.log('snapshot.val-->', dataSnapshot.val())
+
+    yield put({
+      type: GET_PEOPLE_SUCCESS,
+      payload: dataSnapshot.val()
+    })
+  } catch (error) {
+      yield put({
+        type: GET_PEOPLE_ERROR,
+        payload: { error }
+      })
+  }
+}
+
+export const addPersonSaga = function * (action) {
+  const ref = firebase.database().ref('/people')
+  const { person } = action.payload
+
+  try {
+    const data = yield call([ref, ref.push], person)
 
     yield put({
         type: ADD_PERSON_SUCCESS,
-        payload: {uid, ...person}
+        payload: {uid: data.key, ...person}
     })
 
     yield put(reset('person'))
+  } catch(error) {
+      yield put({
+        type: ADD_PERSON_ERROR,
+        payload: { error }
+      })
+  }
 }
 
 export const saga = function * () {
     yield all([
-        takeEvery(ADD_PERSON, addPersonSaga)
+        takeEvery(ADD_PERSON_REQUEST, addPersonSaga),
+        takeLatest(GET_PEOPLE_REQUEST, fetchPeople)
     ])
 }