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 ; + return ( + <> + {error ?
{error}
: null} + + + ); }; export default EditContact;