From 7b235ee803ff88c54ecb0dff9344769b44a7dc05 Mon Sep 17 00:00:00 2001 From: Aleksei Iakovets Date: Mon, 18 Dec 2017 00:26:38 +0300 Subject: [PATCH] Home task 3.1 --- .../events/EventsTableVirtualized.js | 2 +- .../src/components/people/PeopleList.js | 16 ++-- admin-panel/src/config.js | 6 +- admin-panel/src/ducks/people.js | 88 ++++++++++++++++--- 4 files changed, 90 insertions(+), 22 deletions(-) diff --git a/admin-panel/src/components/events/EventsTableVirtualized.js b/admin-panel/src/components/events/EventsTableVirtualized.js index c4f8c3e..07516d0 100644 --- a/admin-panel/src/components/events/EventsTableVirtualized.js +++ b/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 { diff --git a/admin-panel/src/components/people/PeopleList.js b/admin-panel/src/components/people/PeopleList.js index 1fe2549..ab48bd4 100644 --- a/admin-panel/src/components/people/PeopleList.js +++ b/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 + return ({ - people: peopleListSelector(state) -}))(PeopleList) \ No newline at end of file + people: peopleListSelector(state), + loading: loadingSelector(state) +}), { getPeople })(PeopleList) \ No newline at end of file diff --git a/admin-panel/src/config.js b/admin-panel/src/config.js index 65bba00..9bb9f02 100644 --- a/admin-panel/src/config.js +++ b/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) \ No newline at end of file diff --git a/admin-panel/src/ducks/people.js b/admin-panel/src/ducks/people.js index 9a5f996..2222ea9 100644 --- a/admin-panel/src/ducks/people.js +++ b/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,6 +73,7 @@ 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 @@ -52,30 +81,65 @@ export const peopleListSelector = createSelector(entitiesSelector, entities => e 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) ]) } \ No newline at end of file