hometask4

admin/src/components/common/trash.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import { DropTarget } from 'react-dnd'
+import { connect } from 'react-redux'
+import { deletePerson } from '../../ducks/people'
+import { deleteEvent } from '../../ducks/events'
+
+const style = {
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  fontSize: '10em'
+}
+
+class Trash extends Component {
+  render() {
+    const { connectDropTarget } = this.props
+    return connectDropTarget(<div style={style}>🗑</div>)
+  }
+}
+
+const spec = {
+  drop(props, monitor) {
+    const { deletePerson, deleteEvent } = props
+    const itemType = monitor.getItemType()
+    const uid = monitor.getItem().uid
+
+    if (itemType === 'person') {
+      deletePerson(uid)
+    }
+
+    if (itemType === 'event') {
+      deleteEvent(uid)
+    }
+  }
+}
+
+const collect = (connect) => ({
+  connectDropTarget: connect.dropTarget()
+})
+
+export default connect(null, { deletePerson, deleteEvent })(
+  DropTarget(['person', 'event'], spec, collect)(Trash)
+)

admin/src/components/events/draggable-table-row.js

@@ -0,0 +1,19 @@
+import { DragSource } from 'react-dnd'
+import { defaultTableRowRenderer } from 'react-virtualized'
+
+const DraggableTableRow = ({ connectDragSource, ...props }) =>
+  connectDragSource(defaultTableRowRenderer(props))
+
+const spec = {
+  beginDrag(props) {
+    return {
+      uid: props.rowData.uid
+    }
+  }
+}
+
+const collect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource()
+})
+
+export default DragSource('event', spec, collect)(DraggableTableRow)

admin/src/components/events/virtualized-lazy-table.js

@@ -8,6 +8,7 @@ import {
   eventListSelector
 } from '../../ducks/events'
 import { Table, Column, InfiniteLoader } from 'react-virtualized'
+import DraggableTableRow from './draggable-table-row'
 import 'react-virtualized/styles.css'
 
 export class EventLazyTable extends Component {
@@ -38,6 +39,7 @@ export class EventLazyTable extends Component {
             onRowClick={this.handleRowClick}
             onRowsRendered={onRowsRendered}
             rowClassName="test__event_table_row"
+            rowRenderer={this.rowRenderer}
           >
             <Column label="title" dataKey="title" width={300} />
             <Column label="where" dataKey="where" width={250} />
@@ -48,6 +50,8 @@ export class EventLazyTable extends Component {
     )
   }
 
+  rowRenderer = (props) => <DraggableTableRow {...props} />
+
   isRowLoaded = ({ index }) => index < this.props.events.length
 
   loadMoreRows = () => {

admin/src/ducks/events.js

@@ -21,6 +21,10 @@ export const FETCH_LAZY_SUCCESS = `${prefix}/FETCH_LAZY_SUCCESS`
 
 export const TOGGLE_SELECTION = `${prefix}/TOGGLE_SELECTION`
 
+export const DELETE_EVENT = `${prefix}/DELETE_EVENT`
+export const DELETE_EVENT_START = `${prefix}/DELETE_EVENT_START`
+export const DELETE_EVENT_SUCCESS = `${prefix}/DELETE_EVENT_SUCCESS`
+
 /**
  * Reducer
  * */
@@ -70,6 +74,9 @@ export default function reducer(state = new ReducerRecord(), action) {
             : selected.add(payload.uid)
       )
 
+    case DELETE_EVENT_SUCCESS:
+      return state.deleteIn(['entities', payload.uid])
+
     default:
       return state
   }
@@ -129,6 +136,13 @@ export function fetchLazy() {
   }
 }
 
+export function deleteEvent(uid) {
+  return {
+    type: DELETE_EVENT,
+    payload: { uid }
+  }
+}
+
 /**
  * Sagas
  * */
@@ -179,6 +193,26 @@ export const fetchLazySaga = function*() {
   }
 }
 
+export function* deleteEventSaga({ payload: { uid } }) {
+  yield put({
+    type: DELETE_EVENT_START,
+    payload: { uid }
+  })
+
+  const eventRef = firebase.database().ref(`events/${uid}`)
+
+  yield call([eventRef, eventRef.remove])
+
+  yield put({
+    type: DELETE_EVENT_SUCCESS,
+    payload: { uid }
+  })
+}
+
 export function* saga() {
-  yield all([takeEvery(FETCH_ALL_REQUEST, fetchAllSaga), fetchLazySaga()])
+  yield all([
+    takeEvery(FETCH_ALL_REQUEST, fetchAllSaga),
+    fetchLazySaga(),
+    takeEvery(DELETE_EVENT, deleteEventSaga)
+  ])
 }

