-
Notifications
You must be signed in to change notification settings - Fork 117
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chatlog, am I talking to myself? #95
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great work on your first solo React project! Really nice code organization overall ^_^ I've left some questions & comments below, please take a look when you have time and reach out here or on Slack if there's anything I can clarify.
const countLikes = () => { | ||
let heartCount = 0; | ||
for (let message of messages) { | ||
if (message.liked) { | ||
heartCount += 1; | ||
} | ||
}return heartCount; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great use of the chat data to calculate the total hearts! Another way we could do this is with the Array.reduce function:
let initialValue = 0;
return messages.reduce((total, message) => {
return (chat.liked === true) ? total + 1 : total;
}, initialValue);
return ( | ||
<div id="App"> | ||
<header> | ||
<h1>Application title</h1> | ||
<h1>Waiting for Chat GDT</h1> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😸
const localOrRemote = (sender) => { | ||
if (sender === 'Vladimir') { | ||
return 'chat-entry local'; | ||
} else if (sender === 'Estragon') { | ||
return 'chat-entry remote'; | ||
}; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Small style note: the indentation got a little messed up here, this is something we might add to a checklist of things to review our code for before opening PRs.
const localOrRemote = (sender) => { | ||
if (sender === 'Vladimir') { | ||
return 'chat-entry local'; | ||
} else if (sender === 'Estragon') { | ||
return 'chat-entry remote'; | ||
}; | ||
}; | ||
return ( | ||
<div className="chat-entry local"> | ||
<h2 className="entry-name">Replace with name of sender</h2> | ||
<div className= {localOrRemote(sender)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could simplify this a little and remove the duplication of the chat-entry
class name if we use an interpolated string for the class on line 19:
const localOrRemote = (sender) => {
return (sender === 'Vladimir') ? 'local' : 'remote';
};
return (
{`chat-entry ${chatLocal}`}
<div className= {`chat-entry ${localOrRemote(sender)}`}>
...
|
||
Chatlog.propTypes = { | ||
entries: PropTypes.arrayOf ( | ||
PropTypes.shape ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice use of PropTypes.shape for more detail on what data is expected for this component =]
No description provided.