From 3101aa6f86e1e7fc5e1318af627ee6e253425b05 Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Wed, 11 Dec 2024 09:23:08 -0800
Subject: [PATCH 1/8] wave 1 and wave 2 tests passing

---
 src/App.jsx                  | 23 +++++++++++++----------
 src/components/ChatEntry.jsx | 28 ++++++++++++++++++----------
 src/components/ChatLog.jsx   | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 20 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684..6204ec93 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,19 @@
 import './App.css';
+import messageData from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
-const App = () => {
+function App () {
   return (
-    <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
-      <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-      </main>
-    </div>
+    <>
+      <div id="App">
+        <header>
+          <h1>ChatLog</h1>
+        </header>
+        <main>
+          <ChatLog entries = {messageData}/>
+        </main>
+      </div>
+    </>
   );
 };
 
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96..8df2af95 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,20 +1,28 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = () => {
+const ChatEntry = ({sender, body, timeStamp}) => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
-      <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
-        <button className="like">🤍</button>
-      </section>
-    </div>
+    <>
+      <div className="chat-entry local">
+        <h2 className="entry-name">{sender}</h2>
+        <section className="entry-bubble">
+          <p>{body}</p>
+          <p className="entry-time">
+            <TimeStamp time = {timeStamp} />
+          </p>
+          <button className="like">🤍</button>
+        </section>
+      </div>
+    </>
   );
 };
 
 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 00000000..d6479e65
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,34 @@
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = ({entries}) => {
+  const chatEntryComponents = entries.map((chatEntry) => {
+    return (
+      <ChatEntry
+        key={chatEntry.id}
+        sender={chatEntry.sender}
+        body={chatEntry.body}
+        timeStamp={chatEntry.timeStamp}>
+      </ChatEntry>
+    );
+  });
+
+  return (
+    <div className='chat-log'>
+      {chatEntryComponents}
+    </div>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};
+
+export default ChatLog;
\ No newline at end of file

From f40e0076a32e6e4c427a486e3df71b55fe94b9fc Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Thu, 12 Dec 2024 14:07:03 -0800
Subject: [PATCH 2/8] all waves passing + messages are displayed on different
 sides of the screen

---
 src/App.jsx                  | 30 ++++++++++++++++++++++++++++--
 src/components/ChatEntry.jsx | 23 +++++++++++++++++++----
 src/components/ChatLog.jsx   | 13 +++++++++----
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6204ec93..b98f48fe 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,42 @@
 import './App.css';
-import messageData from './data/messages.json';
+import Data from './data/messages.json';
 import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 function App () {
+  const [messageData, setMessageData] = useState(Data);
+
+  const handleLiked = (id) => {
+    setMessageData(messageData => messageData.map(message => {
+      if (message.id === id) {
+        return {...message, liked: !message.liked};
+      } else {
+        return message;
+      };
+    }));
+  };
+
+  const calcTotalLiked = (messageData) => {
+    let total = 0;
+    for (const message of messageData) {
+      if (message.liked) {
+        total += 1;
+      }
+    };
+    return total;
+  };
+
+  const totalLiked = calcTotalLiked(messageData);
+
   return (
     <>
       <div id="App">
         <header>
           <h1>ChatLog</h1>
+          <h2>{totalLiked}❤️s</h2>
         </header>
         <main>
-          <ChatLog entries = {messageData}/>
+          <ChatLog entries = {messageData} onLiked={handleLiked}/>
         </main>
       </div>
     </>
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 8df2af95..722e9bd7 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -2,17 +2,29 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({sender, body, timeStamp}) => {
+const ChatEntry = ({sender, body, timeStamp, id, liked, onLiked}) => {
+  const heart = liked ? '❤️' :'🤍' ;
+
+  const localOrRemote = sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+
+  const onLikeClicked = () => {
+    onLiked(id);
+  };
+
   return (
     <>
-      <div className="chat-entry local">
+      <div className={localOrRemote}>
         <h2 className="entry-name">{sender}</h2>
         <section className="entry-bubble">
           <p>{body}</p>
           <p className="entry-time">
             <TimeStamp time = {timeStamp} />
           </p>
-          <button className="like">🤍</button>
+          <button
+          className="like"
+          onClick={onLikeClicked}>
+            {heart}
+          </button>
         </section>
       </div>
     </>
@@ -22,7 +34,10 @@ const ChatEntry = ({sender, body, timeStamp}) => {
 ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.string.isRequired
+  timeStamp: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onLiked: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index d6479e65..49299f22 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -2,14 +2,17 @@ import './ChatLog.css';
 import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
-const ChatLog = ({entries}) => {
+const ChatLog = ({entries, onLiked}) => {
   const chatEntryComponents = entries.map((chatEntry) => {
     return (
       <ChatEntry
         key={chatEntry.id}
         sender={chatEntry.sender}
         body={chatEntry.body}
-        timeStamp={chatEntry.timeStamp}>
+        timeStamp={chatEntry.timeStamp}
+        id={chatEntry.id}
+        liked={chatEntry.liked}
+        onLiked={onLiked}>
       </ChatEntry>
     );
   });
@@ -27,8 +30,10 @@ ChatLog.propTypes = {
       sender: PropTypes.string.isRequired,
       body: PropTypes.string.isRequired,
       timeStamp: PropTypes.string.isRequired,
-    })
-  ).isRequired,
+      id: PropTypes.number.isRequired,
+      liked: PropTypes.bool.isRequired,
+    })).isRequired,
+  onLiked: PropTypes.func.isRequired,
 };
 
 export default ChatLog;
\ No newline at end of file

From d3c6871e22e4af29dc0993e5e3e45897116781a5 Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Thu, 12 Dec 2024 14:42:12 -0800
Subject: [PATCH 3/8] added senders names to the chat heading

---
 src/App.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index b98f48fe..5acf8aed 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,9 +3,12 @@ import Data from './data/messages.json';
 import ChatLog from './components/ChatLog';
 import { useState } from 'react';
 
+
 function App () {
   const [messageData, setMessageData] = useState(Data);
 
+  const senders = [...new Set(Data.map(message => message.sender))];
+
   const handleLiked = (id) => {
     setMessageData(messageData => messageData.map(message => {
       if (message.id === id) {
@@ -32,7 +35,7 @@ function App () {
     <>
       <div id="App">
         <header>
-          <h1>ChatLog</h1>
+          <h1>Chat between {senders[0]} and {senders[1]}</h1>
           <h2>{totalLiked}❤️s</h2>
         </header>
         <main>

From 3a7c37cd4521c0f7363865b9c32006499e2cdb9a Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Mon, 16 Dec 2024 11:59:07 -0500
Subject: [PATCH 4/8] added space in h2 between # and heart

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5acf8aed..c18f4d40 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,7 +36,7 @@ function App () {
       <div id="App">
         <header>
           <h1>Chat between {senders[0]} and {senders[1]}</h1>
-          <h2>{totalLiked}❤️s</h2>
+          <h2>{totalLiked} ❤️s</h2>
         </header>
         <main>
           <ChatLog entries = {messageData} onLiked={handleLiked}/>

From fa32bbf5e70cbe9e13f9353167fdb258b3fa7276 Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Mon, 16 Dec 2024 12:16:44 -0500
Subject: [PATCH 5/8] fixed chatlog to try and get tests on learn to pass

---
 src/components/ChatLog.jsx | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 49299f22..65b69ee8 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -3,23 +3,24 @@ import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
 const ChatLog = ({entries, onLiked}) => {
-  const chatEntryComponents = entries.map((chatEntry) => {
-    return (
-      <ChatEntry
-        key={chatEntry.id}
-        sender={chatEntry.sender}
-        body={chatEntry.body}
-        timeStamp={chatEntry.timeStamp}
-        id={chatEntry.id}
-        liked={chatEntry.liked}
-        onLiked={onLiked}>
-      </ChatEntry>
-    );
-  });
-
+  const chatEntryComponents = (entries) => {
+    return entries.map((chatEntry) => {
+      return (
+        <ChatEntry
+          key={chatEntry.id}
+          sender={chatEntry.sender}
+          body={chatEntry.body}
+          timeStamp={chatEntry.timeStamp}
+          id={chatEntry.id}
+          liked={chatEntry.liked}
+          onLiked={onLiked}>
+        </ChatEntry>
+      );
+    });
+  };
   return (
     <div className='chat-log'>
-      {chatEntryComponents}
+      {chatEntryComponents(entries)}
     </div>
   );
 };

From f85d7d69ba0f92bbb6428711ff4d438a98826551 Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Mon, 16 Dec 2024 12:23:58 -0500
Subject: [PATCH 6/8] took out prop validation for onLiked on chat entry and
 chat log

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

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 722e9bd7..2731d51b 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -37,7 +37,6 @@ ChatEntry.propTypes = {
   timeStamp: PropTypes.string.isRequired,
   id: PropTypes.number.isRequired,
   liked: PropTypes.bool.isRequired,
-  onLiked: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 65b69ee8..2848e222 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -34,7 +34,6 @@ ChatLog.propTypes = {
       id: PropTypes.number.isRequired,
       liked: PropTypes.bool.isRequired,
     })).isRequired,
-  onLiked: PropTypes.func.isRequired,
 };
 
 export default ChatLog;
\ No newline at end of file

From e7ba0f38fbd264907ca25385f42089ab19229ec3 Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Mon, 16 Dec 2024 13:09:42 -0500
Subject: [PATCH 7/8] added onLiked prop type but took out is required

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

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 2731d51b..ce54f8c0 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -21,8 +21,8 @@ const ChatEntry = ({sender, body, timeStamp, id, liked, onLiked}) => {
             <TimeStamp time = {timeStamp} />
           </p>
           <button
-          className="like"
-          onClick={onLikeClicked}>
+            className="like"
+            onClick={onLikeClicked}>
             {heart}
           </button>
         </section>
@@ -37,6 +37,7 @@ ChatEntry.propTypes = {
   timeStamp: PropTypes.string.isRequired,
   id: PropTypes.number.isRequired,
   liked: PropTypes.bool.isRequired,
+  onLiked: PropTypes.func,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 2848e222..853bcf58 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -3,21 +3,20 @@ import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
 const ChatLog = ({entries, onLiked}) => {
-  const chatEntryComponents = (entries) => {
-    return entries.map((chatEntry) => {
-      return (
-        <ChatEntry
-          key={chatEntry.id}
-          sender={chatEntry.sender}
-          body={chatEntry.body}
-          timeStamp={chatEntry.timeStamp}
-          id={chatEntry.id}
-          liked={chatEntry.liked}
-          onLiked={onLiked}>
-        </ChatEntry>
-      );
-    });
-  };
+  const chatEntryComponents = entries.map((chatEntry) => {
+    return (
+      <ChatEntry
+        key={chatEntry.id}
+        sender={chatEntry.sender}
+        body={chatEntry.body}
+        timeStamp={chatEntry.timeStamp}
+        id={chatEntry.id}
+        liked={chatEntry.liked}
+        onLiked={onLiked}>
+      </ChatEntry>
+    );
+  });
+
   return (
     <div className='chat-log'>
       {chatEntryComponents(entries)}
@@ -34,6 +33,7 @@ ChatLog.propTypes = {
       id: PropTypes.number.isRequired,
       liked: PropTypes.bool.isRequired,
     })).isRequired,
+  onLiked: PropTypes.func,
 };
 
 export default ChatLog;
\ No newline at end of file

From c31762997d1d3b2ef02e34c23dae9453fda5c220 Mon Sep 17 00:00:00 2001
From: Beenish <beenishali693@gmail.com>
Date: Mon, 16 Dec 2024 13:11:58 -0500
Subject: [PATCH 8/8] fixed minor error

---
 src/components/ChatLog.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 853bcf58..9ee62ba3 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -19,7 +19,7 @@ const ChatLog = ({entries, onLiked}) => {
 
   return (
     <div className='chat-log'>
-      {chatEntryComponents(entries)}
+      {chatEntryComponents}
     </div>
   );
 };