Skip to content

Chat Log waves #19

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.

Sign up for GitHub

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

Open
NataliaRaz wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Chat Log waves #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cfb9572
Applied changes for wave 1
NataliaRaz Jun 14, 2025
b3c4ace
Implemented Wave 2
NataliaRaz Jun 14, 2025
535d615
Implemented Wave 3
NataliaRaz Jun 15, 2025
8871601
Enhancements
NataliaRaz Jun 15, 2025
7c82e78
Final cleaning
NataliaRaz Jun 16, 2025
83141d8
Some fixes
NataliaRaz Jun 16, 2025
e7de3cd
changes like_button to like
NataliaRaz Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 30 additions & 3 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,44 @@
import React, { useState } from 'react';
import './App.css';
import ChatEntry from './components/ChatEntry';
import ChatLog from './components/ChatLog';
import chatMessages from './data/messages.json';

const App = () => {
// const [entries, setEntries] = useState(chatMessages);
const [entries, setEntries] = useState(
chatMessages.map((msg) => ({ ...msg, liked: msg.liked ?? false }))
);
Comment on lines +8 to +11
Copy link

@yangashley yangashley Jun 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can assume that all msgs in chatMessages will have a property likedso we don't need to iterate each of them. We can directly set the initial stateentriesequal tochatMessages`, like what you have commented out on line 8.

Suggested change
// const [entries, setEntries] = useState(chatMessages);
const [entries, setEntries] = useState(
chatMessages.map((msg) => ({ ...msg, liked: msg.liked ?? false }))
);
const [entries, setEntries] = useState(chatMessages);
);


const toggleLike = (id) => {
const updatedEntries = entries.map((entry) => {
if (entry.id === id) {
return { ...entry, liked: !entry.liked };
Copy link

@yangashley yangashley Jun 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We showed this approach in class, but technically, we're mixing a few responsibilities here. rather than this function needing to know how to change the liked status itself, we could move this update logic to a helper function. This would better mirror how we eventually update records when there's an API call involved.

In this project, our messages are very simple objects, but if we had more involved operations, it could be worthwhile to create an actual class with methods to work with them, or at least have a set of dedicated helper functions to centralize any such mutation logic.

}
return entry;
});
setEntries(updatedEntries);
};

const totalLikes = entries.filter((entry) => entry.liked).length;
Copy link

@yangashley yangashley Jun 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea to filter down the data to the liked messages and use the list length as the count!

This approach works, but you'll typically see JS devs use reduce to calculate a value like this:

  const calculateTotalLikeCount = (chatData) => {
    return entries.reduce((acc, entry) => {
      return entry.liked ? acc + 1 : acc;
    }, 0);
  };

const localSender = "Vladimir";
Copy link

@yangashley yangashley Jun 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a constant variable so we should use all capital letters.

Suggested change
const localSender = "Vladimir";
const LOCAL_SENDER = "Vladimir";


return (
<div id="App">
<header>
<h1>Application title</h1>
<h1>Chat Log</h1>
Copy link

@yangashley yangashley Jun 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An element missing from your project is the header "Chat Between Vladimir and Estragon". Here you have "Chat Log".

@NataliaRaz How would you create a header that reflects the screenshot below? It can be done by hardcoding the string in the h1 tag, but I'm wondering how would you programmatically get the names of the participants in the chat?

Please respond to this comment with your answer, thank you!

image

<p>{totalLikes} ❤️s</p>
</header>
<main>
{/* Wave 01: Render one ChatEntry component
Wave 02: Render ChatLog component */}
<ChatLog entries={entries} onToggleLike={toggleLike} localSender={localSender}
/>
</main>
</div>
);
};


export default App;



38 changes: 22 additions & 16 deletions src/components/ChatEntry.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
import TimeStamp from './TimeStamp';
import './ChatEntry.css';

const ChatEntry = () => {
return (
<div className="chat-entry local">
<h2 className="entry-name">Replace with name of sender</h2>
<section className="entry-bubble">
<p>Replace with body of ChatEntry</p>
<p className="entry-time">Replace with TimeStamp component</p>
<button className="like">🤍</button>
</section>
</div>
);
const ChatEntry = ({ id, sender, body, timeStamp, liked, onToggleLike, isLocal }) => {
const heart = liked ? '❤️' : '🤍';
const entryClass = isLocal ? 'chat-entry local' : 'chat-entry remote';
return (
<div className={entryClass}>
<h2 className="entry-name">{sender}</h2>
<section className="entry-bubble">
<p>{body}</p>
<p className="entry-time"><TimeStamp time={timeStamp} /></p>
Copy link

@yangashley yangashley Jun 25, 2025

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

{/* <button className="like-button" onClick={() => onToggleLike(id)}> */}
<button
className="like"
data-testid={`like-button-${id}`}
onClick={() => onToggleLike(id)}
>
{heart}
</button>
</section>
</div>
);
};

ChatEntry.propTypes = {
// Fill with correct proptypes
};

export default ChatEntry;
export default ChatEntry;
23 changes: 23 additions & 0 deletions src/components/ChatLog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import ChatEntry from './ChatEntry';
import './ChatLog.css';

const ChatLog = ({ entries, onToggleLike, localSender }) => {
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}
onToggleLike={onToggleLike}
isLocal={entry.sender === localSender}
/>
))}
</div>
);
};

export default ChatLog;