feat: Exercise 3: Reuse the add and edit form as much as possible

src/components/add-contact.js

@@ -1,87 +1,20 @@
 import React, { useState } from "react";
-import FormInput from "./form-input";
-
-const AddContactForm = ({ setContacts, setFormActive }) => {
-  const [formValues, setFormValues] = useState({
-    name: "",
-    phone: "",
-    email: "",
-  });
-
-  const resetForm = () => {
-    setFormValues({ name: "", phone: "", email: "" });
-    setFormActive(false);
-  };
-
-  const onSubmit = (e) => {
-    e.preventDefault();
-
-    const { name, email, phone } = formValues;
-    if (name && email && phone) {
-      setContacts((contacts) => {
-        return [
-          {
-            name,
-            phone,
-            email,
-          },
-          ...contacts,
-        ];
-      });
-    }
-
-    resetForm();
-  };
-
-  const onDiscard = () => {
-    resetForm();
-  };
-
-  const onChange = (e) => {
-    const key = e.target.name;
-    const value = e.target.value;
-    setFormValues((previousFormValues) => {
-      return {
-        ...previousFormValues,
-        [key]: value,
-      };
+import ContactForm from "./contact-form";
+
+const AddContactForm = ({ setContacts, ...props }) => {
+  const onSubmit = (submitData) => {
+    setContacts((contacts) => {
+      return [
+        {
+          ...submitData,
+        },
+        ...contacts,
+      ];
     });
   };
 
   return (
-    <React.Fragment>
-      <form onSubmit={onSubmit}>
-        <h3>Add new contact</h3>
-        <FormInput
-          type="text"
-          label="Name"
-          value={formValues.name}
-          onChange={onChange}
-          placeholder="Contact name"
-          required
-        />
-        <FormInput
-          type="text"
-          label="Phone"
-          value={formValues.phone}
-          onChange={onChange}
-          placeholder="Contact phone"
-          required
-        />
-        <FormInput
-          type="email"
-          label="Email"
-          value={formValues.email}
-          onChange={onChange}
-          placeholder="Contact email"
-          required
-        />
-        <button type="submit">Save contact</button>
-        <button type="button" onClick={onDiscard}>
-          Discard
-        </button>
-      </form>
-    </React.Fragment>
+    <ContactForm title={"Add new contact"} onSubmit={onSubmit} {...props} />
   );
 };
 

src/components/contact-form.js

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import FormInput from "./form-input";
+
+const ContactForm = ({
+  name = "",
+  phone = "",
+  email = "",
+  title,
+  setFormActive,
+  ...props
+}) => {
+  const [formValues, setFormValues] = useState({ name, phone, email });
+
+  const resetForm = () => {
+    setFormValues({ name: "", phone: "", email: "" });
+    setFormActive(false);
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const { name, email, phone } = formValues;
+    if (name && email && phone) {
+      props.onSubmit(formValues);
+    }
+
+    resetForm();
+  };
+
+  const onDiscard = () => {
+    resetForm();
+  };
+
+  const onChange = (e) => {
+    const key = e.target.name;
+    const value = e.target.value;
+    setFormValues((previousFormValues) => {
+      return {
+        ...previousFormValues,
+        [key]: value,
+      };
+    });
+  };
+
+  return (
+    <React.Fragment>
+      <form onSubmit={onSubmit}>
+        <h3>{title}</h3>
+        <FormInput
+          type="text"
+          label="Name"
+          value={formValues.name}
+          onChange={onChange}
+          placeholder="Contact name"
+          required
+        />
+        <FormInput
+          type="text"
+          label="Phone"
+          value={formValues.phone}
+          onChange={onChange}
+          placeholder="Contact phone"
+          required
+        />
+        <FormInput
+          type="email"
+          label="Email"
+          value={formValues.email}
+          onChange={onChange}
+          placeholder="Contact email"
+          required
+        />
+        <button type="submit">Save contact</button>
+        <button type="button" onClick={onDiscard}>
+          Discard
+        </button>
+      </form>
+    </React.Fragment>
+  );
+};
+
+export default ContactForm;

src/components/edit-contact.js

@@ -1,92 +1,17 @@
-import React, { useState } from "react";
+import React from "react";
 import cloneDeep from "lodash/cloneDeep";
-import FormInput from "./form-input";
-
-const EditContact = ({
-  name = "",
-  phone = "",
-  email = "",
-  id = 0,
-  setContacts,
-  setFormActive,
-}) => {
-  const [formValues, setFormValues] = useState({ name, phone, email });
-
-  const resetForm = () => {
-    setFormValues({ name: "", phone: "", email: "" });
-    setFormActive(false);
-  };
-
-  const onSubmit = (e) => {
-    e.preventDefault();
-
-    const { name, email, phone } = formValues;
-    if (name && email && phone) {
-      // Save the edited content
-      setContacts((contacts) => {
-        const clonedContacts = cloneDeep(contacts);
-        clonedContacts[id] = {
-          name,
-          email,
-          phone,
-        };
-        return clonedContacts;
-      });
-    }
-
-    resetForm();
-  };
-
-  const onDiscard = () => {
-    resetForm();
-  };
-
-  const onChange = (e) => {
-    const key = e.target.name;
-    const value = e.target.value;
-    setFormValues((previousFormValues) => {
-      return {
-        ...previousFormValues,
-        [key]: value,
-      };
+import ContactForm from "./contact-form";
+
+const EditContact = ({ id = 0, setContacts, ...props }) => {
+  const onSubmit = (submitData) => {
+    setContacts((contacts) => {
+      const clonedContacts = cloneDeep(contacts);
+      clonedContacts[id] = { ...submitData };
+      return clonedContacts;
     });
   };
 
-  return (
-    <React.Fragment>
-      <form onSubmit={onSubmit}>
-        <h3>Edit contact</h3>
-        <FormInput
-          type="text"
-          label="Name"
-          value={formValues.name}
-          onChange={onChange}
-          placeholder="Contact name"
-          required
-        />
-        <FormInput
-          type="text"
-          label="Phone"
-          value={formValues.phone}
-          onChange={onChange}
-          placeholder="Contact phone"
-          required
-        />
-        <FormInput
-          type="email"
-          label="Email"
-          value={formValues.email}
-          onChange={onChange}
-          placeholder="Contact email"
-          required
-        />
-        <button type="submit">Save contact</button>
-        <button type="button" onClick={onDiscard}>
-          Discard
-        </button>
-      </form>
-    </React.Fragment>
-  );
+  return <ContactForm title={"Edit contact"} onSubmit={onSubmit} {...props} />;
 };
 
 export default EditContact;