Conversation
…ss based on sender
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
@tsztin0217, great work on your React Project!
| key={entry.id} | ||
| id={entry.id} | ||
| sender={entry.sender} | ||
| body={entry.body} | ||
| timeStamp={entry.timeStamp} | ||
| liked={entry.liked} | ||
| onLikeToggle={props.onLikeToggle} | ||
| localColor={props.localColor} | ||
| remoteColor={props.remoteColor} |
There was a problem hiding this comment.
Great work, especially on the formatting. To simplify your logic, you could pass in the entire message object yourself. However, you would lose out on the explicitness you have here.
| const handleLikedChat = chat => { | ||
| return { ...chat, liked: !chat.liked}; | ||
| }; | ||
|
|
||
| const countLikes = chatData => { | ||
| return chatData.reduce((sum, chat) => { | ||
| return sum + (chat.liked ? 1: 0); | ||
| }, 0); |
There was a problem hiding this comment.
Nice work on these functions, especially with having them defined outside of the component since they aren't dependent on the locally scoped data like state.
|
|
||
|
|
||
| const handleLikedChat = chat => { | ||
| return { ...chat, liked: !chat.liked}; |
There was a problem hiding this comment.
| return { ...chat, liked: !chat.liked}; | |
| return { ...chat, liked: !chat.liked }; |
| }; | ||
|
|
||
| const countLikes = chatData => { | ||
| return chatData.reduce((sum, chat) => { |
There was a problem hiding this comment.
Though you will find a number of implementations for this, the .reduce method is the one I would prefer for the given case.
| }; | ||
|
|
||
| const App = () => { | ||
| const [chatData, setChatData] = useState(DATA); |
| props.onLikeToggle(props.id); | ||
| }; | ||
|
|
||
| const likeButtonColor = props.liked ? '❤️' : '🤍'; |
| import TimeStamp from './TimeStamp'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const ChatEntry = (props) => { |
There was a problem hiding this comment.
Don't forget that you can de-structure your props here! Though this does readily display that you are working with props and not local variables declared in the components.
| const ChatEntry = (props) => { | ||
|
|
||
| const likeButtonClicked = () => { | ||
| props.onLikeToggle(props.id); |
| <article className={`chat-entry ${isLocal ? 'local' : 'remote'}`}> | ||
| <h2 className="entry-name">{props.sender}</h2> | ||
| <section className={`entry-bubble ${colorClass}`}> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time"><TimeStamp time={props.timeStamp}></TimeStamp></p> | ||
| <button className="like" onClick={likeButtonClicked}>{likeButtonColor}</button> |
| sender: PropTypes.string, | ||
| body: PropTypes.string, | ||
| timeStamp: PropTypes.string, | ||
| liked: PropTypes.bool, | ||
| id: PropTypes.number, | ||
| onLikeToggle: PropTypes.func, | ||
| localColor: PropTypes.string, | ||
| remoteColor: PropTypes.string, |
There was a problem hiding this comment.
Great work on these proptypes, remember that they have been sunsetted in React and that will be using other type checking frameworks like Typescript.
2 participants
No description provided.