Chatlog #102
Chatlog #102
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> |
|
|
||
| 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
No description provided.