From f38810b74d725f93dbcd39d2d6b0ec0fee12a2dc Mon Sep 17 00:00:00 2001
From: Param Harrison <paramanantham@live.com>
Date: Fri, 17 Apr 2020 22:22:10 +0300
Subject: [PATCH] feat: Bug fix: 1: Try to add same name and resolve the error
 in the console

---
 src/App.js                     | 3 +++
 src/components/add-contact.js  | 2 ++
 src/components/contact-list.js | 7 +------
 src/components/contact.js      | 4 +++-
 src/components/edit-contact.js | 6 ++++--
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 907bf6a..e287a3d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,17 @@
 import React, { useState } from "react";
+import uniqueId from "lodash/uniqueId";
 import ContactList from "./components/contact-list";
 import AddContact from "./components/add-contact";
 
 const INITIAL_CONTACTS = [
   {
+    id: uniqueId(),
     name: "Vennila",
     phone: "+372 5993789",
     email: "venil.par@gmail.com",
   },
   {
+    id: uniqueId(),
     name: "Afrin",
     phone: "+372 5663421",
     email: "afrin.ven@gmail.com",
diff --git a/src/components/add-contact.js b/src/components/add-contact.js
index 9174962..5641b9e 100644
--- a/src/components/add-contact.js
+++ b/src/components/add-contact.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import uniqueId from "lodash/uniqueId";
 import ContactForm from "./contact-form";
 
 const AddContactForm = ({ setContacts, ...props }) => {
@@ -6,6 +7,7 @@ const AddContactForm = ({ setContacts, ...props }) => {
     setContacts((contacts) => {
       return [
         {
+          id: uniqueId(),
           ...submitData,
         },
         ...contacts,
diff --git a/src/components/contact-list.js b/src/components/contact-list.js
index cf871f3..ff67500 100644
--- a/src/components/contact-list.js
+++ b/src/components/contact-list.js
@@ -6,12 +6,7 @@ const ContactList = ({ contacts, setContacts }) => {
     <ol>
       {contacts.map((contact, index) => {
         return (
-          <Contact
-            key={contact.name}
-            {...contact}
-            id={index}
-            setContacts={setContacts}
-          />
+          <Contact key={contact.id} {...contact} setContacts={setContacts} />
         );
       })}
     </ol>
diff --git a/src/components/contact.js b/src/components/contact.js
index e48b804..84d9285 100644
--- a/src/components/contact.js
+++ b/src/components/contact.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import cloneDeep from "lodash/cloneDeep";
+import findIndex from "lodash/findIndex";
 import EditContact from "./edit-contact";
 
 const Contact = ({ setContacts, ...props }) => {
@@ -13,7 +14,8 @@ const Contact = ({ setContacts, ...props }) => {
     if (confirm) {
       setContacts((contacts) => {
         const clonedContacts = cloneDeep(contacts);
-        clonedContacts.splice(id, 1);
+        const index = findIndex(clonedContacts, { id });
+        clonedContacts.splice(index, 1);
         return clonedContacts;
       });
     }
diff --git a/src/components/edit-contact.js b/src/components/edit-contact.js
index 38b0012..41c89af 100644
--- a/src/components/edit-contact.js
+++ b/src/components/edit-contact.js
@@ -1,12 +1,14 @@
 import React from "react";
 import cloneDeep from "lodash/cloneDeep";
+import findIndex from "lodash/findIndex";
 import ContactForm from "./contact-form";
 
-const EditContact = ({ id = 0, setContacts, ...props }) => {
+const EditContact = ({ id, setContacts, ...props }) => {
   const onSubmit = (submitData) => {
     setContacts((contacts) => {
       const clonedContacts = cloneDeep(contacts);
-      clonedContacts[id] = { ...submitData };
+      const index = findIndex(clonedContacts, { id });
+      clonedContacts[index] = { ...clonedContacts[index], ...submitData };
       return clonedContacts;
     });
   };