feat: error handling in API

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) => {

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 <ContactForm id={id} title={"Edit contact"} onSubmit={onSubmit} />;
+  return (
+    <>
+      {error ? <div>{error}</div> : null}
+      <ContactForm id={id} title={"Edit contact"} onSubmit={onSubmit} />
+    </>
+  );
 };
 
 export default EditContact;