Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
Your project was good, Sno! Nice work on completing React Chatlog!
| const calculateTotalLikes = (messages) => { | ||
| return messages.reduce((total, msg) => { | ||
| return total + (msg.liked ? 1 : 0); | ||
| }, 0); | ||
| }; |
There was a problem hiding this comment.
Perfect use of the .reduce method here! I see that you moved this function outside of the App component as well. Since it isn't strongly tied to this file you could move it inside of its own utilities file. However, I think it's placement here is fine too!
| }; | ||
|
|
||
| const App = () => { | ||
| const [messages, setMessages] = useState(chatMessages); |
There was a problem hiding this comment.
Nice work on using the useState hook to initialize state for your App component.
| const toggleLike = (id) => { | ||
| const updatedMessages = messages.map((msg) => { | ||
| if (msg.id === id) { | ||
| return { ...msg, liked: !msg.liked }; | ||
| } else { | ||
| return msg; | ||
| } | ||
| }); | ||
| setMessages(updatedMessages); | ||
| }; |
There was a problem hiding this comment.
Nice work on using .map to map over your entries! Very functional! Since you are using a simple conditional block here, we could make this more succinct by using a ternary instead like so:
const toggleLike = (id) =>
setEntries(PrevEntries => PrevEntries.map(entry =>
entry.id === id ? { ...entry, liked: !entry.liked } : entry
));When you find yourself with simple checks like these, more often than not a ternary could be implemented instead for conciseness but still maintaining readability.
| <header> | ||
| <h1>Application title</h1> | ||
| <h1>React Chatlog</h1> | ||
| <h2>{totalLikes} ❤️s</h2> |
| <main> | ||
| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} | ||
| <ChatLog entries={messages} onLikeToggle={toggleLike} /> |
There was a problem hiding this comment.
Nice work here! 🫡 You may see conventions where you put the props for a component on separate lines like so:
<ChatLog
entries={entries}
onToggleLike={toggleLike}
/>This is one way to make components with many props more readable!
| import ChatEntry from './ChatEntry'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatLog = (props) => { |
There was a problem hiding this comment.
I see that you didn't de-structure your props, this could have the benefit of readily alerting you and other developers that the data you are working with comes from the props object and should be re-assigned or mutated.
| <ChatEntry | ||
| key={msg.id} | ||
| id={msg.id} | ||
| sender={msg.sender} | ||
| body={msg.body} | ||
| timeStamp={msg.timeStamp} | ||
| liked={msg.liked} | ||
| onLikeToggle={props.onLikeToggle} | ||
| /> |
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}
/>
);
});Though, what you have is more verbose! The suggestion I have above can be used when we want to use pass every key/value pair to the child component. If not, then we wouldn't follow the suggested pattern since it would be passing impertinent information to a component, putting it at risk to accidentally change a piece and be more bug prone.
| ChatLog.propTypes = { | ||
| entries: PropTypes.arrayOf( | ||
| PropTypes.shape({ | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| }) | ||
| ).isRequired, | ||
| onLikeToggle: PropTypes.func.isRequired, | ||
| }; |
There was a problem hiding this comment.
Good job on including prop types for this component! Just a quick reminder: in React v19, PropTypes are deprecated. Moving forward, it's best to use TypeScript for type checking, as it's the recommended and more robust solution for ensuring type safety across your application.
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatEntry = (props) => { | ||
| const heart = props.liked ? '❤️' : '🤍'; |
| <div className='chat-entry local'> | ||
| <h2 className='entry-name'>{props.sender}</h2> | ||
| <section className='entry-bubble'> | ||
| <p>{props.body}</p> | ||
| <p className='entry-time'> | ||
| <TimeStamp time={props.timeStamp} /> | ||
| </p> | ||
| <button className='like' onClick={() => props.onLikeToggle(props.id)}> | ||
| {heart} | ||
| </button> |
There was a problem hiding this comment.
Good! You used your props here to make your presentational component dynamic!
2 participants
No description provided.