Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
Nice work! Your project lets me know that you have a goo understanding of React and useState!
| const senders = Array.from(new Set(initialMessages.map(initialMessage => initialMessage.sender))); | ||
| const chatHeader = `Chat between ${senders.join(' and ')}`; |
There was a problem hiding this comment.
Nice, very concise yet still readable!
| const toggleLike = (id) => { | ||
| setMessages((prevMessages) => | ||
| prevMessages.map((message) => | ||
| message.id === id | ||
| ? { ...message, liked: !message.liked } | ||
| : message | ||
| ) | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Nice work on this function! By passing this down to your individual chat messages you are now able to have a single source of truth!
| const getTotalLikes = () => { | ||
| return messages.filter((message) => message.liked).length; | ||
| }; |
There was a problem hiding this comment.
You could also do this with the reduce method like so:
const totalLikes = chatMessages.reduce((count, message) => count + (message.liked ? 1 : 0), 0);| <main> | ||
| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} | ||
| <ChatLog entries={messages} toggleLike={toggleLike} /> |
| import TimeStamp from './TimeStamp.jsx'; | ||
|
|
||
| const ChatEntry = () => { | ||
| const ChatEntry = ({ sender, body, timeStamp, liked, onLikeToggle, type }) => { |
| sender={entry.sender} | ||
| body={entry.body} | ||
| timeStamp={entry.timeStamp} | ||
| liked={entry.liked} |
There was a problem hiding this comment.
Since the names of the keys on entry are the same as the names your are setting on ChatEntry attributes/you are using all of the values in entry you could do something something like this to save you a few keystrokes:
const chatComponents = entries.map((entry) => {
return(
<ChatEntry
{...entry}
onLikeToggle={onLikeBtnToggle}
key={entry.id}
/>
);
});| 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, | ||
| }) | ||
| ).isRequired, | ||
| toggleLike: PropTypes.func.isRequired, |
| "timeStamp":"2018-05-29T22:49:06+00:00", | ||
| "liked": false | ||
| "liked": false, | ||
| "likeCount": 0 |
There was a problem hiding this comment.
Seems like you decided not to use the likeCount since you noticed that we could just use liked instead.
| <p>{body}</p> | ||
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp} /> | ||
| </p> | ||
| <button className="like" onClick={onLikeToggle}> | ||
| {liked ? '❤️' : '🤍'} | ||
| </button> |
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| onLikeToggle: PropTypes.func.isRequired, |
2 participants
No description provided.