Ht4

src/components/events/EventTableVirtualized.js

@@ -1,57 +1,65 @@
 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 <Loader />
         return (
             <Table
-                height={500}
-                width = {600}
-                rowHeight={40}
-                rowHeaderHeight={40}
+                rowCount={events.length}
                 rowGetter={this.rowGetter}
-                rowCount={this.props.events.length}
-                overscanRowCount={0}
-                onRowClick={({ rowData }) => this.props.selectEvent(rowData.uid)}
+                rowHeight={40}
+                headerHeight={50}
+                overscanRowCount={5}
+                width={700}
+                height={300}
+                onRowClick={this.handleRowClick}
+                rowRenderer={this.rowRenderer}
             >
                 <Column
-                    dataKey = 'title'
+                    label="title"
+                    dataKey="title"
                     width={300}
-                    label = 'title'
                 />
                 <Column
-                    dataKey = 'where'
-                    width={200}
-                    label = 'where'
+                    label="where"
+                    dataKey="where"
+                    width={250}
                 />
                 <Column
-                    dataKey = 'when'
-                    width={200}
-                    label = 'when'
+                    label="when"
+                    dataKey="month"
+                    width={150}
                 />
             </Table>
         )
     }
 
     rowGetter = ({ index }) => this.props.events[index]
+    rowRenderer = (props) => <EventsRow {...props} deleteEvent={(uid) => this.handleDelete(uid)}/>
+
+    handleDelete = (uid) => {
+        const {deleteEvent} = this.props
+
+        deleteEvent(uid)
+    }
 }
 
 export default connect((state, props) => ({
     events: eventListSelector(state, props),
     loading: loadingSelector(state),
     loaded: loadedSelector(state),
     selected: selectedEventsSelector(state)
-}), { fetchAllEvents, selectEvent })(EventTableVirtualized)
+}), { fetchAllEvents, selectEvent, deleteEvent })(EventTableVirtualized)

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)

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(
+            <div style={{ ...style, backgroundColor }}>
+                {isActive ? 'Release to trash' : 'Drag a event for trash'}
+            </div>,
+        )
+    }
+}
+
+export default (DropTarget(['event'], spec, collect)(Trash))

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 {
                 <h2>Admin Page</h2>
                 <SelectedEvents/>
                 <PeopleList/>
+                <Trash/>
                 <EventList/>
             </div>
         )

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"
-})
+    apiKey: "AIzaSyB3LVTO7RSDrZAkHBkpzg9T5KkuoCoy4qo",
+    authDomain: `${appName}-${appId}.firebaseapp.com`,
+    databaseURL: `https://${appName}-${appId}.firebaseio.com`,
+    projectId: `${appName}-${appId}`,
+    storageBucket: `${appName}-${appId}.appspot.com`,
+    messagingSenderId: "651090769196"
+})

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