diff --git a/src/components/events/EventTableVirtualized.js b/src/components/events/EventTableVirtualized.js
index 8fb544c..12a415b 100644
--- a/src/components/events/EventTableVirtualized.js
+++ b/src/components/events/EventTableVirtualized.js
@@ -1,52 +1,60 @@
import React, { Component } from 'react'
import {Table, Column} from 'react-virtualized'
import {connect} from 'react-redux'
-import {fetchAllEvents, selectEvent, selectedEventsSelector, eventListSelector, loadedSelector, loadingSelector} from '../../ducks/events'
+import {fetchAllEvents, deleteEvent, selectEvent, selectedEventsSelector, eventListSelector, loadedSelector, loadingSelector} from '../../ducks/events'
import Loader from '../common/Loader'
+import EventsRow from './EventsRow'
import 'react-virtualized/styles.css'
class EventTableVirtualized extends Component {
- static propTypes = {
-
- };
componentDidMount() {
this.props.fetchAllEvents()
console.log('---', 'load events')
}
render() {
+ const { loaded, events } = this.props
+
if (this.props.loading) return
return (
this.props.selectEvent(rowData.uid)}
+ rowHeight={40}
+ headerHeight={50}
+ overscanRowCount={5}
+ width={700}
+ height={300}
+ onRowClick={this.handleRowClick}
+ rowRenderer={this.rowRenderer}
>
)
}
rowGetter = ({ index }) => this.props.events[index]
+ rowRenderer = (props) => this.handleDelete(uid)}/>
+
+ handleDelete = (uid) => {
+ const {deleteEvent} = this.props
+
+ deleteEvent(uid)
+ }
}
export default connect((state, props) => ({
@@ -54,4 +62,4 @@ export default connect((state, props) => ({
loading: loadingSelector(state),
loaded: loadedSelector(state),
selected: selectedEventsSelector(state)
-}), { fetchAllEvents, selectEvent })(EventTableVirtualized)
\ No newline at end of file
+}), { fetchAllEvents, selectEvent, deleteEvent })(EventTableVirtualized)
\ No newline at end of file
diff --git a/src/components/events/EventsRow.js b/src/components/events/EventsRow.js
new file mode 100644
index 0000000..4136b37
--- /dev/null
+++ b/src/components/events/EventsRow.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import {DragSource} from 'react-dnd'
+import {defaultTableRowRenderer} from 'react-virtualized'
+import 'react-virtualized/styles.css'
+
+const spec = {
+ beginDrag(props) {
+ return {
+ id: props.rowData.uid,
+ }
+ },
+
+ endDrag(props, monitor) {
+ const item = monitor.getItem()
+ const dropResult = monitor.getDropResult()
+
+ if (dropResult) {
+ props.deleteEvent(item.id);
+ alert(`You dropped ${item.id} into trash!`) // eslint-disable-line no-alert
+ }
+ }
+}
+
+const collect = (connect, monitor) => ({
+ connectDragSource: connect.dragSource(),
+ connectPreview: connect.dragPreview(),
+ isDragging: monitor.isDragging()
+})
+
+class EventsRow extends Component {
+ render() {
+ const {connectDragSource, ...rest} = this.props
+ return (
+ connectDragSource(defaultTableRowRenderer(rest))
+ )
+ }
+}
+
+export default DragSource('event', spec, collect)(EventsRow)
\ No newline at end of file
diff --git a/src/components/events/Trash.js b/src/components/events/Trash.js
new file mode 100644
index 0000000..8e2a4ce
--- /dev/null
+++ b/src/components/events/Trash.js
@@ -0,0 +1,58 @@
+//https://github.com/react-dnd/react-dnd/blob/master/examples/01%20Dustbin/Single%20Target/Dustbin.js
+
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { DropTarget } from 'react-dnd'
+
+const style = {
+ height: '12rem',
+ width: '12rem',
+ marginRight: '1.5rem',
+ marginBottom: '1.5rem',
+ color: 'white',
+ padding: '1rem',
+ textAlign: 'center',
+ fontSize: '1rem',
+ lineHeight: 'normal',
+ float: 'left',
+}
+
+const spec = {
+ drop() {
+ return { name: 'Dustbin' }
+ },
+}
+
+const collect = (connect, monitor) => ({
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ canDrop: monitor.canDrop(),
+})
+
+class Trash extends Component {
+ static propTypes = {
+ connectDropTarget: PropTypes.func.isRequired,
+ isOver: PropTypes.bool.isRequired,
+ canDrop: PropTypes.bool.isRequired,
+ }
+
+ render() {
+ const { canDrop, isOver, connectDropTarget } = this.props
+ const isActive = canDrop && isOver
+
+ let backgroundColor = '#222'
+ if (isActive) {
+ backgroundColor = 'darkgreen'
+ } else if (canDrop) {
+ backgroundColor = 'darkkhaki'
+ }
+
+ return connectDropTarget(
+
+ {isActive ? 'Release to trash' : 'Drag a event for trash'}
+
,
+ )
+ }
+}
+
+export default (DropTarget(['event'], spec, collect)(Trash))
\ No newline at end of file
diff --git a/src/components/routes/Admin.js b/src/components/routes/Admin.js
index 2d09350..4c74721 100644
--- a/src/components/routes/Admin.js
+++ b/src/components/routes/Admin.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
import PeopleList from '../people/PeopleList'
import EventList from '../events/EventTableVirtualized'
import SelectedEvents from '../events/SelectedEvents'
+import Trash from '../events/Trash'
class Admin extends Component {
static propTypes = {
@@ -14,6 +15,7 @@ class Admin extends Component {
Admin Page
+
)
diff --git a/src/config.js b/src/config.js
index 2782a0b..5c9f8f6 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,12 +1,13 @@
import firebase from 'firebase'
export const appName = 'advreact-1610'
+const appId = 'ec352'
firebase.initializeApp({
- apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA",
- authDomain: `${appName}.firebaseapp.com`,
- databaseURL: `https://${appName}.firebaseio.com`,
- projectId: appName,
- storageBucket: "",
- messagingSenderId: "397157634637"
-})
\ No newline at end of file
+ apiKey: "AIzaSyB3LVTO7RSDrZAkHBkpzg9T5KkuoCoy4qo",
+ authDomain: `${appName}-${appId}.firebaseapp.com`,
+ databaseURL: `https://${appName}-${appId}.firebaseio.com`,
+ projectId: `${appName}-${appId}`,
+ storageBucket: `${appName}-${appId}.appspot.com`,
+ messagingSenderId: "651090769196"
+})
diff --git a/src/ducks/events.js b/src/ducks/events.js
index dd75bae..4725f1d 100644
--- a/src/ducks/events.js
+++ b/src/ducks/events.js
@@ -19,6 +19,7 @@ export const FETCH_LAZY_START = `${prefix}/FETCH_LAZY_START`
export const FETCH_LAZY_SUCCESS = `${prefix}/FETCH_LAZY_SUCCESS`
export const SELECT_EVENT = `${prefix}/SELECT_EVENT`
+export const DELETE_EVENT = `${prefix}/SELECT_EVENT`
/**
@@ -64,6 +65,9 @@ export default function reducer(state = new ReducerRecord(), action) {
case SELECT_EVENT:
return state.update('selected', selected => selected.add(payload.uid))
+ case DELETE_EVENT:
+ return state.deleteIn(['entities', payload.uid])
+
default:
return state
}
@@ -100,6 +104,13 @@ export function selectEvent(uid) {
}
}
+export function deleteEvent(uid) {
+ return {
+ type: DELETE_EVENT,
+ payload: { uid }
+ }
+}
+
export function fetchLazy() {
return {
type: FETCH_LAZY_REQUEST