For this assignment, we already have a React App with a contacts route that displays a table of contacts with a "delete" action on each row. Additionally, we have a contact details page that also includes a delete button. The task at hand is to implement the "duplicate" functionality for both the contacts list and the details page. This feature will allow users to create a copy or duplicate of a contact entry easily. By adding this functionality, we can enhance the user experience and provide them with a convenient way to duplicate contacts.

Hint: You can use the same createContact function in the contactsApi.ts file. But calling it with prefilled values from existing contacts. Think about what values you should pass to createContact function for duplication.

Furthermore, we aim to introduce the "edit" contact feature to our React App. This new functionality will enable users to modify the contact information directly from the application. By incorporating the edit feature, we empower users to update and customize their contact details as needed. For this feature, you will need another route. You can call it contacts/:contactId/edit . This will have a form similar to the create contact form. The difference is that it will be prefilled when you come to this route by clicking a contact's edit button.

To make the API call for edit/update, you have to create another function in the contactsApi.ts file. You can name it updateContactByID which receives a contactId and a contact: Partial<Contact> as arguments. The http call for this will be a PATCH call against the URL http://localhost:3000/contacts/:contactId .

In conclusion, by implementing the "duplicate" functionality for both the contacts list and details page, as well as adding the "edit" contact feature, we enhance the functionality and user interaction of our React App. These features not only improve the user experience but also showcase your skills of adding new features to an existing app.