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 calculateLikes = (chatData) => { | ||
| let total = 0; | ||
| for (const chat of chatData) { | ||
| if (chat.liked) { | ||
| total += chat.liked; | ||
| } | ||
| } | ||
| return total; | ||
| }; |
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);| const handleLike = (id) => { | ||
| setChatData((chatData) => | ||
| chatData.map((chat) => { | ||
| if (chat.id === id) { | ||
| return { ...chat, liked: !chat.liked }; | ||
| } else { | ||
| return chat; | ||
| } | ||
| }) | ||
| ); | ||
| }; |
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 senderList = []; | ||
| const sendersList = (chatData) => { | ||
| for (const chat of chatData) { | ||
| if (!senderList.includes(chat.sender)) { | ||
| senderList.push(chat.sender); | ||
| } | ||
| } | ||
| let title = ''; | ||
| for (const sender of senderList) { | ||
| title += `${sender} and `; | ||
| } | ||
| return title.slice(0, -5); | ||
| }; | ||
|
|
There was a problem hiding this comment.
Oh, so this function can include names from 2+ users! Nice!
| const Colors = () => { | ||
| const divs = []; | ||
| for (let i = 0; i < colors.length; i++) { | ||
| const divClass = `${colors[i]} test`; | ||
| divs.push( | ||
| <div | ||
| key={i} | ||
| className={divClass} | ||
| style={{ | ||
| backgroundColor: colors[i], | ||
| }} | ||
| onClick={() => onFontColor(colors[i])} | ||
| ></div> | ||
| ); | ||
| } | ||
| return <div className='color-container'>{divs}</div>; | ||
| }; |
| <ChatLog | ||
| entries={chatData} | ||
| onLike={handleLike} | ||
| localSender={local} | ||
| fontColor={fontColor} | ||
| ></ChatLog> |
There was a problem hiding this comment.
Parents passing on things to their children, we love it!
| <ChatEntry | ||
| key={chat.id} | ||
| id={chat.id} | ||
| sender={chat.sender} | ||
| body={chat.body} | ||
| timeStamp={chat.timeStamp} | ||
| liked={chat.liked} | ||
| onLike={onLike} | ||
| localSender={localSender} | ||
| fontColor={fontColor} | ||
| ></ChatEntry> |
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}
/>
);
});Just recognize that it is not as explicit as what you have. Something to consider!
| 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, | ||
| onLike: PropTypes.func, | ||
| localSender: PropTypes.string, | ||
| fontColor: PropTypes.string, |
| "timeStamp":"2018-05-29T22:49:06+00:00", | ||
| "liked": false | ||
| "liked": false, | ||
| "likedCount": 0 |
There was a problem hiding this comment.
Seems like you decided not use these since we already know that they are liked.
| const onClickLike = () => { | ||
| props.onLike(props.id); | ||
| }; |
There was a problem hiding this comment.
The button function could also be implemented like so:
<button className='like' onClick={() => likeButtonClicked(id)}>{liked ? '❤️': '🤍'}</button>| const senderPlacement = | ||
| props.localSender == props.sender | ||
| ? 'chat-entry local' | ||
| : 'chat-entry remote'; |
2 participants
No description provided.