Ht 4

admin/src/components/basket/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { DropTarget } from 'react-dnd'
+import { deletePerson } from '../../ducks/people'
+import { deleteEvent } from '../../ducks/events'
+
+class Basket extends Component {
+  static propTypes = {}
+
+  render() {
+    const { event, connectDropTarget, canDrop, hovered } = this.props
+
+    const borderColor = canDrop ? (hovered ? 'red' : 'green') : 'black'
+
+    return connectDropTarget(
+      <div style={{ border: `1px solid ${borderColor}`, height: 200 }}>
+        <h2>Корзина</h2>
+        <h3>Перетащите в корзину чтобы удалить пользователя или событие</h3>
+      </div>
+    )
+  }
+}
+
+const spec = {
+  drop(props, monitor) {
+    const { deletePerson, deleteEvent } = props
+    let item = monitor.getItem()
+    if (item.uid) deletePerson(monitor.getItem().uid)
+
+    if (item.eventId) {
+      console.log('---', 'eventId to basket', monitor.getItem().eventId)
+      deleteEvent(monitor.getItem().eventId)
+    }
+  }
+}
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  canDrop: monitor.canDrop(),
+  hovered: monitor.isOver()
+})
+
+export default connect(
+  null,
+  { deletePerson, deleteEvent }
+)(DropTarget(['person', 'event'], spec, collect)(Basket))

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

@@ -10,41 +10,57 @@ import {
 import { Table, Column, InfiniteLoader } from 'react-virtualized'
 import 'react-virtualized/styles.css'
 
+import { DragSource } from 'react-dnd'
+import { getEmptyImage } from 'react-dnd-html5-backend'
+// import DragPreview from './person-drag-preview'
+
 export class EventLazyTable extends Component {
   static propTypes = {}
 
   componentDidMount() {
     this.props.fetchLazy()
+    this.props.connectPreview(getEmptyImage())
   }
 
   render() {
     const { loaded, events } = this.props
+
+    const { connectDragSource, isDragging } = this.props
+    const dndStyle = {
+      opacity: isDragging ? 0.3 : 1
+    }
+
     return (
-      <InfiniteLoader
-        isRowLoaded={this.isRowLoaded}
-        rowCount={loaded ? events.length : events.length + 1}
-        loadMoreRows={this.loadMoreRows}
-      >
-        {({ onRowsRendered, registerChild }) => (
-          <Table
-            ref={registerChild}
-            rowCount={events.length}
-            rowGetter={this.rowGetter}
-            rowHeight={40}
-            headerHeight={50}
-            overscanRowCount={1}
-            width={700}
-            height={300}
-            onRowClick={this.handleSelect}
-            onRowsRendered={onRowsRendered}
-            rowClassName="test__event_table_row"
-          >
-            <Column dataKey="title" width={200} label="name" />
-            <Column dataKey="where" width={300} label="place" />
-            <Column dataKey="url" width={300} label="url" />
-          </Table>
+      <div>
+        {connectDragSource(
+          <a eventid={events[0]}>Перетащи меня чтобы удалить верхнюю строку</a>
         )}
-      </InfiniteLoader>
+        <InfiniteLoader
+          isRowLoaded={this.isRowLoaded}
+          rowCount={loaded ? events.length : events.length + 1}
+          loadMoreRows={this.loadMoreRows}
+        >
+          {({ onRowsRendered, registerChild }) => (
+            <Table
+              ref={registerChild}
+              rowCount={events.length}
+              rowGetter={this.rowGetter}
+              rowHeight={40}
+              headerHeight={50}
+              overscanRowCount={1}
+              width={700}
+              height={300}
+              onRowClick={this.handleSelect}
+              onRowsRendered={onRowsRendered}
+              rowClassName="test__event_table_row"
+            >
+              <Column dataKey="title" width={200} label="name" />
+              <Column dataKey="where" width={300} label="place" />
+              <Column dataKey="url" width={300} label="url" />
+            </Table>
+          )}
+        </InfiniteLoader>
+      </div>
     )
   }
 
@@ -59,11 +75,26 @@ export class EventLazyTable extends Component {
   handleSelect = ({ rowData }) => this.props.selectEvent(rowData.uid)
 }
 
+const spec = {
+  beginDrag(props, ff) {
+    const eventId = props.events[0].uid
+    return {
+      eventId
+    }
+  }
+}
+
+const collect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  connectPreview: connect.dragPreview(),
+  isDragging: monitor.isDragging()
+})
+
 export default connect(
   (state) => ({
     events: eventListSelector(state),
     loading: loadingSelector(state),
     loaded: loadedSelector(state)
   }),
   { fetchLazy, selectEvent }
-)(EventLazyTable)
+)(DragSource('event', spec, collect)(EventLazyTable))

admin/src/components/people/person-drag-preview.js

@@ -4,6 +4,8 @@ import { personSelector } from '../../ducks/people'
 
 class PersonDragPreview extends Component {
   render() {
+    if (!this.props.person) return null
+
     return <div>{this.props.person.firstName}</div>
   }
 }

admin/src/config.js

@@ -1,16 +1,33 @@
+// import { initializeApp } from 'firebase/app'
+// import 'firebase/auth'
+// 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'
+// }
+//
+// initializeApp(config)
+
 import { initializeApp } from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
 
-export const appName = 'adv-react-25-06'
+export const appName = 'adv-react-au-0307'
 
 const config = {
-  apiKey: 'AIzaSyDzqwnZ_39QyqhxYZVPjVH8eBww7DUBmVc',
+  apiKey: 'AIzaSyDj6YDOCSRPFbUGtUwwtyPrA-koT2uKCxg',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
   storageBucket: '',
-  messagingSenderId: '874599443389'
+  messagingSenderId: '650330669903'
 }
 
 initializeApp(config)

admin/src/ducks/events.js

@@ -4,6 +4,7 @@ import { Record, OrderedSet, OrderedMap } from 'immutable'
 import firebase from 'firebase/app'
 import { createSelector } from 'reselect'
 import { fbToEntities } from './utils'
+import { DELETE_PERSON } from './people'
 
 /**
  * Constants
@@ -20,6 +21,9 @@ export const FETCH_LAZY_REQUEST = `${prefix}/FETCH_LAZY_REQUEST`
 export const FETCH_LAZY_START = `${prefix}/FETCH_LAZY_START`
 export const FETCH_LAZY_SUCCESS = `${prefix}/FETCH_LAZY_SUCCESS`
 
+export const DELETE_EVENT = `${prefix}/DELETE_EVENT`
+export const DELETE_EVENT_SUCCESS = `${prefix}/DELETE_EVENT_SUCCESS`
+
 /**
  * Reducer
  * */
@@ -69,6 +73,13 @@ export default function reducer(state = new ReducerRecord(), action) {
             : selected.add(payload.uid)
       )
 
+    case DELETE_EVENT:
+      return state.update('entities', (entities) =>
+        entities.filter(function(item) {
+          return item.get('uid') !== payload.eventId
+        })
+      )
+
     default:
       return state
   }
