Elsje S - Snow Leopards #112
Conversation
|
|
||
| const calcTotalLikes = (chatData) => { | ||
| let everyHeart = '❤️' | ||
| let numberOfHearts = 0 |
There was a problem hiding this comment.
Nice job with this calculation! Here's another way to write this that doesn't necessitate a variable outside the scope of the reduce:
return chatData.reduce((count, chat) => {
if (chat.liked) {
count += 1;
}
return count;
}, 0);Then you also don't have to do the formatting in the template string and you can do it in the JSX instead.
| @@ -1,3 +1,5 @@ | |||
| // "avoidEscape": true; | |||
There was a problem hiding this comment.
You can just delete this commented out code.
| <header className="App-header"> | ||
| <h1>Ghibli Jabber</h1> | ||
| <section> | ||
| <h2 className="likes-counter" >Likes: {displayTotalLikes}</h2> |
There was a problem hiding this comment.
Following up on the earlier comment, I mean you can do this if you follow the reduce pattern I laid out:
<h2 className="likes-counter" >Likes: {displayTotalLikes} ❤️s</h2>
Which will help your tests to pass as well.
| @@ -9,7 +9,7 @@ describe('Wave 03: clicking like button and rendering App', () => { | |||
| let buttons = container.querySelectorAll('button.like') | |||
|
|
|||
| // Act | |||
| fireEvent.click(buttons[0]) | |||
| fireEvent.click(buttons[5]) | |||
There was a problem hiding this comment.
There's no need to modify the tests here and doing so could cause false positives/negatives unexpectedly.
| import ChatEntry from './ChatEntry'; | ||
| import './ChatLog.css'; | ||
|
|
||
| const ChatLog = (entries) => { |
There was a problem hiding this comment.
The expected name for the argument passed to a React component is props
| ); | ||
| }); | ||
| }; | ||
| return <div className="chat-log">{getChatLogJSX(entries.chats)}</div> |
There was a problem hiding this comment.
I think I see where the confusion about entries is. Chatlog is supposed to be passed a prop called entries and those entries are the chat objects. So you'd pass props.entities to the getChatLogJSX function. This is another reason why your tests weren't passing for this component.
| <p className="entry-time">Replace with TimeStamp component</p> | ||
| <button className="like">🤍</button> | ||
| <p>{props.body}</p> | ||
| <p className="entry-time">{props.timeStamp}</p> |
There was a problem hiding this comment.
The usage you're looking for is (first uncomment the Timestamp component import on line 4. Then this line:
<p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
Disclaimer: I couldn't get the timeStamp prop/component to work the way I wanted it to, so I focused on the other aspects of the project. Will keep working on it until I understand!