Shelby Faulconer, Sea Turtles, C17 #99
Conversation
| const countLikes = () => { | ||
| let counter = 0; | ||
| for (let entry of entries) { | ||
| if (entry.liked) { | ||
| counter += 1; | ||
| }; | ||
| }; | ||
| return counter; | ||
| }; |
There was a problem hiding this comment.
Great use of the existing data to calculate the total likes! Another option would be to use the array function reduce:
return messageData.reduce((totalLikes, currentMessage) => {
// If currentMessage.liked is true add 1 to totalLikes, else add 0
return (totalLikes += currentMessage.liked ? 1 : 0);
}, 0); // The 0 here sets the initial value of totalLikes to 0| return { | ||
| id: entry.id, | ||
| sender: entry.sender, | ||
| body: entry.body, | ||
| timeStamp: entry.timeStamp, | ||
| liked: !entry.liked | ||
| }; |
There was a problem hiding this comment.
Nice managing of data & making sure we make a new object when we need to alter a message in our list!
A best practice for copying over an object's values is to use the spread operator, then overwrite any key/value pairs we want to change:
// Use the spread operator to copy all of entry's values to a new object,
// then overwrite the attribute liked with the opposite of entry's liked value
return {
...entry,
liked: !entry.liked
}| const heartIcon = (props.liked) ? '❤️' : '🤍'; | ||
| const messageAlign = (props.sender === 'Vladimir') ? 'remote' : 'local'; |
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"><TimeStamp time={props.timeStamp}/></p> | ||
| <button className="like" onClick={() => {props.setLiked(props.id)}}>{heartIcon}</button> |
There was a problem hiding this comment.
I like this pattern of sending just the id to props.setLiked since it keeps all the state management and message object creation confined to App.
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, |
There was a problem hiding this comment.
Nice use of Prop-Types and flagging those necessary for render with isRequired!. To help our future selves (or other folks we're working with) easily see what is allowed to be passed when creating an instance of a component, I suggest including all props that can be passed in, including functions such as setLiked.
| ); | ||
| }; | ||
|
|
||
| ChatLog.propTypes = { | ||
| entries: PropTypes.arrayOf(PropTypes.object).isRequired, |
There was a problem hiding this comment.
We can be even more specific with our PropTypes for validation. If we know that we need an array, and that array's objects need to hold certain data, we can check the objects as well! Inside arrayOf we can pass PropTypes.shape() with information about the object's shape. A modified example from stack overflow is below:
list: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
customTitle: PropTypes.string.isRequired,
btnStyle:PropTypes.object,
})
).isRequired,Source: https://stackoverflow.com/questions/59038307/reactjs-proptypes-validation-for-array-of-objects
Similar to some of the feedback for ChatEntry's PropTypes, it would be good to list the function ChatLog accepts here as well.
No description provided.