@@ -128,10 +139,31 @@ export function fetchLazy() {
   }
 }
 
+export function deleteEvent(eventId) {
+  return {
+    type: DELETE_EVENT,
+    payload: { eventId }
+  }
+}
+
 /**
  * Sagas
  * */
 
+export function* deleteEventSaga(action) {
+  const ref = firebase
+    .database()
+    .ref('events/' + action.payload.eventId)
+    .remove()
+
+  const successAction = {
+    type: DELETE_EVENT_SUCCESS,
+    payload: { eventId: action.payload.eventId }
+  }
+
+  yield put(successAction)
+}
+
 export function* fetchAllSaga() {
   const eventsState = yield select(stateSelector)
   if (eventsState.loading || eventsState.loaded) return
@@ -181,5 +213,9 @@ export const fetchLazySaga = function*() {
 }
 
 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

@@ -2,7 +2,7 @@ import { appName } from '../config'
 import { Record, List } from 'immutable'
 import { reset } from 'redux-form'
 import { createSelector } from 'reselect'
-import { put, takeEvery, call } from 'redux-saga/effects'
+import { put, takeEvery, call, all } from 'redux-saga/effects'
 import { generateId } from './utils'
 
 /**
@@ -12,6 +12,8 @@ export const moduleName = 'people'
 const prefix = `${appName}/${moduleName}`
 export const ADD_PERSON = `${prefix}/ADD_PERSON`
 export const ADD_PERSON_SUCCESS = `${prefix}/ADD_PERSON_SUCCESS`
+export const DELETE_PERSON = `${prefix}/DELETE_PERSON`
+export const DELETE_PERSON_SUCCESS = `${prefix}/DELETE_PERSON_SUCCESS`
 
 export const ADD_EVENT = `${prefix}/ADD_EVENT`
 
@@ -52,6 +54,13 @@ export default function reducer(state = new ReducerState(), action) {
         entities.push(new PersonRecord(payload.person))
       )
 
+    case DELETE_PERSON:
+      return state.update('entities', (entities) =>
+        entities.filter(function(item) {
+          return item.get('uid') !== payload.personUid
+        })
+      )
+
     default:
       return state
   }
@@ -83,6 +92,13 @@ export function addPerson(person) {
   }
 }
 
+export function deletePerson(personUid) {
+  return {
+    type: DELETE_PERSON,
+    payload: { personUid }
+  }
+}
+
 export function addEventToPerson(eventUid, personUid) {
   return {
     type: ADD_EVENT,
@@ -109,6 +125,18 @@ export function* addPersonSaga(action) {
   yield put(reset('person'))
 }
 
+export function* deletePersonSaga(action) {
+  const successAction = {
+    type: DELETE_PERSON_SUCCESS,
+    payload: { uid: action.payload.personUid }
+  }
+
+  yield put(successAction)
+}
+
 export function* saga() {
-  yield takeEvery(ADD_PERSON, addPersonSaga)
+  yield all([
+    takeEvery(ADD_PERSON, addPersonSaga),
+    takeEvery(DELETE_PERSON, deletePersonSaga)
+  ])
 }

admin/src/ducks/utils.js

@@ -5,8 +5,7 @@ export function generateId() {
 }
 
 export function fbToEntities(values, DataRecord) {
-  return Object.entries(values).reduce(
-    (acc, [uid, value]) => acc.set(uid, new DataRecord({ uid, ...value })),
-    new OrderedMap({})
-  )
+  return Object.entries(values).reduce((acc, [uid, value]) => {
+    return acc.set(uid, new DataRecord({ uid, ...value }))
+  }, new OrderedMap({}))
 }

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 Basket from '../components/basket'
 
 class AllPage extends Component {
   static propTypes = {}
@@ -10,6 +11,7 @@ class AllPage extends Component {
     return (
       <div>
         <PeopleList />
+        <Basket />
         <SelectedEvents />
         <EventsTable />
       </div>