form is working

melinda-schmitz · Sep 30, 2018 · bda078f · bda078f
1 parent 8c1b968
commit bda078f
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 29 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -7,6 +7,7 @@
 	--app-dark-color: black;
 	--app-transparent-color: rgba(0, 0, 0, 0);
 	--app-card-color: #dddddd;
+	--form-error-color: red;
 }
 
 html,

diff --git a/client/src/containers/AddEvent/AddEvent.js b/client/src/containers/AddEvent/AddEvent.js
@@ -29,6 +29,9 @@ const styles = theme => ({
   menu: {
     width: 200,
   },
+  invalidFeedback: {
+    color: 'var(--form-error-color)',
+  },
 });
 const initialState = {
   eventName: '',
@@ -37,7 +40,10 @@ const initialState = {
   eventCity: '',
   eventState: '',
   eventZip: '',
+  eventDate: '',
+  eventTime: '',
   eventDescription: '',
+  errors: [],
 };
 
 
@@ -58,6 +64,8 @@ class AddEvent extends Component {
       eventCity,
       eventState,
       eventZip,
+      eventDate,
+      eventTime,
       eventDescription,
     } = this.state;
     e.preventDefault();
@@ -69,18 +77,65 @@ class AddEvent extends Component {
     console.log('state', eventState);
     console.log('zip code', eventZip);
     console.log('event desc', eventDescription);
+
+    // Check For Errors
+    if (eventName === '') {
+      this.setState({ errors: { eventName: 'Event name is required.' } });
+      return;
+    }
+
+    if (eventAddress === '') {
+      this.setState({ errors: { eventAddress: 'Street address is required.' } });
+      return;
+    }
+
+    if (eventCity === '') {
+      this.setState({ errors: { eventCity: 'City is required.' } });
+      return;
+    }
+
+    if (eventState === '') {
+      this.setState({ errors: { eventState: 'State is required.' } });
+      return;
+    }
+
+    if (eventZip === '') {
+      this.setState({ errors: { eventZip: 'Zip code is required.' } });
+      return;
+    }
+
+    if (eventDate === '') {
+      this.setState({ errors: { eventDate: 'Date is required.' } });
+      return;
+    }
+
+    if (eventTime === '') {
+      this.setState({ errors: { eventTime: 'Time is required.' } });
+      return;
+    }
+
+    if (eventDescription === '') {
+      this.setState({ errors: { eventDescription: 'Description of event is required.' } });
+      return;
+    }
+
     this.eventsRef.push({
       eventName,
       eventAddress,
       eventAddress2,
       eventCity,
       eventState,
       eventZip,
+      eventDate,
+      eventTime,
       eventDescription,
     });
     // Clear form
     document.getElementById('add-event-form').reset();
     this.setState(initialState);
+
+    // Go to home page
+    this.props.history.push('/');
   }
 
   render() {
@@ -95,30 +150,62 @@ class AddEvent extends Component {
       eventDescription,
       eventDate,
       eventTime,
+      errors,
     } = 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 id="add-event-form" className={classes.container} noValidate autoComplete="off" onSubmit={this.onSubmit}>
+          <form id="add-event-form" className={classes.container} noValidate autoComplete="off" onSubmit={this.onSubmit}>
+            <Grid container spacing={24}>
+              <Grid item xs={12} sm={12} md={6}>
                 <EventField
                   label="Event name"
                   id="event-name"
                   name="eventName"
                   onChange={this.onChange}
                   fieldType="text"
                   value={eventName}
+                  error={errors.eventName}
+                />
+                <EventField
+                  label="Date"
+                  id="event-date"
+                  name="eventDate"
+                  onChange={this.onChange}
+                  fieldType="date"
+                  value={eventDate}
+                  error={errors.eventDate}
+                />
+                <EventField
+                  label="Time"
+                  id="event-time"
+                  name="eventTime"
+                  onChange={this.onChange}
+                  fieldType="time"
+                  value={eventTime}
+                  error={errors.eventTime}
                 />
+                <EventField
+                  label="Description"
+                  id="event-description"
+                  name="eventDescription"
+                  onChange={this.onChange}
+                  fieldType="text"
+                  value={eventDescription}
+                  error={errors.eventDescription}
+                />
+              </Grid>
+              <Grid item xs={12} sm={12} md={6}>
                 <EventField
                   label="Street address"
                   id="street-address"
                   name="eventAddress"
                   onChange={this.onChange}
                   fieldType="text"
                   value={eventAddress}
+                  error={errors.eventAddress}
                 />
                 <EventField
                   label="Address line 2"
@@ -135,6 +222,7 @@ class AddEvent extends Component {
                   onChange={this.onChange}
                   fieldType="text"
                   value={eventCity}
+                  error={errors.eventCity}
                 />
                 <FormControl className={classes.formControl} fullWidth>
                   <TextField
@@ -144,6 +232,7 @@ class AddEvent extends Component {
                     label="State"
                     onChange={this.onChange}
                     margin="normal"
+                    error={errors.eventState}
                     value={eventState}
                     variant="outlined"
                     SelectProps={{
@@ -161,6 +250,7 @@ class AddEvent extends Component {
                       </MenuItem>
                     ))}
                   </TextField>
+                  {errors.eventState && <div className={classes.invalidFeedback}>{errors.eventState}</div>}
                 </FormControl>
                 <EventField
                   label="Zip code"
@@ -169,37 +259,14 @@ class AddEvent extends Component {
                   onChange={this.onChange}
                   fieldType="text"
                   value={eventZip}
-                />
-                <EventField
-                  label="Date"
-                  id="event-date"
-                  name="eventDate"
-                  onChange={this.onChange}
-                  fieldType="date"
-                  value={eventDate}
-                />
-                <EventField
-                  label="Time"
-                  id="event-time"
-                  name="eventTime"
-                  onChange={this.onChange}
-                  fieldType="time"
-                  value={eventTime}
-                />
-                <EventField
-                  label="Description"
-                  id="event-description"
-                  name="eventDescription"
-                  onChange={this.onChange}
-                  fieldType="text"
-                  value={eventDescription}
+                  error={errors.eventZip}
                 />
                 <Button type="submit" variant="fab" color="primary" aria-label="Add" className={classes.button}>
                   <AddIcon />
                 </Button>
-              </form>
+              </Grid>
             </Grid>
-          </Grid>
+          </form>
         </div>
       </div>
     );
@@ -209,6 +276,7 @@ class AddEvent extends Component {
 // Define prop types
 AddEvent.propTypes = {
   classes: PropTypes.object.isRequired,
+  errors: PropTypes.object,
 };
 
 

diff --git a/client/src/containers/AddEvent/EventField.js b/client/src/containers/AddEvent/EventField.js
@@ -13,6 +13,9 @@ const styles = theme => ({
     minWidth: 120,
     marginTop: 20,
   },
+  invalidFeedback: {
+    color: 'var(--form-error-color)',
+  },
 });
 
 class EventField extends Component {
@@ -25,6 +28,7 @@ class EventField extends Component {
       name,
       onChange,
       fieldType,
+      error,
     } = this.props;
 
     return (
@@ -41,6 +45,7 @@ class EventField extends Component {
             shrink: true,
           }}
         />
+        {error && <div className={classes.invalidFeedback}>{error}</div>}
       </FormControl>
     );
   }
@@ -54,6 +59,7 @@ EventField.propTypes = {
   onChange: PropTypes.func.isRequired,
   fieldType: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired,
+  error: PropTypes.string,
 };
 
 // Export the EventField component so that it can be added to the AddEvent form component.