Panthers Nicole Farrah #48
Conversation
There was a problem hiding this comment.
Fantastic work Farrah and Nicole! Your code passes all the tests and visual/functional requirements. Overall, a really clean submission!
I have added compliments and comments to your PR. Let me know if you have any questions about my feedback.
Keep up the great work ✨
Grade: 🟢
| const calcTotalLikes = (chatData) => { | ||
| return chatData.reduce((total, entry) => { | ||
| if (entry.liked) { | ||
| total += 1 | ||
| } | ||
| return total; | ||
| }, 0) | ||
| }; |
There was a problem hiding this comment.
Another way we could write this is by using a forEach loop:
const getLikeCount = () => {
let likeCount = 0;
chatData.forEach((entry) => (entry.liked ? likeCount++ : entry));
return likeCount;
};| const updateChatData = (updatedChatData) => { | ||
| const entries = chatData.map(entry => { | ||
| if (entry.id === updatedChatData.id) { | ||
| return updatedChatData | ||
| } else { | ||
| return entry | ||
| }; | ||
| }); | ||
| setChatData(entries); | ||
| }; |
There was a problem hiding this comment.
After checking chatEntry, I noticed that ya'll are passing up a brand new object and then adding that to the entries list.
While this approach is consistent with what's shown in Learn, it has the downside that a presentation component needs to have enough information to reconstruct an object (including data not required for display) and know how to mutate the new object in the process.
I prefer the approach where only the object id is passed to the event handler. Sending up an id allows the child component to stay simpler, as it only needs the id and any data required for actual display, leaving all the messy stuff to be handled by code that has more knowledge of what the full data might look like.
There was a problem hiding this comment.
Nice work! We can also refactor the conditional into a ternary as well:
const updateChatdata = (id) => {
const entries = chatData.map(entry =>
entry.id === id? { ...entry, liked: !entry.liked } : entry
);
setMessageData(entries);
};| const ChatLog = (props) => { | ||
| const chatEntries = props.entries.map((chatEntry, i) => { | ||
| return <ChatEntry | ||
| key={i} | ||
| id={chatEntry.id} | ||
| sender={chatEntry.sender} | ||
| body={chatEntry.body} | ||
| timeStamp={chatEntry.timeStamp} | ||
| liked={chatEntry.liked} | ||
| onUpdateChatData={props.onUpdateChatData} | ||
| /> | ||
| }) | ||
|
|
||
| return ( | ||
| <div> | ||
| {chatEntries} | ||
| </div> | ||
| ) | ||
| }; |
There was a problem hiding this comment.
👍 Great work setting up the Chatlog component.
There was a problem hiding this comment.
One thing that we can do to DRY up this component is by using object restructuring to define props and remove the constant need to use dot notation with chatEntry.nameOfprop.
const ChatLog = ({ id, sender, body, timeStamp, liked, onUpdateChatData}) => {
const chatEntries = props.entries.map((chatEntry, i) => {
return <ChatEntry
key={i}
id={id}
sender={sender}
body={body}
timeStamp={timeStamp}
liked={liked}
onUpdateChatData={onUpdateChatData}
/>
})
return (
<div>
{chatEntries}
</div>
)
};| 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, | ||
| })), | ||
| onUpdateChatData: PropTypes.func.isRequired | ||
| }; |
There was a problem hiding this comment.
👍 good work setting up the propTypes and using shape to validate the data within the array's nested objects.
| const onHeartButtonClick = () => { | ||
| const updatedChatEntry = { | ||
| id: props.id, | ||
| sender: props.sender, | ||
| body: props.body, | ||
| timeStamp: props.timeStamp, | ||
| liked: !props.liked, | ||
| }; | ||
| props.onUpdateChatData(updatedChatEntry); | ||
| }; |
There was a problem hiding this comment.
See comment in app.js about the onUpdatechatData function.
| <h2 className="entry-name">{props.sender}</h2> | ||
| <section className="entry-bubble"> | ||
| <p>Replace with body of ChatEntry</p> | ||
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{props.id}</p> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"> | ||
| <TimeStamp time={props.timeStamp} /> | ||
| </p> | ||
| <button className="like" onClick={onHeartButtonClick}>{heart}</button> |
There was a problem hiding this comment.
👍 nice work utilizing the TimeStamp component and setting up this component.
| props.onUpdateChatData(updatedChatEntry); | ||
| }; | ||
|
|
||
| const heart = props.liked ? '❤️' : '🤍'; |
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, |
No description provided.