From adfe309536c9bad82e5ed9f117dc29d0a4557c2e Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Mon, 6 Nov 2017 09:25:42 +0300 Subject: [PATCH 1/6] #HT4 Change config and fix bug with offset --- src/components/CustomDragLayer.js | 2 +- src/config.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CustomDragLayer.js b/src/components/CustomDragLayer.js index 3138896..c19aa07 100644 --- a/src/components/CustomDragLayer.js +++ b/src/components/CustomDragLayer.js @@ -17,7 +17,7 @@ class CustomDragLayer extends Component { const {offset, item} = this.props const DragPreview = item.DragPreview - if (!DragPreview) return null + if (!DragPreview || !offset) return null const style = { transform: `translate(${offset.x}px, ${offset.y}px)` diff --git a/src/config.js b/src/config.js index 2782a0b..161087f 100644 --- a/src/config.js +++ b/src/config.js @@ -1,12 +1,12 @@ import firebase from 'firebase' -export const appName = 'advreact-1610' +export const appName = 'react-course-f262b' firebase.initializeApp({ - apiKey: "AIzaSyB31xpTtp4Jln_hb2kAbE4PGf6Mi8EgLyA", authDomain: `${appName}.firebaseapp.com`, databaseURL: `https://${appName}.firebaseio.com`, projectId: appName, - storageBucket: "", - messagingSenderId: "397157634637" + apiKey: "AIzaSyAt-smU_1tqNdkj9pmSpVLxqaOjhDwf4dk", + storageBucket: "react-course-f262b.appspot.com", + messagingSenderId: "447165438476" }) \ No newline at end of file From 64cc828f9fa52f8af9102f3b4deb8062b121fc2b Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Mon, 6 Nov 2017 10:14:41 +0300 Subject: [PATCH 2/6] #HT4 Use custom component for rows in events table --- src/components/events/EventRow.js | 31 +++++++++++++++++++ .../events/EventTableVirtualized.js | 8 +++-- 2 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/components/events/EventRow.js diff --git a/src/components/events/EventRow.js b/src/components/events/EventRow.js new file mode 100644 index 0000000..8823c68 --- /dev/null +++ b/src/components/events/EventRow.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react' + +class EventRow extends Component { + static propTypes = { + + }; + + componentDidMount() { + // this.props.connectPreview(getEmptyImage()) + } + + handleClick = (data) => () => { + this.props.onRowClick(data.uid); + }; + + render() { + const cellStyle = { + display: 'inline-block', + marginRight: '15px', + width: '200px' + }; + const {style, person} = this.props; + return
+ {person.title} + {person.where} + {person.when} +
+ } +} + +export default EventRow \ No newline at end of file diff --git a/src/components/events/EventTableVirtualized.js b/src/components/events/EventTableVirtualized.js index 8fb544c..68a5495 100644 --- a/src/components/events/EventTableVirtualized.js +++ b/src/components/events/EventTableVirtualized.js @@ -3,6 +3,7 @@ import {Table, Column} from 'react-virtualized' import {connect} from 'react-redux' import {fetchAllEvents, selectEvent, selectedEventsSelector, eventListSelector, loadedSelector, loadingSelector} from '../../ducks/events' import Loader from '../common/Loader' +import EventRow from './EventRow' import 'react-virtualized/styles.css' class EventTableVirtualized extends Component { @@ -19,13 +20,14 @@ class EventTableVirtualized extends Component { return ( this.props.selectEvent(rowData.uid)} + onRowClick={this.props.selectEvent} + rowRenderer={this.rowRenderer} > ; + rowGetter = ({ index }) => this.props.events[index] } From d40f110b5c6a75d9ec080165bf5493e59690d548 Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Mon, 6 Nov 2017 10:54:45 +0300 Subject: [PATCH 3/6] #HT4 Make possible to drag event and drop it into basket(without db request) --- src/components/basket/Basket.js | 40 +++++++++++++++++++ src/components/events/EventRow.js | 33 +++++++++++---- .../events/EventTableVirtualized.js | 2 +- src/components/routes/Admin.js | 2 + src/ducks/events.js | 12 ++++++ 5 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 src/components/basket/Basket.js diff --git a/src/components/basket/Basket.js b/src/components/basket/Basket.js new file mode 100644 index 0000000..745261c --- /dev/null +++ b/src/components/basket/Basket.js @@ -0,0 +1,40 @@ +import React, {Component} from 'react' +import {DropTarget} from 'react-dnd' +import {deleteEvent} from '../../ducks/events' +import {connect} from 'react-redux' + +class Basket extends Component { + render() { + const {connectDropTarget} = this.props; + const style = { + width: '300px', + height: '100px', + border: '1px solid red', + textAlign: 'center', + lineHeight: '100px', + color: 'red' + }; + return connectDropTarget(
Basket
); + } +} + +const spec = { + drop(props, monitor) { + const item = monitor.getItem(); + const {deleteEvent} = props; + deleteEvent(item.id); + } +}; + +const collect = (connect, monitor) => ({ + connectDropTarget: connect.dropTarget(), + canDrop: monitor.canDrop(), + hovered: monitor.isOver() +}); + +export default connect( + null, + { + deleteEvent + }) +(DropTarget(['event'], spec, collect)(Basket)) diff --git a/src/components/events/EventRow.js b/src/components/events/EventRow.js index 8823c68..154faa8 100644 --- a/src/components/events/EventRow.js +++ b/src/components/events/EventRow.js @@ -1,4 +1,5 @@ import React, { Component } from 'react' +import {DragSource} from 'react-dnd' class EventRow extends Component { static propTypes = { @@ -19,13 +20,31 @@ class EventRow extends Component { marginRight: '15px', width: '200px' }; - const {style, person} = this.props; - return
- {person.title} - {person.where} - {person.when} -
+ const {style, event, connectDragSource} = this.props; + return connectDragSource(
+ {event.title} + {event.where} + {event.when} +
) } } -export default EventRow \ No newline at end of file +const spec = { + beginDrag(props) { + return { + id: props.event.uid + } + }, + + endDrag() { + console.log('---', 'endDrag') + } +}; + +const collect = (connect, monitor) => ({ + connectDragSource: connect.dragSource(), + connectPreview: connect.dragPreview(), + isDragging: monitor.isDragging() +}); + +export default DragSource('event', spec, collect)(EventRow) \ No newline at end of file diff --git a/src/components/events/EventTableVirtualized.js b/src/components/events/EventTableVirtualized.js index 68a5495..1ddb06d 100644 --- a/src/components/events/EventTableVirtualized.js +++ b/src/components/events/EventTableVirtualized.js @@ -48,7 +48,7 @@ class EventTableVirtualized extends Component { ) } - rowRenderer = ({ index, key, style, onRowClick }) => ; + rowRenderer = ({ index, key, style, onRowClick }) => ; rowGetter = ({ index }) => this.props.events[index] } diff --git a/src/components/routes/Admin.js b/src/components/routes/Admin.js index 2d09350..d142bea 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 Basket from '../basket/Basket' class Admin extends Component { static propTypes = { @@ -12,6 +13,7 @@ class Admin extends Component { return (

Admin Page

+ diff --git a/src/ducks/events.js b/src/ducks/events.js index dd75bae..3ae786e 100644 --- a/src/ducks/events.js +++ b/src/ducks/events.js @@ -18,6 +18,11 @@ 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 DELETE_EVENT_REQUEST = `${prefix}/DELETE_EVENT_REQUEST` +export const DELETE_EVENT_START = `${prefix}/DELETE_EVENT_REQUEST` +export const DELETE_EVENT_SUCCESS = `${prefix}/DELETE_EVENT_REQUEST` +export const DELETE_EVENT_FAILURE = `${prefix}/DELETE_EVENT_REQUEST` + export const SELECT_EVENT = `${prefix}/SELECT_EVENT` @@ -106,6 +111,13 @@ export function fetchLazy() { } } +export function deleteEvent(uid) { + return { + type: DELETE_EVENT_REQUEST, + payload: { uid } + } +} + /** * Sagas * */ From 1b62cac4adc8c7d8fbbbdf3e027eea1a9617f06d Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Mon, 6 Nov 2017 11:24:50 +0300 Subject: [PATCH 4/6] #HT4 Delete event from Redux store after deleting it from db --- src/ducks/events.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/ducks/events.js b/src/ducks/events.js index 3ae786e..e9b02ac 100644 --- a/src/ducks/events.js +++ b/src/ducks/events.js @@ -19,9 +19,8 @@ export const FETCH_LAZY_START = `${prefix}/FETCH_LAZY_START` export const FETCH_LAZY_SUCCESS = `${prefix}/FETCH_LAZY_SUCCESS` export const DELETE_EVENT_REQUEST = `${prefix}/DELETE_EVENT_REQUEST` -export const DELETE_EVENT_START = `${prefix}/DELETE_EVENT_REQUEST` -export const DELETE_EVENT_SUCCESS = `${prefix}/DELETE_EVENT_REQUEST` -export const DELETE_EVENT_FAILURE = `${prefix}/DELETE_EVENT_REQUEST` +export const DELETE_EVENT_START = `${prefix}/DELETE_EVENT_START` +export const DELETE_EVENT_SUCCESS = `${prefix}/DELETE_EVENT_SUCCESS` export const SELECT_EVENT = `${prefix}/SELECT_EVENT` @@ -68,6 +67,9 @@ export default function reducer(state = new ReducerRecord(), action) { case SELECT_EVENT: return state.update('selected', selected => selected.add(payload.uid)) + case DELETE_EVENT_SUCCESS: + return state + .deleteIn(['entities', action.payload.uid]); default: return state @@ -166,6 +168,21 @@ export const fetchLazySaga = function * () { } } +export const deleteEventSaga = function * ({payload}) { + const ref = firebase.database().ref(`events/${payload.uid}`); + + yield put({ + type: DELETE_EVENT_START + }); + + yield call([ref, ref.remove]); + + yield put({ + type: DELETE_EVENT_SUCCESS, + payload + }) +}; + //lazy fetch FB /* firebase.database().ref('events') @@ -177,6 +194,7 @@ firebase.database().ref('events') export function* saga() { yield all([ takeEvery(FETCH_ALL_REQUEST, fetchAllSaga), + takeEvery(DELETE_EVENT_REQUEST, deleteEventSaga), fetchLazySaga() ]) } \ No newline at end of file From f6ff4c2f16cece8fa04248f7d407676fed7abfd9 Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Mon, 6 Nov 2017 11:41:30 +0300 Subject: [PATCH 5/6] #HT4 Create drag preview for event --- src/components/events/EventDragPreview.js | 28 +++++++++++++++++++++++ src/components/events/EventRow.js | 7 ++++-- src/ducks/events.js | 2 ++ 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/components/events/EventDragPreview.js diff --git a/src/components/events/EventDragPreview.js b/src/components/events/EventDragPreview.js new file mode 100644 index 0000000..7672809 --- /dev/null +++ b/src/components/events/EventDragPreview.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react' +import {connect} from 'react-redux' +import {eventSelector} from '../../ducks/events' + +class EventDragPreview extends Component { + static propTypes = { + + }; + + render() { + return ( +
+

+ {this.props.event.title} +

+
+ ) + } +} + +export default connect((state, props) => ({ + event: eventSelector(state, props) +}))(EventDragPreview) \ No newline at end of file diff --git a/src/components/events/EventRow.js b/src/components/events/EventRow.js index 154faa8..3e140e4 100644 --- a/src/components/events/EventRow.js +++ b/src/components/events/EventRow.js @@ -1,5 +1,7 @@ import React, { Component } from 'react' import {DragSource} from 'react-dnd' +import {getEmptyImage} from 'react-dnd-html5-backend' +import DragPreview from './EventDragPreview' class EventRow extends Component { static propTypes = { @@ -7,7 +9,7 @@ class EventRow extends Component { }; componentDidMount() { - // this.props.connectPreview(getEmptyImage()) + this.props.connectPreview(getEmptyImage()) } handleClick = (data) => () => { @@ -32,7 +34,8 @@ class EventRow extends Component { const spec = { beginDrag(props) { return { - id: props.event.uid + id: props.event.uid, + DragPreview } }, diff --git a/src/ducks/events.js b/src/ducks/events.js index e9b02ac..f3e2af7 100644 --- a/src/ducks/events.js +++ b/src/ducks/events.js @@ -89,6 +89,8 @@ export const eventListSelector = createSelector(entitiesSelector, entities => en export const selectedEventsSelector = createSelector(entitiesSelector, selectionSelector, (entities, selection) => selection.map(uid => entities.get(uid)) ) +export const idSelector = (state, props) => props.id +export const eventSelector = createSelector(entitiesSelector, idSelector, (entities, id) => entities.get(id)) /** * Action Creators From 1e799e9d750cf1b2cabc3aa581cbbd0b24b9de1a Mon Sep 17 00:00:00 2001 From: Gatilin Maxim Date: Mon, 6 Nov 2017 11:44:29 +0300 Subject: [PATCH 6/6] #HT4 Change basket color on hover --- src/components/basket/Basket.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/basket/Basket.js b/src/components/basket/Basket.js index 745261c..18bd92e 100644 --- a/src/components/basket/Basket.js +++ b/src/components/basket/Basket.js @@ -5,14 +5,15 @@ import {connect} from 'react-redux' class Basket extends Component { render() { - const {connectDropTarget} = this.props; + const {connectDropTarget, hovered} = this.props; + const basketColor = hovered ? 'red': '#888'; const style = { width: '300px', height: '100px', - border: '1px solid red', + border: `1px solid ${basketColor}`, textAlign: 'center', lineHeight: '100px', - color: 'red' + color: basketColor }; return connectDropTarget(
Basket
); }