From 6b2d40d29d598e7e0d10465cfe0e660847d58364 Mon Sep 17 00:00:00 2001
From: Bianca <myname45@gmail.com>
Date: Thu, 11 Dec 2025 08:54:37 -0500
Subject: [PATCH 1/4] waves 1 & 2

---
 src/App.jsx                  |  5 +++--
 src/components/ChatEntry.jsx | 24 ++++++++++++++++--------
 src/components/ChatLog.jsx   | 23 +++++++++++++++++++++++
 3 files changed, 42 insertions(+), 10 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..fe259d33e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,6 @@
 import './App.css';
+import ChatLog from './components/ChatLog';
+import messages from './data/messages.json';
 
 const App = () => {
   return (
@@ -7,8 +9,7 @@ const App = () => {
         <h1>Application title</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={messages} />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index fe05efa0f..e54cca8a7 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,21 +1,29 @@
+import PropTypes from 'prop-types';
 import './ChatEntry.css';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = () => {
+// presentational component?
+
+const ChatEntry = (props) => {
   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>
+    //using article since you can forward a message independently of the rest of the chat
+    <article className="chat-entry local">
+      <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
+        <p>{props.body}</p>
+        {/* TimeStamp component recieves timstamp from JSON as props.timeStamp & converts it */}
+        <p className="entry-time"><TimeStamp time={props.timeStamp} /></p>
         <button className="like">🤍</button>
       </section>
-    </replace-with-relevant-semantic-element>
+    </article>
   );
 };
 
+
 ChatEntry.propTypes = {
-  // Fill with correct 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
new file mode 100644
index 000000000..67981ef7b
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = (props) => {
+  return (
+    <section>
+      {props.entries.map(message => (
+        <ChatEntry
+          key={message.id}
+          sender={message.sender}
+          body={message.body}
+          timeStamp={message.timeStamp}
+        />
+      ))}
+    </section>
+  );
+};
+
+ChatLog.propTypes ={
+  entries: PropTypes.array.isRequired
+};
+
+export default ChatLog;
\ No newline at end of file

From c592eb52d6023d4b0a287826982cf720b8b900bd Mon Sep 17 00:00:00 2001
From: Bianca <myname45@gmail.com>
Date: Mon, 15 Dec 2025 21:58:43 -0500
Subject: [PATCH 2/4] wave 3

---
 src/App.jsx                  | 23 +++++++++++++++++++++--
 src/components/ChatEntry.jsx | 19 +++++++++++--------
 src/components/ChatLog.jsx   |  8 ++++++--
 3 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index fe259d33e..b968a8101 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,18 +1,37 @@
 import './App.css';
 import ChatLog from './components/ChatLog';
 import messages from './data/messages.json';
+import { useState } from 'react';
 
 const App = () => {
+  const [entries, setEntries] = useState(messages);
+
+  const toggleLike = (id) => {
+    setEntries(entries.map(entry =>
+      entry.id === id
+        ? { ...entry, liked: !entry.liked }
+        : entry
+    ));
+  };
+
+  const totalLikes = entries.filter(entry => entry.liked).length;
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
+        <section>
+          <h2>{totalLikes} ❤️s</h2>
+        </section>
       </header>
       <main>
-        <ChatLog entries={messages} />
+        <ChatLog
+          entries={entries}
+          onLikeToggle={toggleLike}
+        />
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index e54cca8a7..3b0920560 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -2,28 +2,31 @@ import PropTypes from 'prop-types';
 import './ChatEntry.css';
 import TimeStamp from './TimeStamp';
 
-// presentational component?
-
 const ChatEntry = (props) => {
   return (
-    //using article since you can forward a message independently of the rest of the chat
     <article className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
-        {/* TimeStamp component recieves timstamp from JSON as props.timeStamp & converts it */}
         <p className="entry-time"><TimeStamp time={props.timeStamp} /></p>
-        <button className="like">🤍</button>
+        <button
+          className="like"
+          onClick={() => props.onLikeToggle(props.id)}
+        >
+          {props.liked ? '❤️' : '🤍'}
+        </button>
       </section>
     </article>
   );
 };
 
-
 ChatEntry.propTypes = {
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.string.isRequired
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onLikeToggle: PropTypes.func.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 67981ef7b..7756470de 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -7,17 +7,21 @@ const ChatLog = (props) => {
       {props.entries.map(message => (
         <ChatEntry
           key={message.id}
+          id={message.id}
           sender={message.sender}
           body={message.body}
           timeStamp={message.timeStamp}
+          liked={message.liked}
+          onLikeToggle={props.onLikeToggle}
         />
       ))}
     </section>
   );
 };
 
-ChatLog.propTypes ={
-  entries: PropTypes.array.isRequired
+ChatLog.propTypes = {
+  entries: PropTypes.array.isRequired,
+  onLikeToggle: PropTypes.func.isRequired
 };
 
 export default ChatLog;
\ No newline at end of file

From cb28fa914a5b1f2341287d8f6fd62b4d8fd022c5 Mon Sep 17 00:00:00 2001
From: Bianca <myname45@gmail.com>
Date: Tue, 16 Dec 2025 05:17:47 -0500
Subject: [PATCH 3/4] removed isrequired from ontoggle

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

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 3b0920560..cc822036c 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -26,7 +26,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
-  onLikeToggle: PropTypes.func.isRequired,
+  onLikeToggle: PropTypes.func
 };
 
 export default ChatEntry;
\ No newline at end of file
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 7756470de..85f658ff3 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -21,7 +21,7 @@ const ChatLog = (props) => {
 
 ChatLog.propTypes = {
   entries: PropTypes.array.isRequired,
-  onLikeToggle: PropTypes.func.isRequired
+  onLikeToggle: PropTypes.func
 };
 
 export default ChatLog;
\ No newline at end of file

From 12594353c888ec17d8a4f0c6e6bee65b65675a95 Mon Sep 17 00:00:00 2001
From: Bianca <myname45@gmail.com>
Date: Tue, 16 Dec 2025 08:50:58 -0500
Subject: [PATCH 4/4] implemented copilots suggestions to make proptypes in
 chatLog more specific, re-added is required to onToggle

---
 src/components/ChatEntry.jsx |  2 +-
 src/components/ChatLog.jsx   | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index cc822036c..6aa2484ad 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -26,7 +26,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
-  onLikeToggle: PropTypes.func
+  onLikeToggle: PropTypes.func.isRequired
 };
 
 export default ChatEntry;
\ No newline at end of file
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 85f658ff3..badedebd5 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -20,8 +20,16 @@ const ChatLog = (props) => {
 };
 
 ChatLog.propTypes = {
-  entries: PropTypes.array.isRequired,
-  onLikeToggle: PropTypes.func
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+      liked: PropTypes.bool.isRequired,
+    })
+  ).isRequired,
+  onLikeToggle: PropTypes.func.isRequired
 };
 
 export default ChatLog;
\ No newline at end of file