Misc

frontend/public/stylesheets/07_event_form.css

@@ -98,12 +98,17 @@
   padding-bottom: 15px;
 }
 
-.poi-name, .poi-start, .poi-end, .poi-description, .poi-name {
+.poi-name, .poi-start, .poi-end, .poi-description, .poi-name, .poi-error{
   font-size: 16px;
   padding-bottom: 5px;
   padding-top: 10px;
 }
 
+.poi-error{
+  color: red;
+}
+
+
 .poi-delete {
   margin-top: 10px;
 }

frontend/src/actions/event_actions.js

@@ -5,6 +5,7 @@ export const RECEIVE_EVENT = "RECEIVE_EVENT";
 export const REMOVE_EVENT = "REMOVE_EVENT";
 export const RECEIVE_EVENT_ERRORS = "RECEIVE_EVENT_ERRORS";
 export const REMOVE_EVENT_ERRORS = "REMOVE_EVENT_ERRORS";
+export const REMOVE_POI_ERRORS = "REMOVE_POI_ERRORS"
 
 export const receiveEvents = (events) => ({
   type: RECEIVE_EVENTS,
@@ -30,6 +31,10 @@ export const removeEventErrors = () => ({
   type: REMOVE_EVENT_ERRORS
 });
 
+export const removePoiErrors = () => ({
+  type: REMOVE_POI_ERRORS
+})
+
 export const fetchEvents = () => dispatch => (
   getEvents()
     .then(events => dispatch(receiveEvents(events)))

frontend/src/components/event_form/create_event_form_container.js

@@ -1,6 +1,6 @@
 import { connect } from "react-redux";
 import EventForm from "./event_form";
-import { createEvent, removeEventErrors } from "../../actions/event_actions";
+import { createEvent, removePoiErrors } from "../../actions/event_actions";
 import { withRouter } from "react-router-dom";
 
 const mSTP = (state) => ({
@@ -11,7 +11,7 @@ const mSTP = (state) => ({
 
 const mDTP = dispatch => ({
   createEvent: (event) => dispatch(createEvent(event)),
-  removeEventErrors: () => dispatch(removeEventErrors())
+  removePoiErrors: () => dispatch(removePoiErrors())
 })
 
 

frontend/src/components/event_form/edit_event_form.jsx

@@ -23,7 +23,6 @@ class EditEventForm extends React.Component {
     this.accept = this.accept.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.update = this.update.bind(this);
-    this.renderPoiError = this.renderPoiError.bind(this);
     this.getPois = this.getPois.bind(this);
   }
 
@@ -110,43 +109,55 @@ class EditEventForm extends React.Component {
     this.setState({ PointsOfInterest: points });
   }
 
-  // helper to render errors for a specific point of interest
-  renderPoiError(i){
-    let poiError = this.props.errors.includes(i + 1) 
-      ? <div className="form-error">This poi is improperly formatted</div>
-      : <div className="form-error"></div>
-    return poiError
-  }
-
   // helper to render input fields for each poi present in state
   renderPoiInputs() {
     let points = this.state.PointsOfInterest;
     return points.map((point, i) => {
+      // Determine if errors should show on pois
+      let descriptionLabel = this.props?.errors[i + 1]?.includes('Description is required') 
+      ? <div className="poi-error">Description is required</div> 
+      : <div className="poi-description">Description</div>
+
+    let nameLabel = this.props?.errors[i + 1]?.includes('Name is required') 
+      ? <div className="poi-error">Name is required</div> 
+      : <div className="poi-name">Name</div>
+
+    let startTimeLabel = this.props?.errors[i + 1]?.includes('Invalid start time') 
+      ? <div className="poi-error">Invalid start time</div>
+      : this.props?.errors[i + 1]?.includes('Premature start time')
+      ? <div className="poi-error">Premature start time</div>
+      : <div className="poi-start">Start Time</div>
+
+    let endTimeLabel = this.props?.errors[i + 1]?.includes('Invalid end time') 
+      ? <div className="poi-error">Invalid end time</div> 
+      : this.props?.errors[i + 1]?.includes('End time before start')
+      ? <div className="poi-error">End time before start</div>
+      : <div className="poi-end">End Time</div>
+
       return (
         <div className="create-form-marker-input" key={`${i} + ${point.location.lat}`}>
-          {this.renderPoiError(i)}
-          <div className="poi-name">Name</div>
+          {nameLabel}
           <input
             type="text"
             onChange={(e) => this.updatePoi(e, i, point, "name")}
             value={point.name}
             placeholder={`Point ${i + 1} name`}/>
 
-          <div className="poi-start">Start Time</div>
+          {startTimeLabel}
           <input
             type="datetime-local"
             onChange={(e) => this.updatePoi(e, i, point, "startTime")}
             min={formatTime(new Date())}
             value={formatTime(point.startTime)}/>
 
-          <div className="poi-end">End Time</div>
+          {endTimeLabel}
           <input
             type="datetime-local"
             onChange={(e) => this.updatePoi(e, i, point, "endTime")}
             min={formatTime(point.startTime)}
             value={formatTime(point.endTime)}/>
 
-          <div className="poi-description">Description</div>
+          {descriptionLabel}
           <input
             type="text"
             onChange={(e) => this.updatePoi(e, i, point, "description")}
@@ -159,23 +170,27 @@ class EditEventForm extends React.Component {
 
   render() {
     // setting vars for the error text to replace the form labels
-    let descriptionLabel = this.props.errors.includes('Description is required') 
+    let descriptionLabel = this.props?.errors[0].includes('Description is required') 
       ? <div className="form-error">Description is required</div> 
       : <div id="create-form-description">Description</div>
 
-    let nameLabel = this.props.errors.includes('Name is required') 
-      ? <div className="form-error">Name is too short</div> 
+    let nameLabel = this.props?.errors[0].includes('Name is required') 
+      ? <div className="form-error">Name is required</div> 
       : <div id="create-form-name">Name</div>
 
-    let startTimeLabel = this.props.errors.includes('Start time is required') 
-      ? <div className="form-error">Start time is required</div> 
+    let startTimeLabel = this.props?.errors[0].includes('Start time is required') 
+      ? <div className="form-error">Start time is required</div>
+      : this.props?.errors[0].includes('End time before start')
+      ? <div className="form-error">End time before start</div>
       : <div id="create-form-start-time">Start Time</div>
 
-    let endTimeLabel = this.props.errors.includes('End time is required') 
+    let endTimeLabel = this.props?.errors[0].includes('End time is required') 
       ? <div className="form-error">End time is required</div> 
-      : <div id="create-form-end-time">End Time</div>
+      : this.props?.errors[0].includes('End time before start')
+      ? <div className="form-error">End time before start</div>
+      : <div id="create-form-start-time">End Time</div>
 
-    let poiLabel = this.props.errors.includes('Must have at least 1 point of interest') 
+    let poiLabel = this.props?.errors[0].includes('Must have at least 1 point of interest') 
       ? <div className="form-error">Please select at least one Point of Interest</div> 
       : <div> </div>
 
@@ -236,7 +251,7 @@ class EditEventForm extends React.Component {
         </div>
       {this.state ? (
         <FunctionalMap event={this.state} accept={this.accept}
-          removeEventErrors = {this.props.removeEventErrors}
+          removePoiErrors = {this.props.removePoiErrors}
           getPois={this.getPois}
         />
       ) : (

frontend/src/components/event_form/edit_event_form_container.js

@@ -1,6 +1,6 @@
 import { connect } from "react-redux";
 import EditEventForm from "./edit_event_form";
-import { updateEvent, fetchEvent, removeEventErrors } from "../../actions/event_actions";
+import { updateEvent, fetchEvent, removePoiErrors } from "../../actions/event_actions";
 import { withRouter } from "react-router-dom";
 
 const mapStateToProps = (state, ownProps) => {
@@ -15,7 +15,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = dispatch => ({
   updateEvent: (event) => dispatch(updateEvent(event)),
   fetchEvent: (eventId) => dispatch(fetchEvent(eventId)),
-  removeEventErrors: () => dispatch(removeEventErrors())
+  removePoiErrors: () => dispatch(removePoiErrors())
 })
 
 

frontend/src/components/event_form/event_form.jsx

@@ -31,7 +31,6 @@ class EventForm extends React.Component {
     this.accept = this.accept.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.update = this.update.bind(this);
-    this.renderPoiError = this.renderPoiError.bind(this);
   }
 
   // helper to update slice of state when a form field changes
@@ -105,40 +104,53 @@ class EventForm extends React.Component {
     this.setState({ PointsOfInterest: points });
   }
 
-  // helper to render errors above their respective pois
-  renderPoiError(i){
-    let poiError = this.props.errors.includes(i + 1) 
-      ? <div className="form-error">This poi is improperly formatted</div>
-      : <div className="form-error"></div>
-    return poiError
-  }
-
   // helper to render form inputs for each poi present in state
-  renderPoiInputs() {
+  renderPoiInputs(i) {
     let points = this.state.PointsOfInterest;
+    // Determine if errors should show up on pois
     return points.map((point, i) => {
+      let descriptionLabel = this.props?.errors[i + 1]?.includes('Description is required') 
+      ? <div className="poi-error">Description is required</div> 
+      : <div className="poi-description">Description</div>
+
+    let nameLabel = this.props?.errors[i + 1]?.includes('Name is required') 
+      ? <div className="poi-error">Name is required</div> 
+      : <div className="poi-name">Name</div>
+
+    let startTimeLabel = this.props?.errors[i + 1]?.includes('Invalid start time') 
+      ? <div className="poi-error">Invalid start time</div>
+      : this.props?.errors[i + 1]?.includes('Premature start time')
+      ? <div className="poi-error">Premature start time</div>
+      : <div className="poi-start">Start Time</div>
+
+    let endTimeLabel = this.props?.errors[i + 1]?.includes('Invalid end time') 
+      ? <div className="poi-error">Invalid end time</div> 
+      : this.props?.errors[i + 1]?.includes('End time before start')
+      ? <div className="poi-error">End time before start</div>
+      : <div className="poi-end">End Time</div>
+
+
       return (
         <div className="create-form-marker-input" key={i}>
-          {this.renderPoiError(i)}
-          <div className="poi-name">Name</div>
+          {nameLabel}
           <input
             type="text"
             onChange={(e) => this.updatePoi(e, i, point, "name")}
             placeholder={`Point ${i + 1} name`}/>
 
-          <div className="poi-start">Start Time</div>
+          {startTimeLabel}
           <input
             type="datetime-local"
             min={formatTime(new Date())}
             onChange={(e) => this.updatePoi(e, i, point, "startTime")}/>
 
-          <div className="poi-end">End Time</div>
+          {endTimeLabel}
           <input
             type="datetime-local"
             min={formatTime(new Date())}
             onChange={(e) => this.updatePoi(e, i, point, "endTime")}/>
 
-          <div className="poi-description">Description</div>
+          {descriptionLabel}
           <input
             type="text"
             onChange={(e) => this.updatePoi(e, i, point, "description")}
@@ -150,27 +162,25 @@ class EventForm extends React.Component {
 
   render() {
     // helpers to replace form labels with errors if errors are present
-    let descriptionLabel = this.props.errors.includes('Description is required') 
+    let descriptionLabel = this.props?.errors[0].includes('Description is required') 
       ? <div className="form-error">Description is required</div> 
       : <div id="create-form-description">Description</div>
 
-    let nameLabel = this.props.errors.includes('Name is required') 
-      ? <div className="form-error">Name is too short</div> 
+    let nameLabel = this.props?.errors[0].includes('Name is required') 
+      ? <div className="form-error">Name is required</div> 
       : <div id="create-form-name">Name</div>
 
-    let startTimeLabel = this.props.errors.includes('Start time is required') 
+    let startTimeLabel = this.props?.errors[0].includes('Start time is required') 
       ? <div className="form-error">Start time is required</div>
-      : this.props.errors.includes('End time before start')
-      ? <div className="form-error">End time before start</div>
       : <div id="create-form-start-time">Start Time</div>
 
-    let endTimeLabel = this.props.errors.includes('End time is required') 
+    let endTimeLabel = this.props?.errors[0].includes('End time is required') 
       ? <div className="form-error">End time is required</div> 
-      : this.props.errors.includes('End time before start')
+      : this.props?.errors[0].includes('End time before start')
       ? <div className="form-error">End time before start</div>
       : <div id="create-form-start-time">End Time</div>
 
-    let poiLabel = this.props.errors.includes('Must have at least 1 point of interest') 
+    let poiLabel = this.props?.errors[0].includes('Must have at least 1 point of interest') 
       ? <div className="form-error">Please select at least one Point of Interest</div> 
       : <div> </div>
 
@@ -224,7 +234,7 @@ class EventForm extends React.Component {
           </div>
 
         <FunctionalMap event={this.state} accept={this.accept} 
-          removeEventErrors = {this.props.removeEventErrors}
+          removePoiErrors = {this.props.removePoiErrors}
           getPois={this.getPois}
         />
 

frontend/src/components/event_index/event_index.jsx

@@ -17,17 +17,33 @@ class EventIndex extends React.Component {
     )
   }
 
+  // Use quick sort to order events by start date.
+  orderEvents(events){
+    if (events.length <= 1) return events;
+
+    let pivot = events[0];
+    let earlierEvents = events.slice(1).filter((event) => new Date(event.startTime) < new Date(pivot.startTime));
+    let laterEvents = events.slice(1).filter((event) => new Date(event.startTime) > new Date(pivot.startTime));
+    let earlier = this.orderEvents(earlierEvents);
+    let later = this.orderEvents(laterEvents);
+    return earlier.concat([pivot]).concat(later);
+  }
+
+
+
   renderOwnEvents() {
     if (Object.values(this.props.allEvents).length === 0) return null;
 
     const ownEvents = this.props.allEvents.filter(
       event => event.owner === this.props.user)
+
+    let orderedOwnEvents = this.orderEvents(ownEvents)
 
     if (ownEvents.length === 0) return null;
 
     return (
       <ul id="self-event-list">
-        {ownEvents.map((event, i) => {
+        {orderedOwnEvents.map((event, i) => {
           if (i < 3) {
             return <EventIndexItem key={event._id} event={event} />
           }
@@ -44,9 +60,10 @@ class EventIndex extends React.Component {
     if (Object.values(this.props.allEvents).length === 0 ){
       return null
     }
+    let orderedEvents = this.orderEvents(this.props.allEvents)
     return (
       <ul id="event-list">
-        {this.props.allEvents?.map(event => {
+        {orderedEvents?.map(event => {
           return event.owner !== this.props.user
             ? <EventIndexItem key={event._id} event={event} />
             : null

frontend/src/components/map/functional_map.jsx

@@ -529,8 +529,8 @@ class FunctionalMap extends React.Component {
     // set state of parent component with newly updated pois
     this.props.accept("PointsOfInterest", points)
 
-    // clear errors that are on the page
-    this.props.removeEventErrors();
+    // clear poiError  that are on the page
+    this.props.removePoiErrors();
   }
 
   componentDidMount() {