Caitlyn and Anjula's Chat Log #45
Conversation
| props.onUpdateChatEntry(updatedChatEntry); | ||
| }; | ||
| 8000 |
|
|
| const heart = props.liked ? '❤️' : '🤍'; |
There was a problem hiding this comment.
Nice job using the liked value coming from props to update the component display. There's no need to track this with local state, since any time we update the state (using the supplied callback) the component data will update, which we will receive through updated props.
| const heart = props.liked ? '❤️' : '🤍'; | ||
|
|
||
| return ( | ||
| <div className="chat-entry local"> |
There was a problem hiding this comment.
The optional alignment feature would require us to be able to pick whether to use the local or remote class here. If the App made note of the sender of the first message, and passed that down as a prop, such as localSender, then we could use that value and the value of the current message's sender to determine whether this was a local or remote message.
| timeStamp: props.timeStamp, | ||
| liked: !props.liked, | ||
| }; | ||
| props.onUpdateChatEntry(updatedChatEntry); |
There was a problem hiding this comment.
Nice use of your passed-in callback to allow parent-owned logic to run when the like button is clicked.
| <section className="entry-bubble"> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"> | ||
| <TimeStamp time={props.timeStamp} /> |
There was a problem hiding this comment.
Nice job utilizing the TimeStamp component provided!
|
|
||
| const ChatLog = (props) => { | ||
| const chatEntries = props.entries.map((chatEntry, index) => { | ||
| return ( |
There was a problem hiding this comment.
Nice job utilizing this map feature to iterate over the entries 👍🏾
| liked={chatEntry.liked} | ||
| > | ||
| // every list needs a key identifier (not a prop) | ||
| key={index} |
| ChatLog.propTypes = { | ||
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| }) | ||
| ), | ||
| onUpdateChatEntry: PropTypes.func.isRequired, | ||
| }; |
| id={chatEntry.id} | ||
| sender={chatEntry.sender} | ||
| body={chatEntry.body} | ||
| timeStamp={chatEntry.timeStamp} | ||
| liked={chatEntry.liked} | ||
| > | ||
| // every list needs a key identifier (not a prop) |
There was a problem hiding this comment.
This would be a good place to add some sort of evev/odd split to account for which message should go on which side. You could use an odd prop, something like this:
odd={i % 2}
| const countAllLikes = (chatData) => { | ||
| return chatData.reduce((likeCount, message) => { | ||
| if (message.liked) { | ||
| likeCount += 1; | ||
| } | ||
| return likeCount; | ||
| }, 0); | ||
| }; |
There was a problem hiding this comment.
This is an optimal approach to calculating the number of likes, great job 😁
| // pass this function down to ChatEntry using props | ||
| // updates chatData based on the input | ||
| const updateChatEntry = (updatedChatEntry) => { | ||
| const messages = chatData.map((message) => { |
There was a problem hiding this comment.
Nice use of map to make the copy of our array so that React will see that the state has changed.
| }; | ||
|
|
||
| const countAllLikes = (chatData) => { | ||
| return chatData.reduce((likeCount, message) => { |
No description provided.