diff --git a/src/api.js b/src/api.js
index ff850f5..5a89829 100644
--- a/src/api.js
+++ b/src/api.js
@@ -25,12 +25,20 @@ export const postContacts = async (payload) => {
};
export const putContacts = async ({ id, ...payload }) => {
- const response = await fetch(`${BASE_URL}/contacts/${id}`, {
- method: "PUT",
- ...requestPayload(payload),
- });
- const data = await response.json();
- return data;
+ try {
+ const response = await fetch(`${BASE_URL}/contacts/${id}`, {
+ method: "PUT",
+ ...requestPayload(payload),
+ });
+ if (response.ok) {
+ const data = await response.json();
+ return { data };
+ } else {
+ throw Error(response.statusText);
+ }
+ } catch (error) {
+ return { error };
+ }
};
export const deleteContacts = async (id) => {
diff --git a/src/components/edit-contact.js b/src/components/edit-contact.js
index bcc2236..82ef6ca 100644
--- a/src/components/edit-contact.js
+++ b/src/components/edit-contact.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import ContactForm from "./contact-form";
import { useGlobalStore } from "./global-state";
@@ -8,17 +8,27 @@ const EditContact = (props) => {
const id = props.match.params.id;
const history = useHistory();
const { editContact } = useGlobalStore();
+ const [error, setError] = useState("");
const onSubmit = (submitData) => {
- const payload = { id, ...submitData };
+ const payload = { ...submitData };
(async () => {
- const data = await putContacts(payload);
- editContact(data);
- history.push("/");
+ const { data, error } = await putContacts(payload);
+ if (error) {
+ setError(error.message);
+ } else {
+ editContact(data);
+ history.push("/");
+ }
})();
};
- return