Ht4

admin-panel/package.json

@@ -22,7 +22,8 @@
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.0",
     "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1"
+    "reselect": "^3.0.1",
+    "styled-components": "^2.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

admin-panel/src/components/events/Bucket.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import {DropTarget} from 'react-dnd'
+import {removeEvent} from '../../ducks/events'
+
+class Bucket extends Component {
+
+  render() {
+    const {connectDropTarget, canDrop, hovered} = this.props
+
+    const dndStyle = {
+      border: `2px solid ${canDrop
+        ? hovered
+        ? 'green'
+        : 'red'
+        : 'black'}`,
+      width:'100px',
+      height:'100px'
+    }
+
+    return connectDropTarget(
+      <div>
+      <h3>Bucket:</h3>
+      <div style={dndStyle}></div>
+      </div>
+    )
+  }
+}
+const spec = {
+  drop(props, monitor) {
+    props.removeEvent(monitor.getItem().id)
+  }
+}
+
+const collect = (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  canDrop: monitor.canDrop(),
+  hovered: monitor.isOver()
+})
+
+export default connect(null, {removeEvent})(DropTarget(['event'], spec, collect)(Bucket))

admin-panel/src/components/events/EventDragPreview.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import {connect} from 'react-redux'
+import {eventSelector} from '../../ducks/events'
+
+class EventDragPreview extends Component {
+  static propTypes = {
+
+  };
+
+  render() {
+    return (
+      <div>
+        <h2>{this.props.event.title}</h2>
+      </div>
+    )
+  }
+}
+
+export default connect((state, ownProps) => ({
+  event: eventSelector(state, ownProps)
+}))(EventDragPreview)

admin-panel/src/components/events/EventsTableRow.js

@@ -0,0 +1,96 @@
+import React, { Component } from 'react'
+import {DragSource} from 'react-dnd'
+import {getEmptyImage} from 'react-dnd-html5-backend'
+import EventDragPreview from './EventDragPreview'
+
+class EventsTableRow extends Component {
+
+  componentDidMount() {
+    this.props.connectDragPreview(getEmptyImage())
+  }
+
+  render() {
+
+
+    const { className,
+      columns,
+      index,
+      key,
+      onRowClick,
+      onRowDoubleClick,
+      onRowMouseOut,
+      onRowMouseOver,
+      onRowRightClick,
+      rowData,
+      style,
+
+      isDragging,
+      connectDragSource
+      } = this.props;
+
+    const dragStyles = {
+      opacity: isDragging ? 0.2 : 1
+    }
+
+    const a11yProps = {};
+
+    if (
+      onRowClick ||
+      onRowDoubleClick ||
+      onRowMouseOut ||
+      onRowMouseOver ||
+      onRowRightClick
+    ) {
+      a11yProps['aria-label'] = 'row';
+      a11yProps.tabIndex = 0;
+
+      if (onRowClick) {
+        a11yProps.onClick = event => onRowClick({ event, index, rowData });
+      }
+      if (onRowDoubleClick) {
+        a11yProps.onDoubleClick = event =>
+          onRowDoubleClick({ event, index, rowData });
+      }
+      if (onRowMouseOut) {
+        a11yProps.onMouseOut = event => onRowMouseOut({ event, index, rowData });
+      }
+      if (onRowMouseOver) {
+        a11yProps.onMouseOver = event => onRowMouseOver({ event, index, rowData });
+      }
+      if (onRowRightClick) {
+        a11yProps.onContextMenu = event =>
+          onRowRightClick({ event, index, rowData });
+      }
+    }
+
+    return (
+      connectDragSource(<div
+        {...a11yProps}
+        style={{...dragStyles, ...style}}
+        className={className}
+        key={key}
+        role="row"
+        >
+        {columns}
+      </div>
+      )
+    );
+
+  }
+}
+const spec = {
+  beginDrag(props) {
+    return {
+      id: props.rowData.uid,
+      DragPreview: EventDragPreview
+    }
+  }
+}
+
+const collect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  connectDragPreview: connect.dragPreview(),
+  isDragging: monitor.isDragging()
+})
+
+export default DragSource('event', spec, collect)(EventsTableRow)

admin-panel/src/components/events/VirtualizedLazyTable.js

@@ -4,6 +4,13 @@ import {moduleName, fetchLazy, selectEvent, eventListSelector} from '../../ducks
 import {Table, Column, InfiniteLoader} from 'react-virtualized'
 import 'react-virtualized/styles.css'
 
