React Eval#19
Conversation
…o contacts page on delete
| @@ -0,0 +1,38 @@ | |||
| /** | |||
| * The ContactAPI is a JavaScript object that contains an array to hold the contact objects, | |||
|
|
||
| export const ContactAPI = { | ||
| contacts: [], | ||
| all: function () { |
There was a problem hiding this comment.
don't be afraid of being even more clear
| all: function () { | |
| allContacts: function () { |
There was a problem hiding this comment.
Why not es6?
use arrow functions!
| this.contacts.push({ id, name, email, phone_number, image_url }); | ||
| }, | ||
| remove: function (contact) { | ||
| const index = this.contacts.findIndex((c) => c.id === contact.id); |
There was a problem hiding this comment.
be more clear, this not just the index its:
| const index = this.contacts.findIndex((c) => c.id === contact.id); | |
| const contactIdIndex = this.contacts.findIndex((c) => c.id === contact.id); |
| ]; | ||
| // removes contact from array | ||
| this.contacts.splice(index, 1); | ||
| return trimmedContacts; |
There was a problem hiding this comment.
not sure why you need to return here trimmed contacts vs other functions you return this.contacts.
| this.contacts[index].name = name; | ||
| this.contacts[index].email = email; | ||
| this.contacts[index].phone_number = phone_number; | ||
| this.contacts[index].image_url = image_url; |
There was a problem hiding this comment.
not performant, you can optimize this with object deconstruction. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
| * The edit page will display a ContactForm component that is already populated with the information of contact that matches the id of the route | ||
| **/ | ||
|
|
||
| export default function EditContact() { |
There was a problem hiding this comment.
dont name the files page.js, use the proper name and no need to nest under an id folder.
editContact.js
| height={50} | ||
| unoptimized | ||
| onError={(e) => | ||
| (e.target.src = |
| const [email, setEmail] = useState(initialEmail); | ||
| const [phone_number, setPhone_number] = useState(initialPhone); | ||
| const [image_url, setImage_url] = useState(initialImgUrl); | ||
| const generateId = () => Math.round(Math.random() * 100000000); |
There was a problem hiding this comment.
this should be in a utils separate file and not here because will recreate every time you access the page
|
|
||
| const errors = {}; | ||
|
|
||
| if (name === null || !name.trim()) { |
2 participants
No description provided.