Question

Objective: Building a React calendar Add Event page.

There will be four input fields in the form for the Add Event page:

1) Title of Event

2) Img (to imbed the URL of an image of the event)

3) Date and Time of Event

4) Summary of Event

The calendar will be connected to a MongoDB to store the events. Any and all assistance in building the Add Event page is greatly appreciated!

The calendar home page has already been constructed, this request is for the Add Event page only.

Please list all files referenced for the build (.css, etc.)

Answer 1

AddEvent.js

import React, { Component } from 'react';
import '../css/Edit.css';
import '../css/ButtonsAndMore.css';
import { Row, Col, Hidden, ClearFix } from 'react-grid-system';
import "date-format-lite";
import MiniCalendarPicker from "../helper/MiniCalendarPicker";
import Holidays from 'date-holidays';
import EditEvent from './EditEvent.js';
import EventObject from '../event/EventObject.js';

class AddEvent extends EditEvent {
constructor(props){
super(props);

}

componentDidMount() {

let sd, ed;
if(this.props.viewDate) {
sd = ed = this.props.viewDate.date("YYYY-MM-DD");
} else {
sd = ed = new Date().date("YYYY-MM-DD");
}

this.setState({
id: 0,
name: "",
startDate: sd,
startTime: "09:00",
endDate: ed,
endTime: "",
eventType: 1,
priority: 0,
error: null
});
}

editCurrentEvent = (e, history) => {
e.preventDefault();
if(this.state.startDate.date('U') > this.state.endDate.date('U') && (this.state.endDate)){
this.setState({error: 'Uh oh! Before submitting, please enter a start date that is prior to your end date!'});
}else{
let eventObj = new EventObject(this.state);
               eventObj.setId(this.state.id);
               //-- convert dates back to millisecs
               eventObj.convertDatesToMillisecs();
               //-- pass history back to parent to call page change after backend updates
this.props.addEvent(eventObj, history);
}
}

}

export default AddEvent;

AddHoliday.js

import React, { Component } from 'react';
import {Route} from 'react-router';
import {Link, Redirect} from 'react-router-dom';
import '../css/Edit.css';
import '../css/ButtonsAndMore.css';
import { Row, Col, Hidden, ClearFix } from 'react-grid-system';
import "date-format-lite";
import MiniCalendarPicker from "../helper/MiniCalendarPicker";
import Holidays from 'date-holidays';
import CountryCodes from '../helper/CountryCodes.js';

const hd = new Holidays();

//TODO: functional component
class AddHoliday extends Component {
   constructor(props) {
       super(props);
       this.state = {
           countryCode: "",
           currentYear: 0,
           currentYearHolidays: []
       }
   }

   handleChange = (event) => {
       this.setState({countryCode: event.target.value}, () => {
       let holidays = new Holidays(this.state.countryCode);
       let allHolidays = holidays.getHolidays(this.state.currentYear);
       this.setState({currentYearHolidays: allHolidays});
       });
   }

   submitHolidays = (e, history) => {
       e.preventDefault();
       this.props.addHolidays(this.state.currentYearHolidays);
       //TODO: reverse lookup
       history.push("/");
   }

   listHolidays = () => {
       let out=""
       this.state.currentYearHolidays.map(function(h) {
           out+= ""+h.name+" "+h.date+"\n"
       })
       return out;
   }

render(){
let countries = {};
countries = hd.getCountries();
var defaultOption = <option selected>Select a Country</option>;
var firstOption = <option value="US">United States of America</option>;
var countryOptions = [defaultOption, firstOption];
for(var country in countries){
countryOptions.push(
<option value={country}>{countries[country]}</option>
);
}

return (
<div className="country-codes-form nice-form-div">
<form name="Country Code" className="nice-form" >
<select value={this.state.countryCode} onChange={this.handleChange}>
{countryOptions}
</select>
                       <div className="margin-top-10">
                               <textarea rows="10" cols="60" id="holiday-text-area" value={this.listHolidays()} readOnly></textarea>

                       </div>
                       <div className="margin-top-50">
                               <Route render={({history}) => (
                                   <Link to="/" onClick={(e)=>this.submitHolidays(e,history)}><input type="submit" value="Add Holidays" /></Link>
                               )} />
                           </div>
</form>
                  <Link className="btn outline margin-10" to="/">
                       cancel
                   </Link>
</div>
);
}
}

export default AddHoliday;

DeleteEvent.js

import React, { Component } from 'react';
import {Route} from 'react-router';
import {Link, Redirect} from 'react-router-dom';
import '../css/Edit.css';
import '../css/ButtonsAndMore.css';
import { Row, Col, Hidden, ClearFix } from 'react-grid-system';
import "date-format-lite";
import MiniCalendarPicker from "../helper/MiniCalendarPicker";
import Holidays from 'date-holidays';

