-
Notifications
You must be signed in to change notification settings - Fork 626
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Panthers Nicole Farrah #48
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 Nice use of reduce
!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 Great work setting up the Chatlog
component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 nice work utilizing the TimeStamp
component and setting up this component.
props.onUpdateChatData(updatedChatEntry); | ||
}; | ||
|
||
const heart = props.liked ? '❤️' : '🤍'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yay Ternarys ✨
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
No description provided.