-
Notifications
You must be signed in to change notification settings - Fork 45
C22_Sphinx_Rong Jiang #28
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
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.
Nice job on react-chatlog!
import messages from './data/messages.json' | ||
|
||
|
||
// import data from messages.json | ||
const LOG = messages; |
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.
You can directly name messages
as LOG
on line 4.
import messages from './data/messages.json' | |
// import data from messages.json | |
const LOG = messages; | |
import LOG from './data/messages.json'; |
Be sure to terminate a statement with semi-colons.
setEntries(updatedEntries); | ||
} | ||
|
||
const totalLikes = entries.filter(entry => entry.liked).length; |
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.
Typically, you'd see reduce
used to add up some values.
const totalLikes = entries.reduce((totalLikes, entry) => (totalLikes + entry.liked);
<p className="entry-time">Replace with TimeStamp component</p> | ||
<button className="like">🤍</button> | ||
<p className='body'>{body}</p> | ||
<TimeStamp time = {timeStamp}></TimeStamp> |
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 job using the provided Timestamp component here.
Convention is to not have spaces around =
sign when passing props
<TimeStamp time = {timeStamp}></TimeStamp> | |
<TimeStamp time={timeStamp}></TimeStamp> |
import PropTypes from 'prop-types'; | ||
import TimeStamp from './TimeStamp'; | ||
|
||
const ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => { |
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 ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => { | |
const ChatEntry = ({ id, sender, body, timeStamp,liked, onLikeToggle }) => { |
Spaces around curly braces when destructuring
<p className='body'>{body}</p> | ||
<TimeStamp time = {timeStamp}></TimeStamp> | ||
<button | ||
className='like' //className from test |
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.
Prefer not to have comments in code unless absolutely necessary.
|
||
if (sender === 'Vladimir') { | ||
isLocalUser = true; | ||
} |
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.
} | |
} ; |
Linter calls out that you're missing semi-colons. if you haven't configured your linter, you might want to do that so it can highlight syntax/style issues.
let isLocalUser = false | ||
|
||
if (sender === 'Vladimir') { | ||
isLocalUser = true; | ||
} |
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.
Would prefer to have this logic put in a method and the method get called somewhere.
let isLocalUser = false | |
if (sender === 'Vladimir') { | |
isLocalUser = true; | |
} | |
const setLocalOrRemote () => { | |
return sender == 'Vladimir' ? 'local' : 'remote'; | |
}; |
Then on line 18, you can call the function:
<div className={`chat-entry ${setLocalOrRemote()}`}>
import ChatEntry from './ChatEntry'; | ||
|
||
|
||
const ChatLog = ({entries, onLikeToggle}) => { |
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 ChatLog = ({entries, onLikeToggle}) => { | |
const ChatLog = ({ entries, onLikeToggle }) => { |
return ( | ||
<div className="chat-log"> | ||
{entries.map(entry => ( | ||
<ChatEntry | ||
key={entry.id} | ||
id={entry.id} | ||
sender={entry.sender} | ||
body={entry.body} | ||
timeStamp={entry.timeStamp} | ||
liked={entry.liked} | ||
onLikeToggle={onLikeToggle} | ||
/> | ||
))} | ||
</div> | ||
); | ||
}; |
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.
It's more typical to see the result of using map
referenced by a variable and using that variable in the JSX, like:
const chatLogs = entries.map((entry) => {
return (
<ChatEntry
key={entry.id}
id={entry.id}
sender={entry.sender}
body={entry.body}
timeStamp={entry.timeStamp}
liked={entry.liked}
handleLike={handleLike}
currentUser={currentUser}
/>
);
});
};
return (
<div className="chat-log">
{chatLogs}
</div>
);
import TimeStamp from './TimeStamp'; | ||
|
||
const ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => { | ||
|
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.
Linter says "Block must not be padded by blank lines". Remove line 6
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.
No description provided.