admin/src/ducks/people.js

@@ -1,7 +1,7 @@
 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, select } from 'redux-saga/effects'
 import { reset } from 'redux-form'
 import firebase from 'firebase/app'
 import { fbToEntities } from './utils'
@@ -15,10 +15,16 @@ export const ADD_PERSON = `${prefix}/ADD_PERSON`
 export const ADD_PERSON_START = `${prefix}/ADD_PERSON_START`
 export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS`
 
+export const DELETE_PERSON = `${prefix}/DELETE_PERSON`
+export const DELETE_PERSON_START = `${prefix}/DELETE_PERSON_START`
+export const DELETE_PERSON_SUCCESS = `${prefix}/DELETE_PERSON_SUCCESS`
+
 export const FETCH_ALL_REQUEST = `${prefix}/FETCH_ALL_REQUEST`
 export const FETCH_ALL_SUCCESS = `${prefix}/FETCH_ALL_SUCCESS`
 
 export const ADD_EVENT = `${prefix}/ADD_EVENT`
+export const ADD_EVENT_START = `${prefix}/ADD_EVENT_START`
+export const ADD_EVENT_SUCCESS = `${prefix}/ADD_EVENT_SUCCESS`
 
 /**
  * Reducer
@@ -42,6 +48,15 @@ export default function reducer(state = new ReducerState(), action) {
     case ADD_PERSON_SUCCESS:
       return state.setIn(['entities', payload.uid], new PersonRecord(payload))
 
+    case DELETE_PERSON_SUCCESS:
+      return state.deleteIn(['entities', payload.uid])
+
+    case ADD_EVENT_SUCCESS:
+      return state.updateIn(
+        ['entities', payload.personUid, 'events'],
+        (events) => [...events, payload.eventUid]
+      )
+
     case FETCH_ALL_SUCCESS:
       return state.set('entities', fbToEntities(payload, PersonRecord))
 
@@ -67,6 +82,10 @@ export const personSelector = createSelector(
   idSelector,
   (entities, uid) => entities.get(uid)
 )
+export const personEventsSelector = createSelector(
+  personSelector,
+  (person) => person.events
+)
 
 /**
  * Action Creators
@@ -79,6 +98,13 @@ export function addPerson(person) {
   }
 }
 
+export function deletePerson(uid) {
+  return {
+    type: DELETE_PERSON,
+    payload: { uid }
+  }
+}
+
 export function fetchAllPeople() {
   return {
     type: FETCH_ALL_REQUEST
@@ -114,6 +140,22 @@ export function* addPersonSaga(action) {
   yield put(reset('person'))
 }
 
+export function* deletePersonSaga({ payload: { uid } }) {
+  yield put({
+    type: DELETE_PERSON_START,
+    payload: { uid }
+  })
+
+  const personRef = firebase.database().ref(`people/${uid}`)
+
+  yield call([personRef, personRef.remove])
+
+  yield put({
+    type: DELETE_PERSON_SUCCESS,
+    payload: { uid }
+  })
+}
+
 export function* fetchAllSaga() {
   const peopleRef = firebase.database().ref('people')
 
@@ -125,9 +167,29 @@ export function* fetchAllSaga() {
   })
 }
 
+export function* addEventToPersonSaga({ payload: { eventUid, personUid } }) {
+  yield put({
+    type: ADD_EVENT_START,
+    payload: { eventUid, personUid }
+  })
+
+  const eventsRef = firebase.database().ref(`people/${personUid}/events`)
+
+  const events = yield select(personEventsSelector, { uid: personUid })
+
+  yield call([eventsRef, eventsRef.set], [...events, eventUid])
+
+  yield put({
+    type: ADD_EVENT_SUCCESS,
+    payload: { eventUid, personUid }
+  })
+}
+
 export const saga = function*() {
   yield all([
     takeEvery(ADD_PERSON, addPersonSaga),
-    takeEvery(FETCH_ALL_REQUEST, fetchAllSaga)
+    takeEvery(DELETE_PERSON, deletePersonSaga),
+    takeEvery(FETCH_ALL_REQUEST, fetchAllSaga),
+    takeEvery(ADD_EVENT, addEventToPersonSaga)
   ])
 }

admin/src/routes/events-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 EventsPage extends Component {
   static propTypes = {}
@@ -12,6 +13,7 @@ class EventsPage extends Component {
         <PeopleList />
         <SelectedEvents />
         <EventsTable />
+        <Trash />
       </div>
     )
   }