Feat: Post Event detail only description

Add dialog to take post event detail description

Relates #53

src/components/ClassroomComponent/MyEventsComponent/MyEventsComponent.js

@@ -20,6 +20,7 @@ import { connect } from 'react-redux'
 import { firebaseDB } from '../../../firebaseConfig'
 import SearchSortContainer from './SearchSortContainer'
 import ViewEventDialog from '../../Dialogs/ViewEventDialogComponent'
+import PostEventDetailDialog from '../../Dialogs/PostEventDetailDialogComponent'
 import FlagIcon from 'material-ui/svg-icons/action/report-problem'
 import NAIcon from 'material-ui/svg-icons/action/restore'
 import DashIcon from 'material-ui/svg-icons/content/remove'
@@ -34,11 +35,13 @@ class MyEventsComponent extends Component {
   constructor (props) {
     super(props)
     this.showDialog = this.showDialog.bind(this)
+    this.showPostEventDetailDialog = this.showPostEventDetailDialog.bind(this)
     this.handleDialogClose = this.handleDialogClose.bind(this)
     this.nextEvent = this.nextEvent.bind(this)
     this.handleIcon = this.handleIcon.bind(this)
     this.handleSearch = this.handleSearch.bind(this)
     this.handleSort = this.handleSort.bind(this)
+    this.uploadPostEventDetail = this.uploadPostEventDetail.bind(this)
 
     this.state = {
       fixedHeader: true,
@@ -53,6 +56,7 @@ class MyEventsComponent extends Component {
       pendingArr: {},
       approvedArr: {},
       dialogOpen: false,
+      postEventDetailDialogOpen: false,
       currentEvent: {},
       fetching: true,
       searchContent: '',
@@ -74,8 +78,19 @@ class MyEventsComponent extends Component {
     this.setState({ currentEvent: event })
   }
 
+  showPostEventDetailDialog (event) {
+    this.setState({ postEventDetailDialogOpen: true, currentEvent: event })
+  }
+
   handleDialogClose () {
-    this.setState({ dialogOpen: false })
+    this.setState({ dialogOpen: false, postEventDetailDialogOpen: false })
+  }
+
+  uploadPostEventDetail (event, message) {
+    this.handleDialogClose()
+    firebaseDB.ref('/events/').child(event.key + '/postEventDetail').set(message)
+    const { dispatch } = this.props
+    dispatch({ type: 'TOASTER', message: 'Post event details updated', toastOpen: true })
   }
 
   nextEvent () {
@@ -189,6 +204,8 @@ class MyEventsComponent extends Component {
 
         <ViewEventDialog open={this.state.dialogOpen} currentEvent={this.state.currentEvent} handleClose={this.handleDialogClose} nextEvent={this.nextEvent} />
 
+        <PostEventDetailDialog open={this.state.postEventDetailDialogOpen} currentEvent={this.state.currentEvent} handleClose={this.handleDialogClose} uploadPostEventDetail={this.uploadPostEventDetail} />
+
         <Paper style={{ width: '98%', height: 500, overflow: 'hidden', marginTop: 20 }} zDepth={2}>
           <Table
             style={{ backgroundColor: '' }}
@@ -257,6 +274,7 @@ class MyEventsComponent extends Component {
                           useLayerForClickAway
                         >
                           <MenuItem primaryText='View' onClick={() => this.showDialog(event)} />
+                          <MenuItem hidden={!event.receiptURL} primaryText='Post Event Details' onClick={() => this.showPostEventDetailDialog(event)} />
                           <MenuItem hidden={!event.receiptURL} primaryText='Download Receipt' onClick={() => { window.location = (event.receiptURL) }} />
                         </IconMenu>}
                       </TableRowColumn>

src/components/Dialogs/PostEventDetailDialogComponent.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import Dialog from 'material-ui/Dialog'
+import FlatButton from 'material-ui/FlatButton'
+import RaisedButton from 'material-ui/RaisedButton'
+import { connect } from 'react-redux'
+
+class PostEventDetailDialog extends Component {
+  constructor (props) {
+    super(props)
+    this.changeMessage = this.changeMessage.bind(this)
+    this.state = {
+      open: this.props.open,
+      message: ''
+    }
+  }
+
+  changeMessage (e) {
+    this.setState({ message: e.target.value })
+  }
+
+  componentWillReceiveProps (nextProps) {
+    console.log(nextProps)
+    this.setState({ open: nextProps.open, message: '' })
+  }
+
+  render () {
+    const flagActions = [
+      <FlatButton
+        label='Cancel'
+        primary={false}
+        onClick={this.props.handleClose}
+        style={{ margin: '0px 5px' }}
+      />,
+      <RaisedButton
+        label={'Submit'}
+        primary
+        onClick={() => this.props.uploadPostEventDetail(this.props.currentEvent, this.state.message)}
+        style={{ margin: '0px 5px' }}
+        disabled={this.state.message.length < 1}
+      />
+    ]
+
+    return (
+      <div>
+        <Dialog
+          title={this.props.currentEvent.title}
+          actions={flagActions}
+          open={this.props.open}
+          onRequestClose={this.props.handleClose}
+          autoScrollBodyContent
+          contentStyle={{ width: this.props.isMobile ? '97%' : '40%' }}
+          actionsContainerStyle={{ backgroundColor: 'rgb(248, 248, 248)' }}
+          titleStyle={{ backgroundColor: 'rgb(240, 240, 240)' }}
+          bodyStyle={{ marginTop: 15 }}
+        >
+
+          <textarea rows={5} style={{ width: '100%', padding: 5 }} onChange={this.changeMessage} value={this.state.message} placeholder={'Please add description of ' + (this.props.currentEvent.title)} />
+
+        </Dialog>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps (state) {
+  const { isMobile } = state.toggler
+  const { user } = state.authentication
+  return {
+    user,
+    isMobile
+  }
+}
+
+export default connect(mapStateToProps)(PostEventDetailDialog)

src/components/Dialogs/ViewEventDialogComponent.js

@@ -168,6 +168,10 @@ class ViewEventDialog extends Component {
               <p style={styles.label}>Timings</p>
               <p style={styles.value}>{(moment(this.props.currentEvent.startDate, 'DD-MM-YYYY').format('dddd')) === 'Sunday' ? '9:00 AM to 5:00 PM' : '5:45 PM to 8:00 PM'}</p>
             </div>
+            <div hidden={!this.props.currentEvent.postEventDetail} style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
+              <p style={styles.label}>Post Event Details</p>
+              <p style={styles.value}>{this.props.currentEvent.postEventDetail}</p>
+            </div>
             <div hidden={!((this.props.currentEvent.SC_appr === 'flagged') || (this.props.currentEvent.SC_appr === 'rejected'))} style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
               <p style={styles.label}>{this.props.currentEvent.SC_appr} by SC</p>
               <p style={styles.value}>{this.props.currentEvent.SC_msg}</p>
@@ -193,15 +197,11 @@ class ViewEventDialog extends Component {
 }
 
 function mapStateToProps (state) {
-  const { openSideNav, isMobile, filter } = state.toggler
-  const { user, verified, vals } = state.authentication
+  const { isMobile } = state.toggler
+  const { user } = state.authentication
   return {
     user,
-    openSideNav,
-    verified,
-    isMobile,
-    vals,
-    filter
+    isMobile
   }
 }