From 3a04bcf2eb4269ab44f66a897729536aa58da62b Mon Sep 17 00:00:00 2001
From: marjanak <marjana1816@gmail.com>
Date: Wed, 11 Dec 2024 18:31:06 -0800
Subject: [PATCH 1/4] Done with wave1

---
 src/App.jsx                  | 2 ++
 src/components/ChatEntry.jsx | 8 ++++----
 src/components/ChatLog.jsx   | 0
 3 files changed, 6 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..7fa0c898b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 
 const App = () => {
   return (
@@ -9,6 +10,7 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        < ChatEntry />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96b..b4f9104f7 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,12 +1,12 @@
 import './ChatEntry.css';
 
-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">{props.timeStamp}</p>
         <button className="like">🤍</button>
       </section>
     </div>
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 000000000..e69de29bb

From 90c77c8723d7390b71bc31b5ddaf7423a2b79e40 Mon Sep 17 00:00:00 2001
From: marjanak <marjana1816@gmail.com>
Date: Wed, 11 Dec 2024 19:34:16 -0800
Subject: [PATCH 2/4] Wave2

---
 src/App.jsx                |  5 ++++-
 src/components/ChatLog.jsx | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7fa0c898b..1b25cf246 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,7 @@
 import './App.css';
 import ChatEntry from './components/ChatEntry';
-
+import ChatLog from './components/ChatLog';
+import chatdata from './data/messages.json';
 const App = () => {
   return (
     <div id="App">
@@ -11,6 +12,8 @@ const App = () => {
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
         < ChatEntry />
+        <ChatLog entries={chatdata} />
+
       </main>
     </div>
   );
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index e69de29bb..ffce4eaee 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,24 @@
+import ChatEntry from './ChatEntry';
+
+const ChatLog = (props) => {
+  const chatComponents = props.entries.map((chat,i) => {
+    return (
+      <li key={i}>
+				 <ChatEntry
+				   id={chat.id}
+				   sender={chat.sender}
+				   body={chat.body}
+				   timeStamp={chat.timeStamp}
+				 />
+      </li>
+    );
+  });
+
+  return (
+	  <>
+		  {chatComponents}
+	  </>
+  );
+};
+
+export default ChatLog;
\ No newline at end of file

From 5db9d5b447f32a0d32519f6073c859d2d80c9c42 Mon Sep 17 00:00:00 2001
From: marjanak <marjana1816@gmail.com>
Date: Sun, 15 Dec 2024 16:22:50 -0800
Subject: [PATCH 3/4] Fixed wave 1 amd 2 and added PropTypes

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

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index b4f9104f7..66f2323a6 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,12 +1,16 @@
 import './ChatEntry.css';
+import TimeStamp from './TimeStamp';
+import PropTypes from 'prop-types';
 
-const ChatEntry = (props) => {
+const ChatEntry = ({sender,body,timeStamp}) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">{props.sender}</h2>
+      <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
-        <p> {props.body}</p>
-        <p className="entry-time">{props.timeStamp}</p>
+        <p> {body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp}/>
+        </p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -15,6 +19,10 @@ const ChatEntry = (props) => {
 
 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
index ffce4eaee..2f5216806 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -1,24 +1,34 @@
 import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
 
 const ChatLog = (props) => {
   const chatComponents = props.entries.map((chat,i) => {
     return (
       <li key={i}>
-				 <ChatEntry
-				   id={chat.id}
-				   sender={chat.sender}
-				   body={chat.body}
-				   timeStamp={chat.timeStamp}
-				 />
+	  <ChatEntry
+		  id={chat.id}
+		  sender={chat.sender}
+		  body={chat.body}
+		  timeStamp={chat.timeStamp}
+		 />
       </li>
     );
   });
 
   return (
-	  <>
-		  {chatComponents}
-	  </>
+    <>
+      {chatComponents}
+    </>
   );
 };
 
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.shape({
+    sender: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    timeStamp: PropTypes.string.isRequired,
+
+}))
+};
+
 export default ChatLog;
\ No newline at end of file

From 142f29d7988187a26637041065306aab2fc689fc Mon Sep 17 00:00:00 2001
From: marjanak <marjana1816@gmail.com>
Date: Mon, 16 Dec 2024 08:01:00 -0800
Subject: [PATCH 4/4] Done with wave3

---
 src/App.jsx                  | 25 +++++++++++++++++--------
 src/components/ChatEntry.jsx | 10 ++++++----
 src/components/ChatLog.jsx   | 15 +++++++++------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1b25cf246..598e8249c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,19 +1,28 @@
 import './App.css';
-import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
-import chatdata from './data/messages.json';
+import message from './data/messages.json';
+import {useState} from 'react';
+
 const App = () => {
+  const [chatData, setChatData] = useState(message);
+  const togglelikes = (id) => {
+    setChatData( chatData => chatData.map(chat => {
+      if (chat.id === id){
+        return {...chat, liked: !chat.liked};
+      }else {
+        return chat;
+      }
+    }));
+  };
+  const totalLikes = chatData.filter((chat) => chat.liked).length;
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Log</h1>
+        <p>{totalLikes} ❤️s </p>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-        < ChatEntry />
-        <ChatLog entries={chatdata} />
-
+        <ChatLog entries={chatData} chatClicked={togglelikes}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 66f2323a6..c34aeb64f 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -2,7 +2,8 @@ import './ChatEntry.css';
 import TimeStamp from './TimeStamp';
 import PropTypes from 'prop-types';
 
-const ChatEntry = ({sender,body,timeStamp}) => {
+const ChatEntry = ({id,sender,body,timeStamp,liked,chatClicked}) => {
+  const heartColor = liked ? '❤️' : '🤍';
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -11,18 +12,19 @@ const ChatEntry = ({sender,body,timeStamp}) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp}/>
         </p>
-        <button className="like">🤍</button>
+        <button className="like" onClick={() => chatClicked(id)}>{heartColor}</button>
       </section>
     </div>
   );
 };
-
 ChatEntry.propTypes = {
   // Fill with correct proptypes
+  id:  PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-
+  liked: PropTypes.string.isRequired,
+  chatClicked: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 2f5216806..babae8605 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -1,20 +1,22 @@
 import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
+import './ChatLog.css';
 
-const ChatLog = (props) => {
-  const chatComponents = props.entries.map((chat,i) => {
+const ChatLog = ({entries, chatClicked}) => {
+  const chatComponents = entries.map((chat) => {
     return (
-      <li key={i}>
+      <li key={chat.id}>
 	  <ChatEntry
 		  id={chat.id}
 		  sender={chat.sender}
 		  body={chat.body}
 		  timeStamp={chat.timeStamp}
+      chatClicked={chatClicked}
+      liked={chat.liked}
 		 />
       </li>
     );
   });
-
   return (
     <>
       {chatComponents}
@@ -24,11 +26,12 @@ const ChatLog = (props) => {
 
 ChatLog.propTypes = {
   entries: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
     sender: PropTypes.string.isRequired,
     body: PropTypes.string.isRequired,
     timeStamp: PropTypes.string.isRequired,
-
-}))
+  })).isRequired,
+  chatClicked: PropTypes.func.isRequired,
 };
 
 export default ChatLog;
\ No newline at end of file