From 42bf51475cb677ac4be42acaa2f29fd7e3b6095e Mon Sep 17 00:00:00 2001
From: Ellie Alavi <elhamalavi.f@gmail.com>
Date: Wed, 11 Jun 2025 18:35:28 -0400
Subject: [PATCH 1/4] Wave 01 completed

---
 src/App.jsx                       | 13 +++++++++++--
 src/components/ChatEntry.jsx      | 22 +++++++++++++++++-----
 src/components/ChatEntry.test.jsx | 12 +++++++-----
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..6bf530922 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,13 @@
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 
+const Chat = {
+  id: 1,
+  sender:'Vladimir',
+  body:'why are you arguing with me',
+  timeStamp:'2018-05-29T22:49:06+00:00',
+  liked: false
+};
 const App = () => {
   return (
     <div id="App">
@@ -7,8 +15,9 @@ const App = () => {
         <h1>Application title</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        {/* Wave 01: Render one ChatEntry component */}
+        <span>{<ChatEntry chats={Chat} />}</span>
+        {/* Wave 02: Render ChatLog component */}
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96b..2d9b0c68c 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,20 +1,32 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+// import TimeStamp from './TimeStamp';
+// import { useState } from 'react';
 
-const ChatEntry = () => {
+
+// const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
+const ChatEntry = ({chats}) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <h2 className="entry-name">{chats.sender}</h2>
       <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
+        <p>{chats.body}</p>
+        <p className="entry-time">{chats.timeStamp}</p>
         <button className="like">🤍</button>
+        {/* <button className="like">{chats.liked ? '❤️' : '🤍'}</button> */}
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  chats:PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    sender: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    timeStamp: PropTypes.string.isRequired,
+    liked: PropTypes.bool.isRequired,
+  }).isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatEntry.test.jsx b/src/components/ChatEntry.test.jsx
index 85eff9256..7ad9f8c74 100644
--- a/src/components/ChatEntry.test.jsx
+++ b/src/components/ChatEntry.test.jsx
@@ -6,11 +6,13 @@ describe('Wave 01: ChatEntry', () => {
   beforeEach(() => {
     render(
       <ChatEntry
-        id={7}
-        sender="Joe Biden"
-        body="Get out by 8am.  I'll count the silverware"
-        timeStamp="2018-05-18T22:12:03Z"
-        liked={false}
+        chats={{
+          id:7,
+          sender:'Joe Biden',
+          body:'Get out by 8am.  I \'ll count the silverware',
+          timeStamp: '2018-05-18T22:12:03Z',
+          liked: false,
+      }}
       />
     );
   });

From 8dbbef9225a81d7c7f6a9c93c91c4a6a7f2b0b24 Mon Sep 17 00:00:00 2001
From: Ellie Alavi <elhamalavi.f@gmail.com>
Date: Wed, 11 Jun 2025 20:26:39 -0400
Subject: [PATCH 2/4] chat Timestamp revised- All wave1 tests passed

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

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 2d9b0c68c..084d9c42c 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,6 +1,6 @@
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
-// import TimeStamp from './TimeStamp';
+import TimeStamp from './TimeStamp';
 // import { useState } from 'react';
 
 
@@ -11,7 +11,7 @@ const ChatEntry = ({chats}) => {
       <h2 className="entry-name">{chats.sender}</h2>
       <section className="entry-bubble">
         <p>{chats.body}</p>
-        <p className="entry-time">{chats.timeStamp}</p>
+        <p className="entry-time"><TimeStamp time={chats.timeStamp} /></p>
         <button className="like">🤍</button>
         {/* <button className="like">{chats.liked ? '❤️' : '🤍'}</button> */}
       </section>

From d6ab114ff9af624f245e45533d883420f64af079 Mon Sep 17 00:00:00 2001
From: Ellie Alavi <elhamalavi.f@gmail.com>
Date: Mon, 16 Jun 2025 02:26:06 -0400
Subject: [PATCH 3/4] Added ChatLog

---
 src/App.jsx                       |  8 ++++++-
 src/components/ChatEntry.jsx      | 29 ++++++++++++-------------
 src/components/ChatEntry.test.jsx |  4 ++--
 src/components/Chatlog.jsx        | 35 +++++++++++++++++++++++++++++++
 src/components/TimeStamp.jsx      |  2 +-
 5 files changed, 58 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Chatlog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 6bf530922..1f18c92d3 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 chatData from './data/messages.json';
 
 const Chat = {
   id: 1,
@@ -8,6 +10,7 @@ const Chat = {
   timeStamp:'2018-05-29T22:49:06+00:00',
   liked: false
 };
+
 const App = () => {
   return (
     <div id="App">
@@ -16,8 +19,11 @@ const App = () => {
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component */}
-        <span>{<ChatEntry chats={Chat} />}</span>
+        {/* <ChatEntry entries={Chat} /> */}
         {/* Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={chatData}
+        />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 084d9c42c..26969939a 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,32 +1,29 @@
+// components/ChatEntry.js
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
-// import { useState } from 'react';
 
-
-// const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
-const ChatEntry = ({chats}) => {
+const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">{chats.sender}</h2>
+      <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
-        <p>{chats.body}</p>
-        <p className="entry-time"><TimeStamp time={chats.timeStamp} /></p>
-        <button className="like">🤍</button>
-        {/* <button className="like">{chats.liked ? '❤️' : '🤍'}</button> */}
+        <p>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
+        <button className="like">{liked ? '❤️' : '🤍'}</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  chats:PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    sender: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired,
-    timeStamp: PropTypes.string.isRequired,
-    liked: PropTypes.bool.isRequired,
-  }).isRequired,
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatEntry.test.jsx b/src/components/ChatEntry.test.jsx
index 7ad9f8c74..2f2a67c30 100644
--- a/src/components/ChatEntry.test.jsx
+++ b/src/components/ChatEntry.test.jsx
@@ -6,13 +6,13 @@ describe('Wave 01: ChatEntry', () => {
   beforeEach(() => {
     render(
       <ChatEntry
-        chats={{
+        entries={{
           id:7,
           sender:'Joe Biden',
           body:'Get out by 8am.  I \'ll count the silverware',
           timeStamp: '2018-05-18T22:12:03Z',
           liked: false,
-      }}
+        }}
       />
     );
   });
diff --git a/src/components/Chatlog.jsx b/src/components/Chatlog.jsx
new file mode 100644
index 000000000..3b41fee3c
--- /dev/null
+++ b/src/components/Chatlog.jsx
@@ -0,0 +1,35 @@
+// components/ChatLog.js
+import './Chatlog.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({ entries }) => {
+  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}
+        />
+      ))}
+    </div>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+      liked: PropTypes.bool.isRequired,
+    })
+  ).isRequired,
+};
+
+export default ChatLog;
\ No newline at end of file
diff --git a/src/components/TimeStamp.jsx b/src/components/TimeStamp.jsx
index e8892b4d4..5a896e80c 100644
--- a/src/components/TimeStamp.jsx
+++ b/src/components/TimeStamp.jsx
@@ -13,4 +13,4 @@ TimeStamp.propTypes = {
   time: PropTypes.string.isRequired,
 };
 
