grabbing values from form

melinda-schmitz · Sep 30, 2018 · 29a9ad6 · 29a9ad6
1 parent 799015c
commit 29a9ad6
Show file tree

Hide file tree

Showing 4 changed files with 308 additions and 62 deletions.
diff --git a/client/.eslintrc.json b/client/.eslintrc.json
@@ -3,6 +3,8 @@
 	"parser": "babel-eslint",
 	"rules": {
 		"react/jsx-filename-extension": 0,
-		"implicit-arrow-linebreak": 0
+		"implicit-arrow-linebreak": 0,
+		"react/prefer-stateless-function": 0,
+		"react/forbid-prop-types": 0
 	}
 }
diff --git a/client/src/containers/AddEvent/AddEvent.js b/client/src/containers/AddEvent/AddEvent.js
@@ -10,9 +10,10 @@ import FormControl from '@material-ui/core/FormControl';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
 import Button from '@material-ui/core/Button';
-
 // import EventField component
 import EventField from './EventField';
+// import list of states
+import states from './states.json';
 
 const styles = theme => ({
   formControl: {
@@ -23,149 +24,172 @@ const styles = theme => ({
   button: {
     margin: theme.spacing.unit,
   },
+  menu: {
+    width: 200,
+  },
 });
 
 class AddEvent extends Component {
-  constructor() {
-    super();
-    this.state = {
-      eventName: '',
-      eventAddress: '',
-      eventAddress2: '',
-      eventCity: '',
-      eventState: '',
-      eventZip: '',
-      eventDescription: '',
-    };
-  }
-
-  handleChange = name => event => {
-    this.setState({
-      [name]: event.target.value,
-    });
+  state = {
+    eventName: '',
+    eventAddress: '',
+    eventAddress2: '',
+    eventCity: '',
+    eventState: '',
+    eventZip: '',
+    eventDescription: '',
   };
 
-  handleAddEventSubmit(event) {
-    event.preventDefault();
+  onChange = e => this.setState({ [e.target.name]: e.target.value });
+
+  onSubmit = e => {
+    const {
+      eventName,
+      eventAddress,
+      eventAddress2,
+      eventCity,
+      eventState,
+      eventZip,
+      eventDescription,
+    } = this.state;
+    e.preventDefault();
     // this.restaurantsRef.push({ name: this.state.name });
-    console.log(this.state.eventName);
-    console.log(this.state.eventAddress);
-    console.log(this.state.eventAddress2);
-    console.log(this.state.eventCity);
-    console.log(this.state.eventState);
-    console.log(this.state.eventZip);
-    console.log(this.state.eventDescription);
+    console.log('city', eventName);
+    console.log('street address', eventAddress);
+    console.log('address line 2', eventAddress2);
+    console.log('city', eventCity);
+    console.log('state', eventState);
+    console.log('zip code', eventZip);
+    console.log('event desc', eventDescription);
   }
 
   render() {
     const { classes } = this.props;
-    const { eventName, eventAddress, eventAddress2, eventCity, eventState, eventZip, eventDescription, eventDate, eventTime } = this.state;
+    const {
+      eventName,
+      eventAddress,
+      eventAddress2,
+      eventCity,
+      eventState,
+      eventZip,
+      eventDescription,
+      eventDate,
+      eventTime,
+    } = this.state;
 
     return (
       <div>
         <div className="main-content-section">
           <h1>Add Event</h1>
           <Grid container spacing={16}>
             <Grid item xs={12} sm={12} md={6}>
-              <form className={classes.container} noValidate autoComplete="off">
+              <form className={classes.container} noValidate autoComplete="off" onSubmit={this.onSubmit}>
                 <EventField
                   label="Event name"
                   id="event-name"
-                  name="name"
-                  onFieldChange={this.handleChange}
+                  name="eventName"
+                  onChange={this.onChange}
                   fieldType="text"
                   value={eventName}
                 />
                 <EventField
                   label="Street address"
                   id="street-address"
-                  name="street-address"
-                  onFieldChange={this.handleChange}
+                  name="eventAddress"
+                  onChange={this.onChange}
                   fieldType="text"
                   value={eventAddress}
                 />
                 <EventField
                   label="Address line 2"
                   id="address-line-2"
-                  name="address-line-2"
-                  onFieldChange={this.handleChange}
+                  name="eventAddress2"
+                  onChange={this.onChange}
                   fieldType="text"
                   value={eventAddress2}
                 />
                 <EventField
                   label="City"
                   id="city"
-                  name="city"
-                  onFieldChange={this.handleChange}
+                  name="eventCity"
+                  onChange={this.onChange}
                   fieldType="text"
                   value={eventCity}
                 />
                 <FormControl className={classes.formControl} fullWidth>
                   <TextField
                     select
                     id="state"
-                    name="state"
+                    name="eventState"
                     label="State"
-                    onChange={this.handleChange}
+                    onChange={this.onChange}
                     margin="normal"
+                    value={eventState}
                     variant="outlined"
-                    SelectProps={
-                      { name: 'value' }
-                    }
+                    SelectProps={{
+                      MenuProps: {
+                        className: classes.menu,
+                      },
+                    }}
                     InputLabelProps={{
                       shrink: true,
                     }}
                   >
-                    <MenuItem value="">
-                      <em>None</em>
-                    </MenuItem>
-                    <MenuItem value="hai">Hai</MenuItem>
-                    <MenuItem value="olivier">Olivier</MenuItem>
-                    <MenuItem value="kevin">Kevin</MenuItem>
+                    {states.map(option => (
+                      <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                      </MenuItem>
+                    ))}
                   </TextField>
                 </FormControl>
                 <EventField
                   label="Zip code"
                   id="zip-code"
-                  name="zip-code"
-                  onFieldChange={this.handleChange}
+                  name="eventZip"
+                  onChange={this.onChange}
                   fieldType="text"
                   value={eventZip}
                 />
                 <EventField
                   label="Date"
                   id="event-date"
-                  name="event-date"
-                  onFieldChange={this.handleChange}
+                  name="eventDate"
+                  onChange={this.onChange}
                   fieldType="date"
                   value={eventDate}
                 />
                 <EventField
                   label="Time"
                   id="event-time"
-                  name="event-time"
-                  onFieldChange={this.handleChange}
+                  name="eventTime"
+                  onChange={this.onChange}
                   fieldType="time"
                   value={eventTime}
                 />
                 <EventField
                   label="Description"
                   id="event-description"
-                  name="event-description"
-                  onFieldChange={this.handleChange}
+                  name="eventDescription"
+                  onChange={this.onChange}
                   fieldType="text"
                   value={eventDescription}
                 />
-                <Button onClick={this.handleAddEventSubmit} variant="fab" color="primary" aria-label="Add" className={classes.button}>
+                <Button type="submit" variant="fab" color="primary" aria-label="Add" className={classes.button}>
                   <AddIcon />
                 </Button>
               </form>
             </Grid>
           </Grid>
         </div>
-      </div>
+      </div >
     );
   }
 }
 
+// Define prop types
+AddEvent.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+
 export default withStyles(styles)(AddEvent);
diff --git a/client/src/containers/AddEvent/EventField.js b/client/src/containers/AddEvent/EventField.js
@@ -1,4 +1,7 @@
+// Import React
 import React, { Component } from 'react';
+// import prop types
+import PropTypes from 'prop-types';
 // Import Material UI components and styling.
 import { withStyles } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
@@ -14,7 +17,15 @@ const styles = theme => ({
 
 class EventField extends Component {
   render() {
-    const { classes, label, id, name, onFieldChange, fieldType } = this.props;
+    // ES6 destructuring
+    const {
+      classes,
+      label,
+      id,
+      name,
+      onChange,
+      fieldType,
+    } = this.props;
 
     return (
       <FormControl className={classes.formControl} fullWidth>
@@ -23,16 +34,27 @@ class EventField extends Component {
           id={id}
           margin="normal"
           name={name}
-          onChange={onFieldChange}
           type={fieldType}
+          onChange={onChange}
           variant="outlined"
           InputLabelProps={{
             shrink: true,
           }}
         />
       </FormControl>
-    )
+    );
   }
 }
 
+// Define prop types
+EventField.propTypes = {
+  label: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  fieldType: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+// Export the EventField component so that it can be added to the AddEvent form component.
 export default withStyles(styles)(EventField);