Conversation
mikellewade
left a comment
mikellewade
left a comment
There was a problem hiding this comment.
@Bipentium25, overall great work! I will say that consistent area of growth that I have seen for you across all projects is your formatting. It is usually inconsistent across your codebase. You will want to pay close attention to convention and style guides when you implement work in internship.
| setChats(chatData => | ||
| chatData.map(chat =>{ | ||
| if (chat.id === id) { | ||
| return{ ...chat, liked: !chat.liked }; |
There was a problem hiding this comment.
| return{ ...chat, liked: !chat.liked }; | |
| return { ...chat, liked: !chat.liked }; |
| const totalLikes = () => { | ||
| return chatData.reduce((count, chat) => { | ||
| return chat.liked ? count + 1 : count; | ||
| }, 0); | ||
| }; |
There was a problem hiding this comment.
Great work on this function implementation, @Bipentium25. Using the .reduce method is a very JS idiomatic way to code this logic.
| const local = chatData[0].sender; | ||
| const remote = chatData.find(chat => chat.sender !== local).sender; |
| <h1>Chat Between {local} and {remote}</h1> | ||
| <section><h2 className='widget'>{totalLikes()} ❤️s</h2></section> |
| <main> | ||
| {/* Wave 01: Render one ChatEntry component | ||
| Wave 02: Render ChatLog component */} | ||
| <ChatLog entries={chatData} toggleLike={toggleLike} local={local}/> |
There was a problem hiding this comment.
Nice! I see that you leveraged a local prop inside of your Chatlog component to mark all of your entry objects with a matching sender as the local messages.
|
|
||
| const ChatEntry = () => { | ||
| const ChatEntry = ({ id, sender, body, timeStamp, liked, toggleLike = () => {}, isLocal = false }) => { | ||
| const heart = liked ? '❤️' : '🤍'; |
There was a problem hiding this comment.
Perfect use case for a ternary operator! This is how we implement conditional rendering.
| <p>Replace with body of ChatEntry</p> | ||
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <div className={`chat-entry ${isLocal ? 'local' : 'remote'}`}> |
There was a problem hiding this comment.
Another great use of ternary operators!
| <section className='entry-bubble'> | ||
| <p>{body}</p> | ||
| <p className='entry-time'><TimeStamp time={timeStamp}></TimeStamp></p> | ||
| <button className='like' onClick={() => toggleLike(id)}>{heart}</button> |
| <h2 className='entry-name'>{sender}</h2> | ||
| <section className='entry-bubble'> | ||
| <p>{body}</p> | ||
| <p className='entry-time'><TimeStamp time={timeStamp}></TimeStamp></p> |
| id: PropTypes.number.isRequired, | ||
| sender: PropTypes.string.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| timeStamp: PropTypes.string.isRequired, | ||
| liked: PropTypes.bool.isRequired, | ||
| toggleLike: PropTypes.func.isRequired, | ||
| isLocal: PropTypes.bool, | ||
|
|
There was a problem hiding this comment.
Don't forget that in React PropTypes have been sunsetted and you will want to use Typescript in practice now!
2 participants
No description provided.