Muniba K-Zoisite #97
Muniba K-Zoisite #97
Conversation
src/App.js
Outdated
| const addHearts = () => { | ||
| let hearts = 0; | ||
|
|
||
| for (let i = 0; i < totalLikes; i++) { | ||
| hearts += 1 | ||
| } | ||
|
|
||
| return hearts + ' ❤️s'; | ||
| }; |
There was a problem hiding this comment.
Since totalLikes is an integer, we could remove this function and use totalLikes + ' ❤️s' anywhere we're calling addHearts.
src/components/ChatEntry.js
Outdated
|
|
||
| const ChatEntry = (props) => { | ||
| const [likes, setLikes] = useState(props.likes) |
There was a problem hiding this comment.
In the current set-up, our data is spread across the project - we don't have a single source of truth that is driving all of the UI. Because of this, when we like a message in ChatEntry, we need to manually keep the like here in ChatEntry in sync with the overall like count in App.js since they both need to display information about the likes.
The best practice is to lift up the state to the App.js level. In that case we would have a piece of useState that represents our chat data in App.js. We could write a function in App.js that we pass down to the ChatEntry component that takes in a message id and uses it to find and update the liked value of the message when a user clicks a heart. If the message state lives in App, then we also have the ability to loop over the messages and count up how many messages have a liked value of true to derive our heart count directly from the data, removing some duplication of data.
src/components/ChatLog.js
Outdated
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| // likes: PropTypes.bool.isRequired, |
There was a problem hiding this comment.
Reminder that we want to clean up commented code before opening PRs so it doesn't make it into the final codebase.
|
|
||
| ChatLog.propTypes = { | ||
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ |
There was a problem hiding this comment.
Nice use of PropTypes.shape for more detail on what data is expected for this component!
No description provided.