const DeleteEvent = (props)=> {

   const onClickDelete = (e, history) => {
       e.preventDefault();
       props.onClickDelete(props.eventObject, history);
   }

   if (!props.eventObject) {
       return <Route render={() => (<Redirect to="/" />) } />;
   }

let startDate = props.eventObject.startDate.date('YYYY-MM-DD');
let endDate = props.eventObject.endDate.date('YYYY-MM-DD');

return(
       <Route render={({history}) => (
<div className="nice-form-div">
<h2>Delete Event?</h2>
<form name="Edit Event" className="nice-form" onSubmit={(e) => onClickDelete(e, history)} >
<input type="text" name="eventName" value={props.eventObject.name} readOnly/>
<h4>Start Date</h4>
<input className="margin-right-30" type="date" name="startDate" value={startDate} />
<h5>Start Time</h5>
<input type="time" name="startTime" value={props.eventObject.startTime} />
<h4>End Date</h4>
<input className="margin-right-30" type="date" name="endDate" value={endDate} />
<h5>End Time</h5>
<input type="time" name="endTime" value={props.eventObject.endTime} />
<div>
<select value={props.eventObject.eventTypeId} name="eventTypeId" readOnly>
<option value="1">Meeting</option>
<option value="2">Work</option>
<option value="3">Appointment</option>
<option value="4">Birthday</option>
<option value="0">Holiday</option>
</select>
<select value={props.eventObject.priority} name="eventPriority" readOnly>
<option value="0">Lowest Priority</option>
<option value="1">Low Priority</option>
<option value="2">Medium Priority</option>
<option value="3">High Priority</option>
<option value="4">Highest Priority</option>
</select>
</div>
<div className="margin-top-50">

<input type="hidden" value={props.eventObject.id} />
<input type="submit" value="Delete Event" />
</div>
</form>
<Link className="btn outline margin-10" to="/">
               cancel
           </Link>
</div>
   )} />
);
}

export default DeleteEvent;

EditEvent.js

import React, { Component } from 'react';
import {Route} from 'react-router';
import {Link, Redirect} from 'react-router-dom';
import '../css/Edit.css';
import '../css/ButtonsAndMore.css';
import { Row, Col, Hidden, ClearFix } from 'react-grid-system';
import "date-format-lite";
import MiniCalendarPicker from "../helper/MiniCalendarPicker";
import Holidays from 'date-holidays';
import EventObject from '../event/EventObject.js';

//
//
//--we need to treat the dates as YYYY-MM-DD for the input to work properly
class EditEvent extends Component {
constructor(props){
super(props);
this.state = {
name: "",
startDate: "",
startTime: "",
endDate: "",
endTime: "",
eventType: 0,
priority: 0,
           id: ""
}

}

componentDidMount() {
// let cc = JSON.parse(localStorage.getItem("currentEvent"));
       let cc = this.props.eventToEdit;

       if (cc) {
   this.setState({
   id: cc.id,
   name: cc.name,
   startDate: cc.startDate.date('YYYY-MM-DD') ,
   startTime: cc.startTime,
   endDate: cc.endDate.date('YYYY-MM-DD') ,
   endTime: cc.endTime,
   eventType: cc.eventType,
   priority: cc.priority,
   error: null
   });
       }
}

editCurrentEvent = (e, history) => {
e.preventDefault();

if(this.state.startDate.date('U') > this.state.endDate.date('U') && (this.state.endDate)){
this.setState({error: 'Uh oh! Before submitting, please enter a start date that is prior to your end date!'});
}else{
let eventObj = new EventObject(this.state);
               eventObj.setId(this.state.id);
               //-- convert dates back to millisecs
               eventObj.convertDatesToMillisecs();
               //-- pass history back to parent to call page change after backend updates
this.props.editEvent(eventObj, history);
}
}

handleChange = (e) => {
this.setState({[e.target.name]: e.target.value, error: null});
}

render() {
let errorMessage;
if(this.state.error){
errorMessage = (
<div className="error-message">
<h3>{this.state.error}</h3>
</div>
);
}else{
errorMessage;
}

if(!this.props.eventToEdit) {
return (<Redirect to="/" />);
}

return (

           <div className="nice-form-div">
           <form name="Edit Event" className="nice-form" >
           <h3>Event Name</h3>
           <input type="text" name="name" onChange={this.handleChange} value={this.state.name} />
                   <h5>Start Time</h5>
                   <input type="time" name="startTime" onChange={this.handleChange} value={this.state.startTime} />
           <h4>Start Date</h4>
           <input type="date" name="startDate" onChange={this.handleChange} value={this.state.startDate} />
           <div className="spacer-30" />
           <MiniCalendarPicker name="startDate" onClick={this.handleChange} value={this.state.startDate} />

                   <h5>End Time</h5>
                   <input type="time" name="endTime" onChange={this.handleChange} value={this.state.endTime} />
           <h4>End Date</h4>
           <input type="date" name="endDate" onChange={this.handleChange} value={this.state.endDate} />
           <div className="spacer-30" />
           <MiniCalendarPicker name="endDate" onClick={this.handleChange} value={this.state.endDate} />
                   <hr />
                   <div>
           <select value={this.state.eventType} onChange={this.handleChange} name="eventType">
           <option value="1">Meeting</option>
           <option value="2">Work</option>
           <option value="3">Appointment</option>
           <option value="4">Celebration</option>
           <option value="0">Holiday</option>
           </select>
           <select value={this.state.priority} onChange={this.handleChange} name="priority">
           <option value="0">Lowest Priority</option>
           <option value="1">Low Priority</option>
           <option value="2">Medium Priority</option>
           <option value="3">High Priority</option>
           <option value="4">Highest Priority</option>
           </select>
           </div>
           <div className="margin-top-50">
                       <input type="hidden" value={this.state.id} />
                       <Route render={({history}) => (
                   <button className="btn blue round large" onClick={(event)=> (this.editCurrentEvent(event,history))}>Submit</button>
                       )} />
           </div>
           </form>
           <Link className="btn outline margin-top-10" to="/">
           Cancel
           </Link>
           {errorMessage}
           </div>

);
}
}

