Melissa Pena - Cheetahs #118
Conversation
| import chatMessages from './data/messages.json'; | ||
|
|
||
| const App = () => { | ||
| const chatCopy =[] | ||
| for (const message of chatMessages){ | ||
| chatCopy.push(message) |
There was a problem hiding this comment.
Glad to see you're trying to ensure you don't modify the original data! Imports are actually read only though. So it's safe to use the message data directly without making a copy first.
Side note - the push() method doesn't actually create a copy of the data. It passes a reference to the original object. This means if you make changes to the "copy", the original will also be updated. You don't see this causing any issues in your code since imports are read only.
In the future, if you need to make a copy of an object, I'd recommend using the spread operator. Here's a great guide on shallow copies vs deep copies in JS: https://code.tutsplus.com/articles/the-best-way-to-deep-copy-an-object-in-javascript--cms-39655
| const [chatData, setChatData]= useState(chatCopy) | ||
|
|
||
| const updateLikes = (id, updatedLike) => { | ||
| console.log('updatelikes is being called'); |
There was a problem hiding this comment.
Be sure to remove unused code, print tests, and any comments that shouldn't be published before finalizing a project. It's good practice to keep a clean main branch that's production ready. This helps with the readability and maintainability of a project. 🧹😌
| return ( | ||
| <div id="App"> | ||
| <header> | ||
| <h1>Application title</h1> | ||
| <h1>Instant Messenger</h1> | ||
| <h2>{countLikes()} ❤️s</h2> |
There was a problem hiding this comment.
Nice job calculating likes! Right now, your app will re-calculate your likes count every time your App component re-renders. This totally works, but it could slow down performance as the number of messages begins to grow larger since countLikes() has an O(n) time complexity. Consider how you could refactor your code to improve performance.
| <button className="like">🤍</button> | ||
| <p>{body}</p> | ||
| <p className="entry-time"><TimeStamp time={timeStamp}/></p> | ||
| <button className="like" onClick={() => updateLikes(id, !liked)}> |
There was a problem hiding this comment.
Nice job adding the callback function in an anonymous function here!
| sender:PropTypes.string.isRequired, | ||
| body:PropTypes.string.isRequired, | ||
| timeStamp:PropTypes.string.isRequired, | ||
| updateLikes:PropTypes.func |
There was a problem hiding this comment.
Small note, but I would recommend setting id and updateLikes as required in your prop types since they are needed for the like button to work.
| import ChatEntry from './ChatEntry'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatLog = ({entries,updateLikes}) => { |
There was a problem hiding this comment.
Make sure you're cleaning up the code style before finalizing a project! This component seems to be using 4 space tabs instead of the 2 space convention as well as some other small style inconsistencies. Good code style is important for readability and maintainability. 🧹 😌
No description provided.