UI Forms: Create>POST/events

[coultergeist]

Connect forms to corresponding API endpoints: Create>POST/events

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:

[bradleyshao]

Estimate:10hrs Currently, I reformatted the layout, trying to match the wireframe as much as possible, but the 'Slider' for cost and age range is still not working. Will do more research on that.

[coultergeist]

Yitong, remember that you can abandon that age slider. It was just an idea for how to execute that but if it's hindering the task then feel free to choose an alternative method that enables the function.

[bradleyshao]

Estimate :10 hrs Actual : 14 hrs Did lots of research about how to generate data to JSON format. Helpful Link : https://alligator.io/js/json-parse-stringify/ Also did lots of research about how to POST JSON data to the server. Helpful Link: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch https://www.robinwieruch.de/react-fetching-data/ And for the test purpose, I did lots of research about how to test POST on localhost. Helpful Link:https://scotch.io/tutorials/json-server-as-a-fake-rest-api-in-frontend-development

[bradleyshao]

After install the json server, run the server on localhost:3000, the default json file have the empty values

[Enshaedn]

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

Please see the data model wiki and/or the model event code itself, and let us know if you have any questions.

[bradleyshao]

Actual: 14 hrs Pull Request-----https://github.com/ActoKids/web-ui/pull/20 No conflicts with dev branch, merged

[bradleyshao]

run --- npm install -g json-server . --- to install the JSON server on local. After that you can will find there is a folder called "json-server" has been created in the project folder. Then create a json file called "event.json" , with default value. After that call ---- ' json-server --watch event.json ' --- to run the server on localhost:3000 You can check the data at localhost:3000/values

[bradleyshao]

Then run the project on localhost:3001 , by running --- npm start You will see the dashboard page once it runs. Click create event button Enter the information of event, click submit

[bradleyshao]

Then go back to the localhost:3000/values, refresh it, you will see the data has been updated

[bradleyshao]

Estimate:10 hrs Actual: 15 hrs Pull Request-----ActoKids/web-ui#20 No conflicts with dev branch, merged Teammate Phu and Hau reviewed and tested my pull request. You can check the feedback at the pull request link above. The main purpose of testing is make sure the fetch method can successfully upload user's input data to JSON server at local. The Wiki page below have the steps about how to setup and test at localhost. In sprint 4, I will connect my project with API team's endpoint instead of local json server, and reformat the data as well. Wiki-----https://github.com/ActoKids/web-ui/wiki/Post-Event I have tested Phu's pull request and find out two bugs that need to be fixed.

[coultergeist]

Yitong, I tested this and it looks good! One thing, our fields need to match the API team's format of the JSON objects. I spoke with Alex and he said this is the latest version. We need to make sure our forms match this. Here's a link to the most current JSON objects

[bradleyshao]

@coultergeist Danielle, I know we need to match with API team's JSON format, and I will do it in my sprint 4 task. But in my sprint 3 I just want to make sure that my fetch is working good. In sprint 4, I will connect my project with API team's endpoint instead of local json server, and reformat the data as well. Thanks for remind me.