-export default TimeStamp;
+export default TimeStamp;
\ No newline at end of file

From e798b5cc6d251e028834130db72c7bb451f61ef1 Mon Sep 17 00:00:00 2001
From: Ellie Alavi <elhamalavi.f@gmail.com>
Date: Mon, 16 Jun 2025 03:07:36 -0400
Subject: [PATCH 4/4] Wave 3 partially added

---
 src/App.jsx                  | 31 +++++++++++++++++++++++--------
 src/components/ChatEntry.css |  5 +++++
 src/components/ChatEntry.jsx | 10 ++++++++--
 src/components/Chatlog.jsx   |  4 +++-
 4 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1f18c92d3..fbb1accf0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,20 +2,34 @@ import './App.css';
 import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/Chatlog';
 import chatData from './data/messages.json';
+import React, { useState } from 'react';
 
-const Chat = {
-  id: 1,
-  sender:'Vladimir',
-  body:'why are you arguing with me',
-  timeStamp:'2018-05-29T22:49:06+00:00',
-  liked: false
-};
+
+// const Chat = {
+//   id: 1,
+//   sender:'Vladimir',
+//   body:'why are you arguing with me',
+//   timeStamp:'2018-05-29T22:49:06+00:00',
+//   liked: false
+// };
 
 const App = () => {
+  const [entries, setEntries] = useState(chatData);
+
+  const toggleLike = (id) => {
+    const updatedEntries = entries.map((entry) =>
+      entry.id === id ? { ...entry, liked: !entry.liked } : entry
+    );
+    setEntries(updatedEntries);
+  };
+
+  const totalLikes = entries.filter((entry) => entry.liked).length;
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Ellie Chat Log</h1>
+        <h2>{totalLikes} ❤️s</h2>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component */}
@@ -23,6 +37,7 @@ const App = () => {
         {/* Wave 02: Render ChatLog component */}
         <ChatLog
           entries={chatData}
+          onLikeToggle={toggleLike}
         />
       </main>
     </div>
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..0b5088e81 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,9 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
+}
+
+button.like {
+  font-size: 1.5rem;
+  margin-top: 0.5rem;
 }
\ No newline at end of file
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 26969939a..07c57e365 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -3,7 +3,10 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onLikeToggle }) => {
+  const heart = liked ? '❤️' : '🤍';
+
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -12,7 +15,9 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp} />
         </p>
-        <button className="like">{liked ? '❤️' : '🤍'}</button>
+        <button className="like" onClick={() => onLikeToggle(id)}>
+          {heart}
+        </button>
       </section>
     </div>
   );
@@ -24,6 +29,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
+  onLikeToggle: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/Chatlog.jsx b/src/components/Chatlog.jsx
index 3b41fee3c..307fa3731 100644
--- a/src/components/Chatlog.jsx
+++ b/src/components/Chatlog.jsx
@@ -3,7 +3,7 @@ import './Chatlog.css';
 import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({ entries }) => {
+const ChatLog = ({ entries , onLikeToggle }) => {
   return (
     <div className="chat-log">
       {entries.map((entry) => (
@@ -14,6 +14,7 @@ const ChatLog = ({ entries }) => {
           body={entry.body}
           timeStamp={entry.timeStamp}
           liked={entry.liked}
+          onLikeToggle={onLikeToggle}
         />
       ))}
     </div>
@@ -30,6 +31,7 @@ ChatLog.propTypes = {
       liked: PropTypes.bool.isRequired,
     })
   ).isRequired,
+  onLikeToggle: PropTypes.func.isRequired,
 };
 
 export default ChatLog;
\ No newline at end of file