-
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
Lions - Tara Alsaidi #50
base: main
Are you sure you want to change the base?
Conversation
…imeStamp components
…ated updateMessages callback function connected to onClick functionality in ChatEntry, created variable styling for liked functionality and remote vs. local sender
…rack total number of likes in App.js and display this number in the header
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 job! This project is green.
const [messagesList, setMessageList] = useState(chatMessages); | ||
const [likesCounter, setLikesCounter] = useState(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.
Because we can determine the number of likes from messagesList
, likesCounter
should not be its own state variable. In general, we want state variables to not depend on one another, otherwise we get multiple sources of truth and increase the risk of bugs.
if (id === message.id) { | ||
message.liked = !message.liked; | ||
return message; | ||
} else { | ||
return message; | ||
} |
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.
Small nitpick: the else is not needed here.
import TimeStamp from './TimeStamp'; | ||
|
||
const ChatEntry = ({ id, sender, body, timeStamp, liked, onLikeClick }) => { | ||
const localOrRemote = |
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.
Smart!
@@ -1,22 +1,41 @@ | |||
import React from 'react'; | |||
import './ChatEntry.css'; | |||
import PropTypes from 'prop-types'; | |||
import TimeStamp from './TimeStamp'; | |||
|
|||
const ChatEntry = ({ id, sender, body, timeStamp, liked, onLikeClick }) => { |
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 destructuring!
onClick={() => { | ||
onLikeClick(id); | ||
}} |
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 anonymous function!
messages: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
id: PropTypes.number.isRequired, | ||
sender: PropTypes.string.isRequired, | ||
body: PropTypes.string.isRequired, | ||
timeStamp: PropTypes.func, | ||
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.
Make sure to make the overall array as required as well.
No description provided.