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