C22_Sphinx_Rong Jiang

[cornetto9]

No description provided.

[yangashley]

Nice job on react-chatlog!

[yangashley]

You can directly name messages as LOG on line 4.

Suggested change

	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.

[yangashley]

Typically, you'd see reduce used to add up some values.

const totalLikes = entries.reduce((totalLikes, entry) => (totalLikes + entry.liked);

[yangashley]

Nice job using the provided Timestamp component here.

Convention is to not have spaces around = sign when passing props

Suggested change

	<TimeStamp time = {timeStamp}></TimeStamp>
	<TimeStamp time={timeStamp}></TimeStamp>

[yangashley]

Suggested change

	const ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => {
	const ChatEntry = ({ id, sender, body, timeStamp,liked, onLikeToggle }) => {

Spaces around curly braces when destructuring

[yangashley]

Prefer not to have comments in code unless absolutely necessary.

[yangashley]

Suggested change

	}
	} ;

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.

[yangashley]

Would prefer to have this logic put in a method and the method get called somewhere.

Suggested change

	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()}`}>

[yangashley]

Suggested change

	const ChatLog = ({entries, onLikeToggle}) => {
	const ChatLog = ({ entries, onLikeToggle }) => {

[yangashley]

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>
  );

[yangashley]

Linter says "Block must not be padded by blank lines". Remove line 6

Suggested change

[yangashley]

My linter shows all the style issues here. See the pink and green squiggley lines. I recommend configuring your linter so you can catch these issues before opening a PR.