azavjo40
commented
5 months ago Add a new user example: fetch('https://fakestoreapi.com/users',{ method:"POST", body:JSON.stringify( { email:'John@gmail.com', username:'johnd', password:'m38rmF$', name:{ firstname:'John', lastname:'Doe' }, address:{ city:'kilcoole', street:'7835 new road', number:3, zipcode:'12926-3874', geolocation:{ lat:'-37.3159', long:'81.1496' } }, phone:'1-570-236-7033' } ) }) .then(res=>res.json()) .then(json=>console.log(json))
Update a users example: fetch('https://fakestoreapi.com/users/7',{ method:"PUT", body:JSON.stringify( { email:'John@gmail.com', username:'johnd', password:'m38rmF$', name:{ firstname:'John', lastname:'Doe' }, address:{ city:'kilcoole', street:'7835 new road', number:3, zipcode:'12926-3874', geolocation:{ lat:'-37.3159', long:'81.1496' } }, phone:'1-570-236-7033' } ) }) .then(res=>res.json()) .then(json=>console.log(json))
The goal of this task is to develop functionality for a modal window that will allow users to add new users and edit existing ones. For the implementation of the modal window interface, components from the Material-UI library should be used, and the React Hook Form library should be used for form management and validation.
Functional Requirements: Modal Window:
Should open when clicking on the "Add User" button or "Edit" next to an existing user. Should contain a form for entering user data: email, username, password, first name, last name, address (city, street, house number, zip code, geolocation), phone. Should have buttons for saving changes or cancellation. Form:
Use React Hook Form for form management and data validation. Implement form validation: checks for mandatory fields, email, and phone number format. API:
Use the provided API for creating (POST) and updating (PUT) a user. It is important to correctly handle responses from the API and display appropriate messages to the user (for example, about successful addition or an error). Technical Details: Use Material-UI for styling the components of the modal window and form. Use React Hook Form for form state management and validation. Acceptance Criteria: The modal window is correctly displayed and contains all necessary form fields. Form data is validated according to requirements. Upon form submission, data is correctly sent to the server using the API. In case of success, an appropriate message is displayed; in case of an error, an error message is shown. The code is clean and well-organized, following best practices for development. Additional Remarks: It's important to thoroughly test all functionality before submitting for review. Where possible, add unit tests for the new functionality.