export default EditEvent;

EventObject.js

import "date-format-lite";

class EventObject {

   constructor(obj) {

       //-- TODO: colors can be overwritten by user settings
       EventObject.eventColor = {
           "0": "#FFDC00",
           "1": "#3D9970",
           "2": "#7FDBFF",
           "3": "#FF851B",
           "4": "#B10DC9",
       }

       if (obj) {
           this.name = obj.name || obj.eventName;
           this.priority = obj.priority;
           this.startDate = obj.startDate.date('YYYY-MM-DD','+00');
           this.startTime = obj.startTime;
           this.endDate = obj.endDate.date('YYYY-MM-DD','+00');
           this.endTime = obj.endTime;
           this.eventType = obj.eventType || obj.eventTypeId || 0;
           this.id = obj.id || obj._id;
           this.spanning = obj.spanning || false;
           this.spanningStart = obj.spanningStart;
       }
   }

   set(obj) {
       this.name = obj.name || obj.eventName;
       this.priority = obj.priority;
       this.startDate = obj.startDate.date('YYYY-MM-DD','+00');
       this.startTime = obj.startTime;
       this.endDate = obj.endDate.date('YYYY-MM-DD','+00');
       this.endTime = obj.endTime;
       this.eventType = obj.eventType || obj.eventTypeId;
       this.id = obj.id || obj._id;
       this.spanning = obj.spanning;
       this.spanningStart = obj.spanningStart;
   }

   copyTo(dst) {
       dst.name = this.name;
       dst.startDate = this.startDate;
       dst.startTime = this.startTime;
       dst.endDate = this.endDate;
       dst.endTime = this.endTime;
       dst.priority = this.priority;
       dst.eventTypeId = dst.eventType = this.eventType;
       dst.spanning = this.spanning;
       dst.spanningStart = this.spanningStart;
   }

   //-- can use these to be explicit, if we find too many problems with Mongo's _id vs id
   setId(id) {
       this.id=id;
   }

   getId(id) {
       return this.id;
   }

   getEventColor() {
       return EventObject.eventColor[this.eventType];
   }

   isHoliday() {
       return (this.eventType===EventObject.EVENT_HOLIDAY || this.eventTypeId===EventObject.EVENT_HOLIDAY);
   }

   convertDatesToMillisecs() {
       if (Number.isInteger(this.startDate)===false) {
           this.startDate = Number(this.startDate.concat("T00:00:00Z").date('U',"+00"));
       }
       if (Number.isInteger(this.endDate)===false) {
           this.endDate = Number(this.endDate.concat("T00:00:00Z").date('U',"+00"));
       }
   }
}

//-- consts
EventObject.EVENT_HOLIDAY=0;
EventObject.EVENT_MEETING=1;
EventObject.EVENT_WORK=2;
EventObject.EVENT_APPOINTMENT=3;
EventObject.EVENT_CELEBRATION=4;

export default EventObject;

EventObject.test.js

import EventObject from './EventObject';

describe('EventObject test: ', () => {
   var obj;
   it('should create new object', () => {
       obj = new EventObject({
           name: "testname",
           priority: 1,
           startDate: '2020-02-20',
           startTime: '9:30am',
           endDate: '2020-02-20',
           endTime: '1:45pm',
           eventType: 1,
           id: 0,
           spanning: false,
           spanningStart: 0
       })
       expect(obj).toBeDefined();
   })

it('should convert date to millisecs', () => {
obj.convertDatesToMillisecs();
   expect(obj.startDate).toEqual(1582156800000);
   expect(obj.endDate).toEqual(1582156800000);
})
})