From 98570cbf8bc0aea599613762de97098802cc939a Mon Sep 17 00:00:00 2001 From: Andrey Kotlyar Date: Sun, 15 Jul 2018 13:05:29 +0300 Subject: [PATCH 1/2] HT4.2 --- admin/src/components/people/people-list.js | 15 ++++-- admin/src/config.js | 12 ++--- admin/src/ducks/people.js | 54 +++++++++++++--------- 3 files changed, 49 insertions(+), 32 deletions(-) diff --git a/admin/src/components/people/people-list.js b/admin/src/components/people/people-list.js index 019b152..c829fc0 100644 --- a/admin/src/components/people/people-list.js +++ b/admin/src/components/people/people-list.js @@ -1,11 +1,15 @@ import React, { Component } from 'react' import { connect } from 'react-redux' -import { peopleSelector } from '../../ducks/people' +import { peopleSelector, fetchPersons } from '../../ducks/people' import PersonCard from './person-card' class PeopleList extends Component { static propTypes = {} + componentDidMount() { + this.props.fetchPersons() + } + render() { return (
@@ -17,6 +21,9 @@ class PeopleList extends Component { } } -export default connect((state) => ({ - people: peopleSelector(state) -}))(PeopleList) +export default connect( + (state) => ({ + people: peopleSelector(state) + }), + { fetchPersons } +)(PeopleList) diff --git a/admin/src/config.js b/admin/src/config.js index a6889dc..222d59d 100644 --- a/admin/src/config.js +++ b/admin/src/config.js @@ -5,12 +5,12 @@ import 'firebase/database' export const appName = 'adv-react-25-06' const config = { - apiKey: 'AIzaSyDzqwnZ_39QyqhxYZVPjVH8eBww7DUBmVc', - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: '', - messagingSenderId: '874599443389' + apiKey: 'AIzaSyAYsZJuajlVT1qjHN0t6O4aOgCQ-Rp9-4o', + authDomain: 'admin-app-e57f9.firebaseapp.com', + databaseURL: 'https://admin-app-e57f9.firebaseio.com', + projectId: 'admin-app-e57f9', + storageBucket: 'admin-app-e57f9.appspot.com', + messagingSenderId: '517072570954' } initializeApp(config) diff --git a/admin/src/ducks/people.js b/admin/src/ducks/people.js index 08d582f..1a8416d 100644 --- a/admin/src/ducks/people.js +++ b/admin/src/ducks/people.js @@ -1,9 +1,10 @@ +import firebase from 'firebase/app' import { appName } from '../config' -import { Record, List } from 'immutable' +import { Record, OrderedMap } from 'immutable' import { reset } from 'redux-form' import { createSelector } from 'reselect' -import { put, takeEvery, call } from 'redux-saga/effects' -import { generateId } from './utils' +import { put, takeEvery, call, all } from 'redux-saga/effects' +import { generateId, fbToEntities } from './utils' /** * Constants @@ -13,6 +14,9 @@ const prefix = `${appName}/${moduleName}` export const ADD_PERSON = `${prefix}/ADD_PERSON` export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS` +export const FETCH_PERSONS = `${prefix}/FETCH_PERSONS` +export const FETCH_PERSONS_SUCCESS = `${prefix}/FETCH_PERSONS_SUCCESS` + export const ADD_EVENT = `${prefix}/ADD_EVENT` /** @@ -27,20 +31,7 @@ const PersonRecord = Record({ }) const ReducerState = Record({ - entities: new List([ - new PersonRecord({ - firstName: 'Roman', - lastName: 'Iakobchuk', - email: 'asdf@adsf.com', - uid: 1 - }), - new PersonRecord({ - firstName: 'ASD', - lastName: 'SDFsdfg', - email: 'gjkhk@adsf.com', - uid: 2 - }) - ]) + entities: new OrderedMap() }) export default function reducer(state = new ReducerState(), action) { @@ -48,9 +39,9 @@ export default function reducer(state = new ReducerState(), action) { switch (type) { case ADD_PERSON: - return state.update('entities', (entities) => - entities.push(new PersonRecord(payload.person)) - ) + return state.mergeIn(['entities'], fbToEntities(payload, PersonRecord)) + case FETCH_PERSONS_SUCCESS: + return state.mergeIn(['entities'], fbToEntities(payload, PersonRecord)) default: return state @@ -93,6 +84,12 @@ export function addEventToPerson(eventUid, personUid) { } } +export function fetchPersons() { + return { + type: FETCH_PERSONS + } +} + /** * Sagas */ @@ -104,11 +101,24 @@ export function* addPersonSaga(action) { type: ADD_PERSON_SUCCESS, payload: { uid, ...action.payload.person } } - + const ref = firebase.database().ref('/peoples') + yield call([ref, ref.push], successAction.payload) yield put(successAction) yield put(reset('person')) } +export function* fetchPersonsSaga() { + const ref = firebase.database().ref('/peoples') + const resp = yield call([ref, ref.once], 'value') + yield put({ + type: FETCH_PERSONS_SUCCESS, + payload: resp.val() + }) +} + export function* saga() { - yield takeEvery(ADD_PERSON, addPersonSaga) + yield all([ + takeEvery(ADD_PERSON, addPersonSaga), + takeEvery(FETCH_PERSONS, fetchPersonsSaga) + ]) } From cb22c98965d40f40a23eaf0ad3d9118dd75af6ff Mon Sep 17 00:00:00 2001 From: Andrey Kotlyar Date: Sun, 15 Jul 2018 14:13:01 +0300 Subject: [PATCH 2/2] HT4.1 --- admin/src/components/common/trash.js | 44 ++++++++++++++++++++++++++++ admin/src/ducks/people.js | 34 +++++++++++++++++---- admin/src/routes/all-page.js | 2 ++ 3 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 admin/src/components/common/trash.js diff --git a/admin/src/components/common/trash.js b/admin/src/components/common/trash.js new file mode 100644 index 0000000..510b36d --- /dev/null +++ b/admin/src/components/common/trash.js @@ -0,0 +1,44 @@ +import React, { Component } from 'react' +import { DropTarget } from 'react-dnd' +import { connect } from 'react-redux' +import { deletePerson } from '../../ducks/people' + +class Trash extends Component { + render() { + const { connectDropTarget, canDrop, hovered } = this.props + + const bg = canDrop ? (hovered ? 'red' : '#ffcccc') : '#fff0f0' + + return connectDropTarget( +
+ Перетащите для удаления +
+ ) + } +} + +const spec = { + drop(props, monitor) { + props.deletePerson(monitor.getItem().uid) + } +} + +const collect = (connect, monitor) => ({ + connectDropTarget: connect.dropTarget(), + canDrop: monitor.canDrop(), + hovered: monitor.isOver() +}) + +export default connect( + null, + { deletePerson } +)(DropTarget(['person'], spec, collect)(Trash)) diff --git a/admin/src/ducks/people.js b/admin/src/ducks/people.js index 1a8416d..642ab05 100644 --- a/admin/src/ducks/people.js +++ b/admin/src/ducks/people.js @@ -17,6 +17,9 @@ export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS` export const FETCH_PERSONS = `${prefix}/FETCH_PERSONS` export const FETCH_PERSONS_SUCCESS = `${prefix}/FETCH_PERSONS_SUCCESS` +export const DELETE_PERSON = `${prefix}/DELETE_PERSON` +export const DELETE_PERSON_SUCCESS = `${prefix}/DELETE_PERSON_SUCCESS` + export const ADD_EVENT = `${prefix}/ADD_EVENT` /** @@ -42,7 +45,8 @@ export default function reducer(state = new ReducerState(), action) { return state.mergeIn(['entities'], fbToEntities(payload, PersonRecord)) case FETCH_PERSONS_SUCCESS: return state.mergeIn(['entities'], fbToEntities(payload, PersonRecord)) - + case DELETE_PERSON_SUCCESS: + return state.removeIn(['entities', action.payload]) default: return state } @@ -90,16 +94,22 @@ export function fetchPersons() { } } +export function deletePerson(personId) { + return { + type: DELETE_PERSON, + payload: { personId } + } +} /** * Sagas */ export function* addPersonSaga(action) { - const uid = yield call(generateId) + // const uid = yield call(generateId) const successAction = { type: ADD_PERSON_SUCCESS, - payload: { uid, ...action.payload.person } + payload: action.payload.person } const ref = firebase.database().ref('/peoples') yield call([ref, ref.push], successAction.payload) @@ -110,15 +120,27 @@ export function* addPersonSaga(action) { export function* fetchPersonsSaga() { const ref = firebase.database().ref('/peoples') const resp = yield call([ref, ref.once], 'value') + if (resp.val()) { + yield put({ + type: FETCH_PERSONS_SUCCESS, + payload: resp.val() + }) + } +} + +export function* deletePersonSaga(action) { + const ref = firebase.database().ref(`/peoples/${action.payload.personId}`) + yield call([ref, ref.remove]) yield put({ - type: FETCH_PERSONS_SUCCESS, - payload: resp.val() + type: DELETE_PERSON_SUCCESS, + payload: action.payload }) } export function* saga() { yield all([ takeEvery(ADD_PERSON, addPersonSaga), - takeEvery(FETCH_PERSONS, fetchPersonsSaga) + takeEvery(FETCH_PERSONS, fetchPersonsSaga), + takeEvery(DELETE_PERSON, deletePersonSaga) ]) } diff --git a/admin/src/routes/all-page.js b/admin/src/routes/all-page.js index 17707b6..2e60e9b 100644 --- a/admin/src/routes/all-page.js +++ b/admin/src/routes/all-page.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import EventsTable from '../components/events/virtualized-lazy-table' import SelectedEvents from '../components/events/selected-events' import PeopleList from '../components/people/people-list' +import Trash from '../components/common/trash' class AllPage extends Component { static propTypes = {} @@ -9,6 +10,7 @@ class AllPage extends Component { render() { return (
+