Conversation
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp} /> | ||
| </p> | ||
| <button className="like" onClick={() => likeMessage(id)}> |
There was a problem hiding this comment.
👍 We need a function that will update the state of the entry that is click
| const bubbleClass = colorChoice[sender] ?? 'black' | ||
|
|
||
| // console.log(bubbleClass) | ||
|
|
||
| const stateMessage = (sender) => { | ||
| return sender === 'Vladimir' ? 'local' : 'remote'; | ||
| }; |
There was a problem hiding this comment.
Nice work completing this optional alignment feature
| ChatEntry.propTypes = { | ||
| //Fill with correct proptypes | ||
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| colorChoice: PropTypes.func |
| const entryComponents = entries.map(entry => { | ||
| return ( | ||
| <ChatEntry | ||
| id= {entry.id} | ||
| sender= {entry.sender} | ||
| body= {entry.body} | ||
| timeStamp= {entry.timeStamp} | ||
| liked= {entry.liked} | ||
| likeMessage= {likeMessage} | ||
| colorChoice={colorChoice} | ||
| /> |
There was a problem hiding this comment.
Nice job utilizing this map feature to iterate over the entries 👍🏾
| <p className="entry-time"> | ||
| <TimeStamp time={timeStamp} /> | ||
| </p> |
There was a problem hiding this comment.
Nice job utilizing the TimeStamp component provided!
| const ColorChoice = ({ setColorCallback, sender }) => { | ||
| return ( | ||
| <div> | ||
| <p>{`${sender}'s Color:`}</p> | ||
| <ul> | ||
| <li onClick={() => setColorCallback(sender, 'red')}>🔴</li> | ||
| <li onClick={() => setColorCallback(sender, 'orange')}>🟠</li> |
| import ColorChoice from './components/ColorChoice'; | ||
|
|
||
| const App = () => { | ||
| const [messages, setMessages] = React.useState(chatMessages); |
There was a problem hiding this comment.
👍 We need a piece of state to track changes to our messages, initialized from the json file we loaded.
| const likeMessage = (id) => { | ||
| setMessages( | ||
| messages.map((message) => (message.id === id ? { | ||
| ...message, | ||
| liked: !message.liked | ||
| } : message)) | ||
| ); | ||
| }; |
There was a problem hiding this comment.
This is an optimal approach to update the state of the heart without needing the entire entry, all you need to do is send the id of the liked entry up to App.js.
| let totalHearts = 0; | ||
|
|
||
| for (let message of messages) { | ||
| if (message.liked) { | ||
| totalHearts++ | ||
| } | ||
| } |
There was a problem hiding this comment.
This is an optimal approach to calculating the number of likes, great job 😁
This is a great place to calculate & display the total likes
ameerrah9
left a comment
ameerrah9
left a comment
There was a problem hiding this comment.
Great work, team! 🥳
Thank you for your patience as we catch up on grading. Nice work getting situated with React. This project is green 🟢
Keep it up, you're doing amazing
2 participants
No description provided.