This project was bootstrapped with Create React App.
To start app type
yarn && yarn start
-
When navigating to '/' (homepage), send
GETrequest to API url and display all users received from the response in a table. Columns can be user id, name, email and city (you can add more). -
When clicking on user name in the table navigate to
/users/{id}where id will be the id of clicked user. Example:user: { id: 1, name: 'John', ... }, clicking on 'John' in table should navigate to/users/1 -
When the page at
/users/{id}loads, retrieve the id from url and send GET request tohttps://jsonplaceholder.typicode.com/users/{id}to retrieve user data and display it on the page (you can display the same values from the table). -
The page where all users are displayed ('/') should have a button 'Create' that will navigate to
/users/create. This page should have a form with name and email fields and a submit button. When clicking on submit, validate all data (both fields required and email matching an email pattern) and send POST request tohttps://jsonplaceholder.typicode.com/userswith data{ name: ..., email: ... }. Note that request should be submitted via Javascript and not by form itself. After you receive a response, navigate back to homepage ('/'). -
Page at
/users/{id}should have 'Edit' and 'Delete' buttons as well. -
Clicking on 'Delete' should send
DELETErequest tohttps://jsonplaceholder.typicode.com/users/{id}where id will be the id of displayed user. After sending DELETE request, navigate back to homepage. -
Clicking on 'Edit' will navigate to
/users/{id}/edit. Edit page should contain a form with name and email, same like the form for creating a user. Similarly like at/users/{id}, retrieve user data by sendingGETrequest to API and update the form fields with returned user data. When clicking on submit, take values from the form and send aPUT/PATCHrequest to https://jsonplaceholder.typicode.com/users/{id} with data{ name: ... email: ... }to update the user. Form should be validated before submitting (both fields required and email matching an email pattern).