HT4

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(
+      <div
+        style={{
+          width: 200,
+          height: 200,
+          backgroundColor: bg,
+          position: 'absolute',
+          right: 10,
+          padding: 20
+        }}
+      >
+        Перетащите для удаления
+      </div>
+    )
+  }
+}
+
+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))

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 (
       <div>
@@ -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)

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)

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,12 @@ 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 DELETE_PERSON = `${prefix}/DELETE_PERSON`
+export const DELETE_PERSON_SUCCESS = `${prefix}/DELETE_PERSON_SUCCESS`
+
 export const ADD_EVENT = `${prefix}/ADD_EVENT`
 
 /**
@@ -27,31 +34,19 @@ 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) {
   const { type, payload } = 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))
+    case DELETE_PERSON_SUCCESS:
+      return state.removeIn(['entities', action.payload])
     default:
       return state
   }
@@ -93,22 +88,59 @@ export function addEventToPerson(eventUid, personUid) {
   }
 }
 
+export function fetchPersons() {
+  return {
+    type: FETCH_PERSONS
+  }
+}
+
+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)
   yield put(successAction)
   yield put(reset('person'))
 }
 
+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: DELETE_PERSON_SUCCESS,
+    payload: action.payload
+  })
+}
+
 export function* saga() {
-  yield takeEvery(ADD_PERSON, addPersonSaga)
+  yield all([
+    takeEvery(ADD_PERSON, addPersonSaga),
+    takeEvery(FETCH_PERSONS, fetchPersonsSaga),
+    takeEvery(DELETE_PERSON, deletePersonSaga)
+  ])
 }

admin/src/routes/all-page.js

@@ -2,13 +2,15 @@ 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 = {}
 
   render() {
     return (
       <div>
+        <Trash />
         <PeopleList />
         <SelectedEvents />
         <EventsTable />