contact-list project submission#17
Conversation
|
|
||
| export const useContacts = () => useContext(ContactsContext); | ||
|
|
||
| const initialContacts = [{ |
There was a problem hiding this comment.
ideally this will come from a different file like a utils
|
|
||
| const createID = () => Math.round(Math.random() * 100000000); | ||
|
|
||
| const addContact = (data) => { |
There was a problem hiding this comment.
data is too generic, use something more descriptive for param name
| const addContact = (data) => { | |
| const addContact = (contactData) => { |
|
|
||
| const deleteContact = (id) => { | ||
| const newContacts = []; | ||
| contacts.forEach((contact) => contact.id !== parseInt(id) && newContacts.push(contact)); |
There was a problem hiding this comment.
ideally, you will pass id already parsed so its ready to use, when you start using typescript you will understand properly why.
| return setContacts(newContacts); | ||
| }; | ||
|
|
||
| const editContact = (formData, id) => { |
There was a problem hiding this comment.
the function name does not match what the function is doing, if you have a bug by the setContacts function call, it will be hard to track as it goes undetected here. better to separate responsibilities
| return {...formData, id}; | ||
| }; | ||
|
|
||
| const getPrevAndNext = (id) => { |
There was a problem hiding this comment.
getprevandnext what?
| const getPrevAndNext = (id) => { | |
| const getPrevAndNextIds = (id) => { |
| label="Phone Number" | ||
| name="phone_number" | ||
| type="tel" | ||
| attributes={{pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}"}} |
| <th scope="col"> Name </th> | ||
| <th scope="col"> Email </th> | ||
| <th scope="col"> Phone </th> | ||
| <th scope="col"></th> |
There was a problem hiding this comment.
here is an example where missing comments help, why do you have this empty column? I have to go to the data to notice its for the delete btn
| }; | ||
|
|
||
| return ( | ||
| <tr onClick={(e) => (handleClick(e))} style={{"cursor": "pointer"}} id={`tableRow${person.id}`}> |
There was a problem hiding this comment.
better to stick to classes instead of style
|
|
||
| <h1 className="text-center"> Create New Contact </h1> | ||
| <ContactForm | ||
| formData={formData} | ||
| className="col-8 col-md-6 mx-auto" | ||
| handleInput={handleInput} | ||
| handleSubmit={(e) => handleSubmit(e)} /> |
2 participants
No description provided.