From cfb95728c2439436fa73075b3e8aa869695aa2d1 Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Fri, 13 Jun 2025 22:43:31 -0700
Subject: [PATCH 1/7] Applied changes for wave 1

---
 src/App.jsx                  | 10 ++++++++--
 src/components/ChatEntry.jsx | 16 +++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..098ef4e1c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,20 @@
 import './App.css';
+import ChatEntry from './components/ChatEntry';
+import chatMessages from './data/messages.json';
 
 const App = () => {
+  const exampleMessage = chatMessages[0];
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatEntry
+          sender={exampleMessage.sender}
+          body={exampleMessage.body}
+          timeStamp={exampleMessage.timeStamp}
+        />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96b..ede355499 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,12 +1,16 @@
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 import './ChatEntry.css';
 
-const ChatEntry = () => {
+const ChatEntry = ({ sender, body, timeStamp }) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
+        <p>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -14,7 +18,9 @@ const ChatEntry = () => {
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;

From b3c4ace75d1bee090757d85a0dbf0640974a87d4 Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Sat, 14 Jun 2025 16:35:36 -0700
Subject: [PATCH 2/7] Implemented Wave 2

---
 src/App.jsx                | 27 +++++++++++++++++++++------
 src/components/ChatLog.jsx | 20 ++++++++++++++++++++
 2 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 098ef4e1c..28e529e4c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,20 +1,35 @@
+import React from 'react';
 import './App.css';
 import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
+// const App = () => {
+//   const exampleMessage = chatMessages[0];
+//   return (
+//     <div id="App">
+//       <header>
+//         <h1>Application title</h1>
+//       </header>
+//       <main>
+//         <ChatEntry
+//           sender={exampleMessage.sender}
+//           body={exampleMessage.body}
+//           timeStamp={exampleMessage.timeStamp}
+//         />
+//       </main>
+//     </div>
+//   );
+// };
+
 const App = () => {
-  const exampleMessage = chatMessages[0];
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-        <ChatEntry
-          sender={exampleMessage.sender}
-          body={exampleMessage.body}
-          timeStamp={exampleMessage.timeStamp}
-        />
+        <ChatLog entries={chatMessages} />
       </main>
     </div>
   );
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 000000000..86556fb63
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import './ChatLog.css';
+
+const ChatLog = ({ entries }) => {
+  return (
+    <div className="chat-log">
+      {entries.map((entry) => (
+        <ChatEntry
+          key={entry.id}
+          sender={entry.sender}
+          body={entry.body}
+          timeStamp={entry.timeStamp}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ChatLog;
\ No newline at end of file

From 535d6150a21ac8d61f371e6d1534170c6ac1b1b5 Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Sat, 14 Jun 2025 17:18:30 -0700
Subject: [PATCH 3/7] Implemented Wave 3

---
 src/App.jsx                  | 61 +++++++++++++++++++++++++++---------
 src/components/ChatEntry.jsx | 32 ++++++++++---------
 src/components/ChatLog.jsx   |  7 +++--
 3 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 28e529e4c..7fd34bf06 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,40 @@
-import React from 'react';
+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 toggleLike = (id) => {
+    const updatedEntries = entries.map((entry) => {
+      if (entry.id === id) {
+        return { ...entry, liked: !entry.liked };
+      }
+      return entry;
+    });
+    setEntries(updatedEntries);
+  };
+
+  const totalLikes = entries.filter((entry) => entry.liked).length;
+
+  return (
+    <div id="App">
+      <header>
+        <h1>Chat Log</h1>
+        <p>{totalLikes} ❤️s</p>
+      </header>
+      <main>
+        <ChatLog entries={entries} onToggleLike={toggleLike} />
+      </main>
+    </div>
+  );
+};
+
+
+export default App;
+
 // const App = () => {
 //   const exampleMessage = chatMessages[0];
 //   return (
@@ -22,17 +53,19 @@ import chatMessages from './data/messages.json';
 //   );
 // };
 
-const App = () => {
-  return (
-    <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
-      <main>
-        <ChatLog entries={chatMessages} />
-      </main>
-    </div>
-  );
-};
+// const App = () => {
+//   return (
+//     <div id="App">
+//       <header>
+//         <h1>Application title</h1>
+//       </header>
+//       <main>
+//         <ChatLog entries={chatMessages} />
+//       </main>
+//     </div>
+//   );
+// };
+
+
+
 
-export default App;
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index ede355499..f901e4b02 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,26 +1,30 @@
-import PropTypes from 'prop-types';
+// import React from 'react';
+// import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 import './ChatEntry.css';
 
-const ChatEntry = ({ sender, body, timeStamp }) => {
-  return (
-    <div className="chat-entry local">
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onToggleLike }) => {
+  const heart = liked ? '❤️' : '🤍';
+return (
+    <div className="chat-entry">
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
-        <p className="entry-time">
-          <TimeStamp time={timeStamp} />
-        </p>
-        <button className="like">🤍</button>
+        <p className="entry-time"><TimeStamp time={timeStamp} /></p>
+        <button className="like-button" onClick={() => onToggleLike(id)}>
+          {heart}
+        </button>
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes = {
-  sender: PropTypes.string.isRequired,
-  body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.string.isRequired,
-};
-
 export default ChatEntry;
+
+// ChatEntry.propTypes = {
+//   sender: PropTypes.string.isRequired,
+//   body: PropTypes.string.isRequired,
+//   timeStamp: PropTypes.string.isRequired,
+// };
+
+// export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 86556fb63..417178008 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -1,16 +1,19 @@
-import React from 'react';
+// import React from 'react';
 import ChatEntry from './ChatEntry';
 import './ChatLog.css';
 
-const ChatLog = ({ entries }) => {
+const ChatLog = ({ entries, onToggleLike }) => {
   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}
         />
       ))}
     </div>

From 8871601d389a1874f279bd66a0b381f14956c4ef Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Sat, 14 Jun 2025 19:33:34 -0700
Subject: [PATCH 4/7] Enhancements

---
 src/App.jsx                  |  4 +++-
 src/components/ChatEntry.jsx | 25 +++++++++++++------------
 src/components/ChatLog.jsx   |  3 ++-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7fd34bf06..c4c1080a4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,6 +18,7 @@ const App = () => {
   };
 
   const totalLikes = entries.filter((entry) => entry.liked).length;
+  const localSender = "Vladimir";
 
   return (
     <div id="App">
@@ -26,7 +27,8 @@ const App = () => {
         <p>{totalLikes} ❤️s</p>
       </header>
       <main>
-        <ChatLog entries={entries} onToggleLike={toggleLike} />
+        <ChatLog entries={entries} onToggleLike={toggleLike} localSender={localSender}
+/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index f901e4b02..0a8c67541 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -3,20 +3,21 @@
 import TimeStamp from './TimeStamp';
 import './ChatEntry.css';
 
-const ChatEntry = ({ id, sender, body, timeStamp, liked, onToggleLike }) => {
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onToggleLike, isLocal }) => {
   const heart = liked ? '❤️' : '🤍';
+  const entryClass = isLocal ? 'chat-entry local' : 'chat-entry remote';
 return (
-    <div className="chat-entry">
-      <h2 className="entry-name">{sender}</h2>
-      <section className="entry-bubble">
-        <p>{body}</p>
-        <p className="entry-time"><TimeStamp time={timeStamp} /></p>
-        <button className="like-button" onClick={() => onToggleLike(id)}>
-          {heart}
-        </button>
-      </section>
-    </div>
-  );
+  <div className={entryClass}>
+    <h2 className="entry-name">{sender}</h2>
+    <section className="entry-bubble">
+      <p>{body}</p>
+      <p className="entry-time"><TimeStamp time={timeStamp} /></p>
+      <button className="like-button" onClick={() => onToggleLike(id)}>
+        {heart}
+      </button>
+    </section>
+  </div>
+);
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 417178008..c435af2ce 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -2,7 +2,7 @@
 import ChatEntry from './ChatEntry';
 import './ChatLog.css';
 
-const ChatLog = ({ entries, onToggleLike }) => {
+const ChatLog = ({ entries, onToggleLike, localSender }) => {
   return (
     <div className="chat-log">
       {entries.map((entry) => (
@@ -14,6 +14,7 @@ const ChatLog = ({ entries, onToggleLike }) => {
           timeStamp={entry.timeStamp}
           liked={entry.liked}
           onToggleLike={onToggleLike}
+          isLocal={entry.sender === localSender}
         />
       ))}
     </div>

From 7c82e788520601dafe5ae4478190343a66290fa9 Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Sun, 15 Jun 2025 21:35:55 -0700
Subject: [PATCH 5/7] Final cleaning

---
 src/App.jsx                  | 32 --------------------------------
 src/components/ChatEntry.jsx | 12 +-----------
 src/components/ChatLog.jsx   |  1 -
 3 files changed, 1 insertion(+), 44 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c4c1080a4..4791d20ba 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -37,37 +37,5 @@ const App = () => {
 
 export default App;
 
-// const App = () => {
-//   const exampleMessage = chatMessages[0];
-//   return (
-//     <div id="App">
-//       <header>
-//         <h1>Application title</h1>
-//       </header>
-//       <main>
-//         <ChatEntry
-//           sender={exampleMessage.sender}
-//           body={exampleMessage.body}
-//           timeStamp={exampleMessage.timeStamp}
-//         />
-//       </main>
-//     </div>
-//   );
-// };
-
-// const App = () => {
-//   return (
-//     <div id="App">
-//       <header>
-//         <h1>Application title</h1>
-//       </header>
-//       <main>
-//         <ChatLog entries={chatMessages} />
-//       </main>
-//     </div>
-//   );
-// };
-
-
 
 
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 0a8c67541..d45baa93c 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,5 +1,3 @@
-// import React from 'react';
-// import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 import './ChatEntry.css';
 
@@ -20,12 +18,4 @@ return (
 );
 };
 
-export default ChatEntry;
-
-// ChatEntry.propTypes = {
-//   sender: PropTypes.string.isRequired,
-//   body: PropTypes.string.isRequired,
-//   timeStamp: PropTypes.string.isRequired,
-// };
-
-// export default ChatEntry;
+export default ChatEntry;
\ No newline at end of file
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index c435af2ce..07f9f885b 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -1,4 +1,3 @@
-// import React from 'react';
 import ChatEntry from './ChatEntry';
 import './ChatLog.css';
 

From 83141d8c7f3752738a1cc85dba5c8ff9320cfedf Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Sun, 15 Jun 2025 21:52:19 -0700
Subject: [PATCH 6/7] Some fixes

---
 src/App.jsx                  | 5 ++++-
 src/components/ChatEntry.jsx | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4791d20ba..b0d2c7d5d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,10 @@ import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
 const App = () => {
-  const [entries, setEntries] = useState(chatMessages);
+  // const [entries, setEntries] = useState(chatMessages);
+  const [entries, setEntries] = useState(
+  chatMessages.map((msg) => ({ ...msg, liked: msg.liked ?? false }))
+);
 
   const toggleLike = (id) => {
     const updatedEntries = entries.map((entry) => {
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index d45baa93c..ff2f5b39a 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -10,7 +10,12 @@ return (
     <section className="entry-bubble">
       <p>{body}</p>
       <p className="entry-time"><TimeStamp time={timeStamp} /></p>
-      <button className="like-button" onClick={() => onToggleLike(id)}>
+      {/* <button className="like-button" onClick={() => onToggleLike(id)}> */}
+       <button
+          className="like-button"
+          data-testid={`like-button-${id}`}
+          onClick={() => onToggleLike(id)}
+        >
         {heart}
       </button>
     </section>

From e7de3cd268d0dd5c00e9e66552ae980df32649f6 Mon Sep 17 00:00:00 2001
From: Natalia Razmadze <natasha.razmadze@gmail.com>
Date: Sun, 15 Jun 2025 21:59:24 -0700
Subject: [PATCH 7/7] changes like_button to like

---
 src/components/ChatEntry.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index ff2f5b39a..c85a1920b 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -12,7 +12,7 @@ return (
       <p className="entry-time"><TimeStamp time={timeStamp} /></p>
       {/* <button className="like-button" onClick={() => onToggleLike(id)}> */}
        <button
-          className="like-button"
+          className="like"
           data-testid={`like-button-${id}`}
           onClick={() => onToggleLike(id)}
         >