From 69a40ce8784d50f10b9d9c86ba0a98508f776e56 Mon Sep 17 00:00:00 2001
From: somy <smycho28@gmail.com>
Date: Sun, 15 Dec 2024 22:23:45 -0800
Subject: [PATCH 1/3] wave 1

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

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684..356dfafa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,26 @@
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 
 const App = () => {
+  const chatData =
+  {
+    sender: 'Vladimir',
+    body: 'why are you arguing with me',
+    timeStamp: '2018-05-29T22:49:06+00:00'
+  };
+  const firstChat = chatData[0];
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chatlog</h1>
       </header>
       <main>
+        <ChatEntry
+          sender={firstChat.sender}
+          body={firstChat.body}
+          timeStamp={firstChat.timeStamp}
+        />
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
@@ -14,4 +28,4 @@ const App = () => {
   );
 };
 
-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 15c56f96..1686d842 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,12 +1,18 @@
+import PropTypes from 'prop-types';
+import './components/ChatEntry.css';
 import './ChatEntry.css';
+import TimeStamp from './components/TimeStamp';
 
-const ChatEntry = () => {
+// This is a component
+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 +20,11 @@ const ChatEntry = () => {
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;
+
+

From 2e4aa976718561ed70766eda2dc49034322670a9 Mon Sep 17 00:00:00 2001
From: somy <smycho28@gmail.com>
Date: Mon, 16 Dec 2024 09:07:10 -0800
Subject: [PATCH 2/3] wave 2 & 3

---
 src/App.jsx                  | 31 ++++++++++++++++------------
 src/components/ChatEntry.jsx | 15 +++++++-------
 src/components/ChatLog.jsx   | 40 ++++++++++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 20 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 356dfafa..247ebeaa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,28 +1,33 @@
+import { useState } from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
+import messages from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
-  const chatData =
-  {
-    sender: 'Vladimir',
-    body: 'why are you arguing with me',
-    timeStamp: '2018-05-29T22:49:06+00:00'
+  const [chatMessages, setChatMessages] = useState(messages);
+
+  const toggleLike = (id) => {
+    const updatedMessages = chatMessages.map((message) =>
+      message.id === id ? { ...message, liked: !message.liked } : message
+    );
+    setChatMessages(updatedMessages);
   };
-  const firstChat = chatData[0];
+  const totalLikes = chatMessages.filter((message) => message.liked).length;
+  const person1 = messages[0].sender;
+  const person2 = messages[1].sender;
 
   return (
     <div id="App">
       <header>
         <h1>Chatlog</h1>
+        <h2>{`Chat between ${person1} and ${person2}`}</h2>
+        <p>{totalLikes} ❤️s</p>
       </header>
       <main>
-        <ChatEntry
-          sender={firstChat.sender}
-          body={firstChat.body}
-          timeStamp={firstChat.timeStamp}
+        <ChatLog
+          entries={messages}
+          onToggleLike={toggleLike}
         />
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 1686d842..473712a1 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,28 +1,29 @@
 import PropTypes from 'prop-types';
-import './components/ChatEntry.css';
+import TimeStamp from './TimeStamp';
 import './ChatEntry.css';
-import TimeStamp from './components/TimeStamp';
 
-// This is a component
-const ChatEntry = ({ sender, body, timeStamp }) => {
+const ChatEntry = ({id, sender, body, timeStamp, liked, onToggleLike}) => {
   return (
-    <div className="chat-entry local">
+    <div className= {`chat-entry ${liked ? 'liked' :'local'}`}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
         <p className="entry-time">
-          <TimeStamp time={timeStamp} />
+          <TimeStamp time={timeStamp}/>
         </p>
-        <button className="like">🤍</button>
+        <button className="like" onClick={() => onToggleLike(id)}>🤍</button>
       </section>
     </div>
   );
 };
 
 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;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 00000000..25e97d0e
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry.jsx';
+import './ChatLog.css';
+
+const ChatLog = ({ entries, onToggleLike }) => {
+  const chatEntryComponents = entries.map((entry) => {
+    return (
+      <ChatEntry
+        id={entry.id}
+        sender={entry.sender}
+        body={entry.body}
+        timeStamp={entry.timeStamp}
+        liked={entry.liked}
+        onToggleLike={onToggleLike}
+        key={entry.id}
+      />
+    );
+  });
+
+  return (
+    <div className="chat-log">
+      {chatEntryComponents}
+    </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,
+  onToggleLike: PropTypes.func.isRequired,
+};
+
+export default ChatLog;

From 5bd52b225002665efa51e4726904cb933300f244 Mon Sep 17 00:00:00 2001
From: somy <smycho28@gmail.com>
Date: Mon, 16 Dec 2024 09:19:40 -0800
Subject: [PATCH 3/3] fixed onToggleLike function to correctly show likes

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

diff --git a/src/App.jsx b/src/App.jsx
index 247ebeaa..a5b5f1f3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,12 +6,16 @@ import ChatLog from './components/ChatLog';
 const App = () => {
   const [chatMessages, setChatMessages] = useState(messages);
 
-  const toggleLike = (id) => {
-    const updatedMessages = chatMessages.map((message) =>
-      message.id === id ? { ...message, liked: !message.liked } : message
+  const handleLikeToggle = (id) => {
+    setChatMessages((prevMessages) =>
+      prevMessages.map((message) =>
+        message.id === id
+          ? { ...message, liked: !message.liked }
+          : message
+      )
     );
-    setChatMessages(updatedMessages);
   };
+
   const totalLikes = chatMessages.filter((message) => message.liked).length;
   const person1 = messages[0].sender;
   const person2 = messages[1].sender;
@@ -25,8 +29,8 @@ const App = () => {
       </header>
       <main>
         <ChatLog
-          entries={messages}
-          onToggleLike={toggleLike}
+          entries={chatMessages}
+          onToggleLike={handleLikeToggle}
         />
       </main>
     </div>
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 473712a1..b3d55714 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -11,7 +11,7 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, onToggleLike}) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp}/>
         </p>
-        <button className="like" onClick={() => onToggleLike(id)}>🤍</button>
+        <button className="like" onClick={() => onToggleLike(id)}>{liked ? '❤️' : '🤍'}</button>
       </section>
     </div>
   );