From 89276b2de6e216ae1e2d8b53f856e71308a2db9b Mon Sep 17 00:00:00 2001
From: Gina Song <gina0song@gmail.com>
Date: Wed, 10 Dec 2025 14:20:40 -0800
Subject: [PATCH 1/6] Update the ChatEntry and App components to display a
 single chat message bubble with the message body, timestamp, sender's name

---
 src/App.jsx                  | 12 ++++++++++--
 src/components/ChatEntry.jsx | 25 +++++++++++++++----------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..f9d3aaa69 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,22 @@
 import './App.css';
+import ChatEntry from './components/ChatEntry';
+
 
 const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        Wave 02: Render ChatLog component */
+          <ChatEntry
+            sender="Vladimir"
+            body="Why are you arguing with me"
+            timeStamp="2018-05-29T22:49:06+00:00"
+          />
+        }
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index fe05efa0f..b936c7fc5 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,21 +1,26 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = () => {
+const ChatEntry = ({ sender, body, timeStamp }) => {
   return (
-    // Replace the outer tag name with a semantic element that fits our use case
-    <replace-with-relevant-semantic-element 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>
+    <section className="chat-entry local">
+      <h2 className="entry-name">{sender}</h2>
+      <div className="entry-bubble">
+        <p>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
         <button className="like">🤍</button>
-      </section>
-    </replace-with-relevant-semantic-element>
+      </div>
+    </section>
   );
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;

From e4800ae94e41198430636c958f41f7707b5c9624 Mon Sep 17 00:00:00 2001
From: Gina Song <gina0song@gmail.com>
Date: Wed, 10 Dec 2025 15:01:09 -0800
Subject: [PATCH 2/6] Implement a ChatLog component and update the App
 component to display an entire chat log. ChatLog should display a sequence of
 individual ChatEntry components.

---
 src/App.jsx                  | 13 ++++---------
 src/components/ChatEntry.jsx |  1 -
 src/components/ChatLog.jsx   | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index f9d3aaa69..5f030ad74 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,7 @@
 import './App.css';
-import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+import messages from './data/messages.json';
+
 
 
 const App = () => {
@@ -9,14 +11,7 @@ const App = () => {
         <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */
-          <ChatEntry
-            sender="Vladimir"
-            body="Why are you arguing with me"
-            timeStamp="2018-05-29T22:49:06+00:00"
-          />
-        }
+        <ChatLog entries={messages} />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index b936c7fc5..61eb8e0b1 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -22,5 +22,4 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
 };
-
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 000000000..92ad0a9a6
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,33 @@
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+import './ChatLog.css';
+
+// ChatLog component to render a list of ChatEntry components
+const ChatLog = ({ entries }) => {
+  return (
+    <ul className="chat-log">
+      {entries.map((entry) => (
+        <ChatEntry
+          key={entry.id}
+          sender={entry.sender}
+          body={entry.body}
+          timeStamp={entry.timeStamp}
+        />
+      ))}
+    </ul>
+  );
+};
+
+// Prop type validation for ChatLog component
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default ChatLog;
\ No newline at end of file

From f00cc9ffb0026944d32fcf74928dc82293aeb31d Mon Sep 17 00:00:00 2001
From: Gina Song <gina0song@gmail.com>
Date: Fri, 12 Dec 2025 13:38:26 -0800
Subject: [PATCH 3/6] Update App.jsx to Manage State

---
 src/App.jsx                | 22 +++++++++++++++++++---
 src/components/ChatLog.jsx |  4 ++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5f030ad74..c717ca318 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,33 @@
 import './App.css';
 import ChatLog from './components/ChatLog';
-import messages from './data/messages.json';
-
+import { useState } from 'react';
+import messagesData from './data/messages.json';
 
 
 const App = () => {
+  const [messages, setMessages] = useState(messagesData);
+  const totalLikes = messages.filter(message => message.liked).length;
+
+  // Function to toggle like status of a message
+  const toggleLike = (id) => {
+    setMessages(messages.map(message => {
+      if (message.id === id) {
+        return { ...message, liked: !message.liked };
+      }
+      return message;
+    }));
+  };
+
   return (
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
+        <section>
+          <p>{totalLikes} ❤️s</p>
+        </section>
       </header>
       <main>
-        <ChatLog entries={messages} />
+        <ChatLog entries={messages} onToggleLike={toggleLike} />
       </main>
     </div>
   );
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 92ad0a9a6..ab46ae0a6 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -6,6 +6,10 @@ import './ChatLog.css';
 const ChatLog = ({ entries }) => {
   return (
     <ul className="chat-log">
+      {/* Map over entries and render ChatEntry for each */}
+      {/* Loops through each item;
+      transforms each item using the function provided;
+      returns a new array with the transformed items */}
       {entries.map((entry) => (
         <ChatEntry
           key={entry.id}

From 28d200806623706361250bb7a78105dba88d3614 Mon Sep 17 00:00:00 2001
From: Gina Song <gina0song@gmail.com>
Date: Fri, 12 Dec 2025 13:40:38 -0800
Subject: [PATCH 4/6] Update ChatLog.jsx to Pass Down the Callback

---
 src/components/ChatLog.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index ab46ae0a6..a490feace 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -10,12 +10,14 @@ const ChatLog = ({ entries }) => {
       {/* Loops through each item;
       transforms each item using the function provided;
       returns a new array with the transformed items */}
-      {entries.map((entry) => (
+      {entries.map((entry,onToggleLike) => (
         <ChatEntry
           key={entry.id}
           sender={entry.sender}
           body={entry.body}
           timeStamp={entry.timeStamp}
+          liked={entry.liked}
+          onToggleLike={onToggleLike}
         />
       ))}
     </ul>

From 32f07838ae17460bac295aca50794f8c55cd6be9 Mon Sep 17 00:00:00 2001
From: Gina Song <gina0song@gmail.com>
Date: Fri, 12 Dec 2025 13:57:06 -0800
Subject: [PATCH 5/6]  Update ChatEntry.jsx to Handle Click Events, wave 3
 completed

---
 src/components/ChatEntry.jsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 61eb8e0b1..8bbd7175a 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -2,7 +2,13 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ sender, body, timeStamp }) => {
+const ChatEntry = ({id, sender, body, timeStamp, liked, onToggleLike }) => {
+
+  const handleLikeClick = () => {
+    onToggleLike(id);
+  };
+
+
   return (
     <section className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -11,15 +17,22 @@ const ChatEntry = ({ sender, body, timeStamp }) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp} />
         </p>
-        <button className="like">🤍</button>
+        <button className="like" onClick={handleLikeClick}>
+          {liked ? '❤️' : '🤍'}
+
+        </button>
       </div>
     </section>
   );
 };
 
 ChatEntry.propTypes = {
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onToggleLike: PropTypes.func.isRequired,
 };
+
 export default ChatEntry;

From 4059be6e8a4292f220ba73c422608bf02890ff87 Mon Sep 17 00:00:00 2001
From: Gina Song <gina0song@gmail.com>
Date: Mon, 15 Dec 2025 16:30:48 -0800
Subject: [PATCH 6/6] fixed

---
 src/App.css                |  4 ++++
 src/components/ChatLog.jsx | 13 ++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index d97beb4e6..fdb1208c1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -13,6 +13,10 @@
   align-items: center;
 }
 
+header section p {
+  color: black;
+}
+
 #App main {
   padding-left: 2em;
   padding-right: 2em;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index a490feace..19c967f2d 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -3,16 +3,13 @@ import PropTypes from 'prop-types';
 import './ChatLog.css';
 
 // ChatLog component to render a list of ChatEntry components
-const ChatLog = ({ entries }) => {
+const ChatLog = ({ entries, onToggleLike }) => {
   return (
     <ul className="chat-log">
-      {/* Map over entries and render ChatEntry for each */}
-      {/* Loops through each item;
-      transforms each item using the function provided;
-      returns a new array with the transformed items */}
-      {entries.map((entry,onToggleLike) => (
+      {entries.map((entry) => (
         <ChatEntry
-          key={entry.id}
+          key={entry.id}  
+          id={entry.id}
           sender={entry.sender}
           body={entry.body}
           timeStamp={entry.timeStamp}
@@ -32,8 +29,10 @@ ChatLog.propTypes = {
       sender: PropTypes.string.isRequired,
       body: PropTypes.string.isRequired,
       timeStamp: PropTypes.string.isRequired,
+      liked: PropTypes.bool.isRequired,
     })
   ).isRequired,
+  onToggleLike: PropTypes.func.isRequired,
 };
 
 export default ChatLog;
\ No newline at end of file