+import EventTableRow from './EventsTableRow'
+
+
+function rowRenderer (props) {
+    return <EventTableRow {...props} />
+}
+
 export class EventLazyTable extends Component {
     static propTypes = {
 
@@ -33,6 +40,7 @@ export class EventLazyTable extends Component {
                         height={300}
                         onRowClick={this.handleRowClick}
                         onRowsRendered={onRowsRendered}
+                        rowRenderer={rowRenderer}
                         rowClassName="test__event_table_row"
                     >
                         <Column

admin-panel/src/components/routes/Admin.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import VirtualizedLazyTable from '../events/VirtualizedLazyTable'
 import PeopleList from '../people/PeopleList'
 import SelectedEvents from '../events/SelectedEvents'
+import Bucket from '../events/Bucket';
 
 class Admin extends Component {
     static propTypes = {
@@ -14,6 +15,7 @@ class Admin extends Component {
                 <h2>Admin Page</h2>
                 <SelectedEvents />
                 <PeopleList />
+                <Bucket/>
                 <VirtualizedLazyTable />
             </div>
         )

admin-panel/src/components/routes/auth/index.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import {Route, NavLink} from 'react-router-dom'
 import {connect} from 'react-redux'
-import {signIn, signUp} from '../../../ducks/auth'
+
+import {signIn, signUp, errorSelector, loadingSelector} from '../../../ducks/auth'
 import SignInForm from '../../auth/SignInForm'
 import SignUpForm from '../../auth/SignUpForm'
 
@@ -11,6 +12,7 @@ class Auth extends Component {
     };
 
     render() {
+        const {loading, error} = this.props;
         return (
             <div>
                 <h2>Auth page</h2>
@@ -20,6 +22,12 @@ class Auth extends Component {
                 </ul>
                 <Route path='/auth/sign-in' render={() => <SignInForm onSubmit={this.onSignIn}/>} />
                 <Route path='/auth/sign-up' render={() => <SignUpForm onSubmit={this.onSignUp}/>} />
+                {error !== null &&
+                    <h4 style={{color: 'red'}}>{error}</h4>
+                }
+                {loading &&
+                <div>Loading...</div>
+                }
             </div>
         )
     }
@@ -29,4 +37,7 @@ class Auth extends Component {
 
 }
 
-export default connect(null, { signIn, signUp })(Auth)
+export default connect(state => ({
+    error: errorSelector(state),
+    loading: loadingSelector(state)
+}), { signIn, signUp })(Auth)

admin-panel/src/config.js

@@ -1,14 +1,15 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-04-12'
+export const appName = 'advreact-04-12-vesna'
 
 const config = {
-    apiKey: "AIzaSyCmDWlgYIhtEr1pWjgKYds3iXKWBl9wbjE",
+    appName: appName,
+    apiKey: "AIzaSyAkBB770P-MOKox9k6DjFRKi9J-bIoMnJs",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "95255462276"
+    messagingSenderId: "786443944884"
 }
 
 firebase.initializeApp(config)

admin-panel/src/ducks/events.js

@@ -22,6 +22,8 @@ export const FETCH_LAZY_SUCCESS = `${prefix}/FETCH_LAZY_SUCCESS`
 export const SELECT = `${prefix}/SELECT`
 export const ADD_PERSON_TO_EVENT = `${prefix}/ADD_PERSON_TO_EVENT`
 
+export const REMOVE = `${prefix}/REMOVE`
+
 /**
  * Reducer
  * */
@@ -67,6 +69,9 @@ export default function reducer(state = new ReducerRecord(), action) {
                 ? selected.remove(payload.uid)
                 : selected.add(payload.uid)
             )
+        case REMOVE:
+            return state.update('entities', entities =>  entities.delete(payload.eventId))
+
 
         default:
             return state
@@ -86,6 +91,8 @@ export const selectionSelector = createSelector(stateSelector, state => state.se
 export const selectedEvents = createSelector(eventListSelector, selectionSelector, (events, selected) =>
     events.filter(event => selected.has(event.uid))
 )
+export const idSelector = (_, props) => props.id
+export const eventSelector = createSelector(entitiesSelector, idSelector, (entities, id) => entities.get(id) !== undefined?entities.get(id):EventRecord)
 
 /**
  * Action Creators
@@ -117,6 +124,12 @@ export function addPersonToEvent(personId, eventId) {
     }
 }
 
+export function removeEvent(eventId){
+    return {
+        type: REMOVE,
+        payload:{eventId}
+    }
+}
 /**
  * Sagas
  * */

admin-panel/src/mocks/index.js

@@ -6,4 +6,11 @@ export function saveEventsToFB() {
     conferences.forEach(conference  => eventsRef.push(conference))
 }
 
+export function getEventsFromFB() {
+    const db = firebase.database()
+    const eventsRef =  db.ref(`/events`)
+    return eventsRef.once('value').then(result => result.val()
+    );
+}
+
 window.saveEventsToFB = saveEventsToFB