From 6278487cb8199ef81e1d15a3f7e3b29ff34ffe2c Mon Sep 17 00:00:00 2001
From: Leidy <leidymarbu@gmail.com>
Date: Thu, 12 Dec 2024 22:01:12 -0300
Subject: [PATCH 1/5] implemented wave1 & wave2

---
 src/App.jsx                  | 23 +++++++++++++++++--
 src/components/ChatEntry.jsx | 19 +++++++++++-----
 src/components/ChatLog.jsx   | 44 ++++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..c1f1c6eb4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,34 @@
+import { useState } from 'react';
 import './App.css';
+import ChatLog from './components/ChatLog';
+import messages from './data/messages.json';
+
+
 
 const App = () => {
+  const [chatLiked, setChatLiked] = useState(messages);
+
+  const clickLikedButtom = (id) => {
+    setChatLiked(chat => {
+      return chat.map(chat => {
+        if (chat.id === id) {
+          return { ...chat, liked: !chat.liked };
+        } else {
+          return chat;
+        }
+      });
+    });
+  };
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <div>{<ChatLog entries={chatLiked} onLiked={clickLikedButtom} />}</div>
       </main>
+
     </div>
   );
 };
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96b..89c4630c7 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,20 +1,27 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = () => {
+const ChatEntry = (props) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <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>
+        <p className="entry-time"><TimeStamp time={props.timeStamp}></TimeStamp></p>
         <button className="like">🤍</button>
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes = {
-  // Fill with correct proptypes
+ChatEntry.propTypes= {
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onLiked: PropTypes.func.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 000000000..73d481486
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,44 @@
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+
+const ChatLog = (props) => {
+  const chatentrycomponents = props.entries.map((entries, index) => {
+    return (
+      <ul key={index}>
+        <ChatEntry
+          id={entries.id}
+          sender={entries.sender}
+          body={entries.body}
+          timeStamp={entries.timeStamp}
+          liked={entries.liked}
+          onLiked={props.onLiked}
+        ></ChatEntry>
+      </ul>
+    );
+  });
+
+  return (
+    <section>
+      <ul className="chat-log">
+        {chatentrycomponents}
+      </ul>
+    </section>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string,
+      timeStamp: PropTypes.string.isRequired,
+      liked: PropTypes.bool.isRequired
+    })
+  ).isRequired,
+
+  onLiked: PropTypes.func.isRequired,
+};
+
+export default ChatLog;
\ No newline at end of file

From a867de94ebeff5c758ad0ccf91fda0163f8cd33b Mon Sep 17 00:00:00 2001
From: Leidy <leidymarbu@gmail.com>
Date: Sat, 14 Dec 2024 19:05:04 -0300
Subject: [PATCH 2/5] Implemented wave 3

---
 src/App.jsx                  | 10 +++++++---
 src/components/ChatEntry.css |  3 ++-
 src/components/ChatEntry.jsx | 11 +++++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c1f1c6eb4..bd9adb6d5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,10 +5,10 @@ import messages from './data/messages.json';
 
 
 
-const App = () => {
+function App() {
   const [chatLiked, setChatLiked] = useState(messages);
 
-  const clickLikedButtom = (id) => {
+  const handleLikeButtom = (id) => {
     setChatLiked(chat => {
       return chat.map(chat => {
         if (chat.id === id) {
@@ -26,7 +26,11 @@ const App = () => {
         <h1>Application title</h1>
       </header>
       <main>
-        <div>{<ChatLog entries={chatLiked} onLiked={clickLikedButtom} />}</div>
+        <div>{
+          <ChatLog
+            entries={chatLiked}
+            onLiked={handleLikeButtom} />}
+        </div>
       </main>
 
     </div>
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..d0e8d6539 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,5 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 89c4630c7..3ad18a393 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -2,20 +2,27 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
+
 const ChatEntry = (props) => {
+  const likeButtonCliked = () => {
+    props.onLiked(props.id);
+  };
+
+  const heartColor = props.liked ? '❤️' : '🤍';
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
         <p className="entry-time"><TimeStamp time={props.timeStamp}></TimeStamp></p>
-        <button className="like">🤍</button>
+        <button className='like' onClick={likeButtonCliked}>{heartColor}</button>
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes= {
+ChatEntry.propTypes = {
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string,

From dad1594951b166569994cff3d48097fa7af18454 Mon Sep 17 00:00:00 2001
From: Leidy <leidymarbu@gmail.com>
Date: Mon, 16 Dec 2024 14:22:37 -0300
Subject: [PATCH 3/5] Finish wave3

---
 src/App.css                  |  1 +
 src/App.jsx                  | 33 ++++++++++++++++++++++++++++-----
 src/components/ChatEntry.jsx |  6 ++++--
 src/components/ChatLog.jsx   |  4 +++-
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/App.css b/src/App.css
index d97beb4e6..f56752a0a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,6 +28,7 @@
 
 #App header section {
   background-color: #e0ffff;
+  color: black;
 }
 
 #App .widget {
diff --git a/src/App.jsx b/src/App.jsx
index bd9adb6d5..e536a3d08 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,10 +6,10 @@ import messages from './data/messages.json';
 
 
 function App() {
-  const [chatLiked, setChatLiked] = useState(messages);
+  const [chat, setChat] = useState(messages);
 
   const handleLikeButtom = (id) => {
-    setChatLiked(chat => {
+    setChat(chat => {
       return chat.map(chat => {
         if (chat.id === id) {
           return { ...chat, liked: !chat.liked };
@@ -20,16 +20,39 @@ function App() {
     });
   };
 
+  const calculateTotalLikeCount = (chat) => {
+    return chat.reduce((total, chat) => {
+      return total + (chat.liked ? 1 : 0);
+    }, 0);
+  };
+
+  const totalLikes = calculateTotalLikeCount(chat);
+  const localSender = messages[0].sender;
+  let remoteSender = 'Unknown';
+
+  for (const message of messages) {
+    if (message.sender !== localSender) {
+      remoteSender = message.sender;
+      break; // Stop once other sender is found
+    }
+  }
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Between {localSender} and {remoteSender}</h1>
+        <section>
+          <h1>{totalLikes}❤️`s</h1>
+        </section>
       </header>
       <main>
         <div>{
           <ChatLog
-            entries={chatLiked}
-            onLiked={handleLikeButtom} />}
+            entries={chat}
+            onLiked={handleLikeButtom}
+            localSender={localSender}
+            likes={totalLikes} />}
+
         </div>
       </main>
 
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 3ad18a393..478e59821 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -9,9 +9,10 @@ const ChatEntry = (props) => {
   };
 
   const heartColor = props.liked ? '❤️' : '🤍';
+  const messageClass = props.sender === props.localSender ? 'local' : 'remote';
 
   return (
-    <div className="chat-entry local">
+    <div className={`chat-entry ${messageClass}`}>
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
@@ -28,7 +29,8 @@ ChatEntry.propTypes = {
   body: PropTypes.string,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
-  onLiked: PropTypes.func.isRequired
+  onLiked: PropTypes.func.isRequired,
+  localSender: PropTypes.string.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 73d481486..12d4d576e 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -13,6 +13,7 @@ const ChatLog = (props) => {
           timeStamp={entries.timeStamp}
           liked={entries.liked}
           onLiked={props.onLiked}
+          localSender={props.localSender}
         ></ChatEntry>
       </ul>
     );
@@ -34,11 +35,12 @@ ChatLog.propTypes = {
       sender: PropTypes.string.isRequired,
       body: PropTypes.string,
       timeStamp: PropTypes.string.isRequired,
-      liked: PropTypes.bool.isRequired
+      liked: PropTypes.bool.isRequired,
     })
   ).isRequired,
 
   onLiked: PropTypes.func.isRequired,
+  localSender: PropTypes.string.isRequired,
 };
 
 export default ChatLog;
\ No newline at end of file

From d731bcc9159e51244ff66069d504321940067472 Mon Sep 17 00:00:00 2001
From: Leidy <leidymarbu@gmail.com>
Date: Mon, 16 Dec 2024 14:34:27 -0300
Subject: [PATCH 4/5] fixed rendering for edge cases

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

diff --git a/src/App.jsx b/src/App.jsx
index e536a3d08..3dcca8af5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -42,7 +42,7 @@ function App() {
       <header>
         <h1>Chat Between {localSender} and {remoteSender}</h1>
         <section>
-          <h1>{totalLikes}❤️`s</h1>
+          <h1>{`${totalLikes} ❤️s`}</h1>
         </section>
       </header>
       <main>
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 478e59821..483b5c26e 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -33,4 +33,4 @@ ChatEntry.propTypes = {
   localSender: PropTypes.string.isRequired
 };
 
-export default ChatEntry;
+export default ChatEntry;
\ No newline at end of file

From 751780e31aeb9f154bd9191cf5fe91f1579b97c8 Mon Sep 17 00:00:00 2001
From: Leidy <leidymarbu@gmail.com>
Date: Mon, 16 Dec 2024 15:41:22 -0300
Subject: [PATCH 5/5] move helper functions to the top

---
 src/App.jsx | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 3dcca8af5..898aea08a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,8 +4,24 @@ import ChatLog from './components/ChatLog';
 import messages from './data/messages.json';
 
 
+const calculateTotalLikeCount = (chat) => {
+  return chat.reduce((total, chat) => {
+    return total + (chat.liked ? 1 : 0);
+  }, 0);
+};
+
+const localSender = messages[0].sender;
+let remoteSender = 'Unknown';
+
+for (const message of messages) {
+  if (message.sender !== localSender) {
+    remoteSender = message.sender;
+    break; // Stop once other sender is found
+  }
+}
+
 
-function App() {
+const App =() => {
   const [chat, setChat] = useState(messages);
 
   const handleLikeButtom = (id) => {
@@ -19,24 +35,7 @@ function App() {
       });
     });
   };
-
-  const calculateTotalLikeCount = (chat) => {
-    return chat.reduce((total, chat) => {
-      return total + (chat.liked ? 1 : 0);
-    }, 0);
-  };
-
   const totalLikes = calculateTotalLikeCount(chat);
-  const localSender = messages[0].sender;
-  let remoteSender = 'Unknown';
-
-  for (const message of messages) {
-    if (message.sender !== localSender) {
-      remoteSender = message.sender;
-      break; // Stop once other sender is found
-    }
-  }
-
   return (
     <div id="App">
       <header>