diff --git a/src/components/common/Basket.js b/src/components/common/Basket.js new file mode 100644 index 0000000..ede58fb --- /dev/null +++ b/src/components/common/Basket.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react' +import {Link} from 'react-router-dom' +import {DropTarget} from 'react-dnd' +import {connect} from 'react-redux' +import {deleteEvent} from '../../ducks/events' + + +class Basket extends Component { + static propTypes = { + + }; + + render() { + const {connectDropTarget, hovered, canDrop, people} = this.props + const dropStyle = { + border: `4px solid ${canDrop?`black`:`transparent`}` + } + return connectDropTarget( +
+ Drag event here to delete! +
+ ) + } +} + +const collect = (connect, monitor) => ({ + connectDropTarget: connect.dropTarget(), + canDrop: monitor.canDrop(), + hovered: monitor.isOver() +}) + +const spec = { + drop(props, monitor) { + const eventDragUid = monitor.getItem().uid + console.log(eventDragUid,'eventDragUid'); + console.log('start'); + props.deleteEvent(eventDragUid); + return { eventDragUid } + } +} + +export default connect(null, {deleteEvent}) (DropTarget ('event',spec, collect)(Basket)) diff --git a/src/components/events/TableEventCard.js b/src/components/events/TableEventCard.js new file mode 100644 index 0000000..f27e084 --- /dev/null +++ b/src/components/events/TableEventCard.js @@ -0,0 +1,38 @@ +import React, {Component} from 'react' +import {Link} from 'react-router-dom' +import {DragSource} from 'react-dnd' + +class TableEventCard extends Component { + static propTypes = {}; + + render() { + + const {connectDragSource,isDragging, event: {uid, title, where, month}} = this.props; + const dragStyle = { + backgroundColor:isDragging?'gray':'white' + } + return this.props.connectDragSource( +
console.log('onClick')} className="test--event-list__row" > + {title} + {where} + {month} +
+ ) + } +} + +const spec = { + beginDrag(props) { + return { + uid:props.event.uid + } + } +} + +const collect = (connect, monitor) => ({ + connectDragSource: connect.dragSource(), + connectPreview: connect.dragPreview(), + isDragging: monitor.isDragging(), +}) + +export default DragSource('event', spec, collect)(TableEventCard) \ No newline at end of file diff --git a/src/components/events/TableEventList.js b/src/components/events/TableEventList.js index 05af863..b311fe7 100644 --- a/src/components/events/TableEventList.js +++ b/src/components/events/TableEventList.js @@ -1,40 +1,48 @@ -import React, { Component } from 'react' +import React, {Component} from 'react' import {connect} from 'react-redux' -import {moduleName, fetchAll, selectEvent, eventListSelector} from '../../ducks/events' +import {List, InfiniteLoader} from 'react-virtualized' +import {moduleName, fetchLazy, selectEvent, eventListSelector} from '../../ducks/events' import Loader from '../common/Loader' +import TableEventCard from './TableEventCard' export class EventList extends Component { - static propTypes = { - - }; + static propTypes = {}; componentDidMount() { - this.props.fetchAll() + this.props.fetchLazy() } + isRowLoaded = ({index}) => index < this.props.events.length + loadMoreRows = () => { + console.log('---', 'load more') + this.props.fetchLazy() + } render() { + + const {loaded, events} = this.props + console.log(events.length,'events.length'); if (this.props.loading) return return ( -
- - - {this.getRows()} - -
-
+ + {({onRowsRendered, registerChild}) => + + } + ) } - getRows() { - return this.props.events.map(this.getRow) - } - - getRow = (event) => { - return - {event.title} - {event.where} - {event.month} - + getRows = (event) => { + return this.props.events.map(event => ) } handleRowClick = (uid) => () => { @@ -42,8 +50,7 @@ export class EventList extends Component { selectEvent && selectEvent(uid) } } - export default connect(state => ({ events: eventListSelector(state), loading: state[moduleName].loading -}), {fetchAll, selectEvent})(EventList) \ No newline at end of file +}), {fetchLazy, selectEvent})(EventList) \ No newline at end of file diff --git a/src/components/routes/AdminPage.js b/src/components/routes/AdminPage.js index 92587ea..5ea9685 100644 --- a/src/components/routes/AdminPage.js +++ b/src/components/routes/AdminPage.js @@ -2,6 +2,8 @@ import React, { Component } from 'react' import PeopleList from '../people/PeopleList' import EventTable from '../events/VirtualizedEventList' import SelectedEvents from '../events/SelectedEvents' +import TableEventList from '../events/TableEventList' +import Basket from '../common/Basket' class AdminPage extends Component { static propTypes = { @@ -11,10 +13,13 @@ class AdminPage extends Component { render() { return (
+

Admin Page

- + {/**/} + +
) } diff --git a/src/config.js b/src/config.js index e8d8d78..18292a3 100644 --- a/src/config.js +++ b/src/config.js @@ -1,13 +1,13 @@ import firebase from 'firebase' -export const appName = "advreact-21-08" +export const appName = "advreact-21-081" export const firebaseConfig = { - apiKey: "AIzaSyDjA6CeIHuni5lNm4ML1b-TSxJltsYUO8g", - authDomain: `${appName}.firebaseapp.com`, - databaseURL: `https://${appName}.firebaseio.com`, - projectId: appName, - storageBucket: `${appName}.appspot.com`, - messagingSenderId: "789814589283" + apiKey: "AIzaSyC0hcpDsBhr85usoHIwloBeYbkDHeUcqKo", + authDomain: "advreact-21-081.firebaseapp.com", + databaseURL: "https://advreact-21-081.firebaseio.com", + projectId: "advreact-21-081", + storageBucket: "advreact-21-081.appspot.com", + messagingSenderId: "450237050585" } firebase.initializeApp(firebaseConfig) \ No newline at end of file diff --git a/src/ducks/events.js b/src/ducks/events.js index bd17fc4..1584466 100644 --- a/src/ducks/events.js +++ b/src/ducks/events.js @@ -1,4 +1,4 @@ -import {all, take, call, put, select} from 'redux-saga/effects' +import {all, take, takeEvery, call, put, select} from 'redux-saga/effects' import {appName} from '../config' import {Record, OrderedMap, OrderedSet} from 'immutable' import firebase from 'firebase' @@ -17,6 +17,8 @@ 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 SELECT_EVENT = `${prefix}/SELECT_EVENT` +export const DELETE_EVENT = `${prefix}/DELETE_EVENT` +export const DELETE_EVENT_REQUEST = `${prefix}/DELETE_EVENT_REQUEST` /** * Reducer @@ -46,6 +48,10 @@ export default function reducer(state = new ReducerRecord(), action) { case FETCH_ALL_REQUEST: case FETCH_LAZY_START: return state.set('loading', true) + + case DELETE_EVENT: + console.log('delete'); + return state.update('entities', selected => selected.remove(payload.eventDragUid)) case FETCH_ALL_SUCCESS: return state @@ -93,6 +99,56 @@ export function fetchAll() { } } +export function deleteEvent (eventDragUid) { + console.log(eventDragUid ,'load data'); + return { + type: DELETE_EVENT_REQUEST, + payload: { eventDragUid } + } +} + +export const deleteEventSaga = function * (action) { + console.log(action,'action'); + const eventDragUid = yield action.payload.eventDragUid; + yield console.log(eventDragUid,'final eventDragUid'); + const peopleRef = firebase.database().ref(`events/${action.payload.eventDragUid}`); + try { + yield call([peopleRef, peopleRef.remove]) + // yield peopleRef.child(action.payload.eventDragUid).remove() + yield put({ + type: DELETE_EVENT, + payload: { + eventDragUid + } + }) + } + catch (e) { + console.log(`erro`); + } + ; + // return { + // type: DELETE_EVENT_REQUEST, + // payload: { eventDragUid } + // } + // const eventsRef = firebase.database().ref(`people/${personUid}/events`) + // const state = yield select(stateSelector) + // const events = state.getIn(['entities', personUid, 'events']).concat(eventUid) + // + // try { + // yield call([eventsRef, eventsRef.set], events) + // yield put({ + // type: ADD_EVENT_SUCCESS, + // payload: { + // personUid, + // events + // } + // }) + // } catch (e) { + // console.log(e,'error') + // } + +} + export function selectEvent(uid) { return { type: SELECT_EVENT, @@ -157,6 +213,7 @@ export const fetchLazySaga = function * () { export function* saga() { yield all([ fetchAllSaga(), - fetchLazySaga() + fetchLazySaga(), + takeEvery(DELETE_EVENT_REQUEST, deleteEventSaga) ]) } \ No newline at end of file