Add Event calling the API

[coultergeist]

Add Events using the API.

Once assigned, annotate your estimated time. Then, keep regular updates on your issue. Comment your approach, tutorials, articles, updates, links, photos, etc. Comment often. When closing your issue include the following in your final comment.

Time estimated: Time spent: Pull Request link: Wiki link: Deployed Code link: Testers: What I tested:

[bradleyshao]

Estimate : 10 hrs Currently: 5 hrs Currently I reformatted the form a little bit, and UserForm.js, ReviewPage.js, Success.js to the project. Also changed the state of the form in order to match with the JSON format of Api team.

[Enshaedn]

The API endpoint for the POST method is: https://api-alexc.2edusite.com/v1/events

Please see the data model wiki and/or the model event code itself for additional documentation.

[bradleyshao]

Actual: 15 hrs Alex and I started to connect the project with API since last Friday. And we got stuck on 400 and 415 error for a long time. I tried lots of different stuff, such as set mode to no-cors and use the axios instead of fetch, but still got 400 error. So we asked for Jon's help, and find out the problem was the data format mismatch. The default value of cost and age that i set was the type of number, but once we change its value in the form, the final value will be quoted as the type of string. and we also find the time format was mismatch as well, the default format from materialize picker is 2019-03-06T20:45. But the datetime format in AWS contain the seconds and miliseconds, which is in 2019-03-06T20:45:00.000Z format. We change the data format in the code and finally get it works.

[bradleyshao]

Major problems that we met: Datetime format mismatch -- AWS: 2019-03-06T20:45:00.000Z Materialize date picker: 2019-03-06T20:45 Data type mismatch -- Data type API required: cost( number), min_age & max_age(number) and disability type(array) Default value i set: cost( number), min_age & max_age(number) and disability type(array) Output from the form: cost(String), min_age & max_age(String) and disability type(String) Default value ---- API in AWS doesn't allow null value. picture_url default value --- because API doesn't accept null value, we have to set a default value for the picture_url other than "". But in react, the default file type value can't be set as "none"

[bradleyshao]

Solution: data.cost = parseInt(data.cost) --- to remove the quotes of cost. data.min_age = parseInt(data.min_age)--- to remove the quotes from the min_age data.max_age = parseInt(data.max_age)--- to remove the quotes from the max_age data.disability_types = "[" + data.disability_types + "]" --- add "[""]" to disability_type, to make it as array data.disability_types = data.disability_types.slice(0, 1) + data.disability_types.slice(2); --- to remove the first " ," from the string data.disability_types = JSON.parse(data.disability_types); --- to remove the quotes outside of the array

[bradleyshao]

[bradleyshao]

Deployed Code link: https://2edusite.com/ For Testing Create Event page. You HAVE TO enter ALL the information in the form. Because AWS doesn't allow null value, I will work on this problem with Alex in next sprint. If event create successfully, you will see the event_id in the console of the browser. Wiki page----https://github.com/ActoKids/web-ui/wiki/Post-Event-Connect-API Pull request ---https://github.com/ActoKids/web-ui/pull/29 Pull request Reviewed & Tested ---https://github.com/ActoKids/web-ui/pull/31#pullrequestreview-211534545 ---https://github.com/ActoKids/web-ui/pull/28#pullrequestreview-210990463