Test dnd

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(
+            <div style={{width:'200px',height:'100px ',backgroundColor:'#a68585',...dropStyle}}>
+                Drag event here to delete!
+            </div>
+        )
+    }
+}
+
+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))

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(
+                <div style={{border:'1px solid black',...dragStyle}} key={uid} onClick={()=>console.log('onClick')} className="test--event-list__row" >
+                    <span>{title}</span>
+                    <span>{where}</span>
+                    <span>{month}</span>
+                </div>
+        )
+    }
+}
+
+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)

src/components/events/TableEventList.js

@@ -1,49 +1,56 @@
-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 <Loader/>
         return (
-            <div>
-                <table>
-                    <tbody>
-                        {this.getRows()}
-                    </tbody>
-                </table>
-            </div>
+            <InfiniteLoader
+                isRowLoaded={this.isRowLoaded}
+                rowCount={loaded ? events.length : events.length + 1}
+                loadMoreRows={this.loadMoreRows}
+            >
+                {({onRowsRendered, registerChild}) =>
+                    <List
+                        rowCount={events.length}
+                        rowHeight={100}
+                        height={300}
+                        width={600}
+                        rowRenderer={this.getRows}
+                    />
+                }
+            </InfiniteLoader>
         )
     }
 
-    getRows() {
-        return this.props.events.map(this.getRow)
-    }
-
-    getRow = (event) => {
-        return <tr key={event.uid} className="test--event-list__row" onClick={this.handleRowClick(event.uid)}>
-            <td>{event.title}</td>
-            <td>{event.where}</td>
-            <td>{event.month}</td>
-        </tr>
+    getRows = (event) => {
+        return this.props.events.map(event => <TableEventCard event={event}/>)
     }
 
     handleRowClick = (uid) => () => {
         const {selectEvent} = this.props
         selectEvent && selectEvent(uid)
     }
 }
-
 export default connect(state => ({
     events: eventListSelector(state),
     loading: state[moduleName].loading
-}), {fetchAll, selectEvent})(EventList)
+}), {fetchLazy, selectEvent})(EventList)

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 (
             <div>
+
                 <h1>Admin Page</h1>
                 <PeopleList/>
                 <SelectedEvents/>
-                <EventTable/>
+                {/*<EventTable/>*/}
+                <Basket />
+                <TableEventList/>
             </div>
         )
     }

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)

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)
     ])
 }