From af28e8ec793a628528ae7921e2658c514cb12781 Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 13:38:21 -0800
Subject: [PATCH 01/11] Wave 01 - added ChatEntry proptypes and used them in
 JSX.used TimeStamp.js for chat time.

---
 src/components/ChatEntry.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..1d5c1116a 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,29 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
+  const chatTime = <TimeStamp time={timeStamp} />;
 
-const ChatEntry = (props) => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div key={id} className="chat-entry local">
+      <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>
-        <button className="like">🤍</button>
+        <p>{body}</p>
+        <p className="entry-time">{chatTime}</p>
+        <button className="like">{liked}🤍</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.bool.isRequired,
 };
 
 export default ChatEntry;

From 716a8eba6166dfa3f1931a6fe3e7593c7ed9859d Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 13:40:17 -0800
Subject: [PATCH 02/11] Wave 01 - Rendered one ChatEntry component in App.js.
 Passing all wave01 tests.

---
 src/App.js | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index c10859093..5ae78ddd7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
 const App = () => {
+  const [chatData, updateChatData] = useState(chatMessages);
+  const likesChanged = (id) => {
+    const chats = chatData.map((chat) => {
+      if (chat.id === id) {
+        chat.liked = !chat.liked;
+      }
+      return chat;
+    });
+    updateChatData(chats);
+  };
   return (
     <div id="App">
-      <header>
-        <h1>Application title</h1>
+      <header id="App header">
+        <h1 id="App h1">Chat between</h1>
       </header>
-      <main>
+      <main id="App main">
+        <div>
+          {
+            <ChatEntry
+              id={chatData[0].id}
+              sender={chatData[0].sender}
+              body={chatData[0].body}
+              timeStamp={chatData[0].timeStamp}
+              liked={chatData[0].liked}
+            />
+          }
+        </div>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>

From ef3445f9d7414c59c8c73c9c59b75ddec4349f7a Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:20:54 -0800
Subject: [PATCH 03/11] Wave 02- added ChatLog.js to map all chats to
 individual ChatEntries.

---
 src/components/ChatLog.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..c53d373ac
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+import './ChatLog.css';
+
+const ChatLog = ({ chats }) => {
+  const getChatLogJSX = (chats) => {
+    return chats.map((chat) => {
+      return (
+        <ChatEntry
+          key={chat.id}
+          id={chat.id}
+          sender={chat.sender}
+          body={chat.body}
+          timeStamp={chat.timeStamp}
+          liked={chat.liked}
+        />
+      );
+    });
+  };
+  return <ul className="chat-log">{getChatLogJSX(chats)}</ul>;
+};
+
+ChatLog.propTypes = {
+  chats: 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,
+};
+
+export default ChatLog;

From a5bef1da08974a0aaa950d5e27eb305606b22764 Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:22:51 -0800
Subject: [PATCH 04/11] Wave 02- changes to App.js to use ChatLog instead of
 ChatEntries.

---
 src/App.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5ae78ddd7..266f7fff3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,17 +21,7 @@ const App = () => {
         <h1 id="App h1">Chat between</h1>
       </header>
       <main id="App main">
-        <div>
-          {
-            <ChatEntry
-              id={chatData[0].id}
-              sender={chatData[0].sender}
-              body={chatData[0].body}
-              timeStamp={chatData[0].timeStamp}
-              liked={chatData[0].liked}
-            />
-          }
-        </div>
+        <div>{<ChatLog chats={chatData} />}</div>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>

From 040197ba37c2856609e3dbbfbcdd5c709855fde9 Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:31:13 -0800
Subject: [PATCH 05/11] Wave02- renamed chats as entries as the tests reference
 that. All wave02 tests are now passing.

---
 src/App.js                |  2 +-
 src/components/ChatLog.js | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 266f7fff3..aa61b6cee 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,7 @@ const App = () => {
         <h1 id="App h1">Chat between</h1>
       </header>
       <main id="App main">
-        <div>{<ChatLog chats={chatData} />}</div>
+        <div>{<ChatLog entries={chatData} />}</div>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index c53d373ac..a0318adb0 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 import './ChatLog.css';
 
-const ChatLog = ({ chats }) => {
-  const getChatLogJSX = (chats) => {
-    return chats.map((chat) => {
+const ChatLog = ({ entries }) => {
+  const getChatLogJSX = (entries) => {
+    return entries.map((chat) => {
       return (
         <ChatEntry
           key={chat.id}
@@ -18,11 +18,11 @@ const ChatLog = ({ chats }) => {
       );
     });
   };
-  return <ul className="chat-log">{getChatLogJSX(chats)}</ul>;
+  return <ul className="chat-log">{getChatLogJSX(entries)}</ul>;
 };
 
 ChatLog.propTypes = {
-  chats: PropTypes.arrayOf(
+  entries: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number.isRequired,
       sender: PropTypes.string.isRequired,

From f3b8616c5100ead308dcb82ba28b8e63a41a4dc3 Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 17:21:31 -0800
Subject: [PATCH 06/11] Wave 03 - passing down updateLikes callback function as
 a prop to ChatEntry.js.

---
 src/App.js                  |  7 ++-----
 src/components/ChatEntry.js | 12 +++++++++---
 src/components/ChatLog.js   |  8 +++++---
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index aa61b6cee..520f78bbf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
 const App = () => {
   const [chatData, updateChatData] = useState(chatMessages);
-  const likesChanged = (id) => {
+  const updateLikes = (id) => {
     const chats = chatData.map((chat) => {
       if (chat.id === id) {
         chat.liked = !chat.liked;
@@ -21,9 +20,7 @@ const App = () => {
         <h1 id="App h1">Chat between</h1>
       </header>
       <main id="App main">
-        <div>{<ChatLog entries={chatData} />}</div>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <div>{<ChatLog entries={chatData} onUpdateLikes={updateLikes} />}</div>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 1d5c1116a..884d819fb 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,16 +3,21 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => {
   const chatTime = <TimeStamp time={timeStamp} />;
-
+  const updateLikes = () => {
+    onUpdateLikes(id);
+    console.log(`Updating likes for ${sender}`);
+  };
   return (
     <div key={id} className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
         <p className="entry-time">{chatTime}</p>
-        <button className="like">{liked}🤍</button>
+        <button onClick={updateLikes} className="like">
+          {liked}🤍
+        </button>
       </section>
     </div>
   );
@@ -24,6 +29,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
+  onUpdateLikes: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index a0318adb0..a7cc54efa 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 import './ChatLog.css';
 
-const ChatLog = ({ entries }) => {
-  const getChatLogJSX = (entries) => {
+const ChatLog = ({ entries, onUpdateLikes }) => {
+  const getChatLogJSX = (entries, onUpdateLikes) => {
     return entries.map((chat) => {
       return (
         <ChatEntry
@@ -14,11 +14,12 @@ const ChatLog = ({ entries }) => {
           body={chat.body}
           timeStamp={chat.timeStamp}
           liked={chat.liked}
+          onUpdateLikes={onUpdateLikes}
         />
       );
     });
   };
-  return <ul className="chat-log">{getChatLogJSX(entries)}</ul>;
+  return <ul className="chat-log">{getChatLogJSX(entries, onUpdateLikes)}</ul>;
 };
 
 ChatLog.propTypes = {
@@ -31,6 +32,7 @@ ChatLog.propTypes = {
       liked: PropTypes.bool.isRequired,
     })
   ).isRequired,
+  onUpdateLikes: PropTypes.func.isRequired,
 };
 
 export default ChatLog;

From 3a4d90b9a76465276c573e130f38cade03164799 Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 20:17:19 -0800
Subject: [PATCH 07/11] Wave03 - added functionality to click on heart to
 change color.

---
 src/components/ChatEntry.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 884d819fb..51ae5aef3 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => {
   const chatTime = <TimeStamp time={timeStamp} />;
-  const updateLikes = () => {
+
+  const updateLikes = (id) => {
     onUpdateLikes(id);
-    console.log(`Updating likes for ${sender}`);
   };
+  const heartLiked = liked ? '❤️' : '🤍';
   return (
     <div key={id} className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
         <p className="entry-time">{chatTime}</p>
-        <button onClick={updateLikes} className="like">
-          {liked}🤍
+        <button
+          onClick={() => {
+            updateLikes(id);
+          }}
+          className="like"
+        >
+          {heartLiked}
         </button>
       </section>
     </div>

From 91fd0b504ddc990f8572ee15cd2815824692ef2f Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 23:02:47 -0800
Subject: [PATCH 08/11] Wave03 - implemented totalLikes function to display
 number of hearts on top.

---
 src/App.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 520f78bbf..61bd5e735 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,10 +14,26 @@ const App = () => {
     });
     updateChatData(chats);
   };
+  const totalLikes = () => {
+    let total = 0;
+    for (let chat of chatData) {
+      if (chat.liked === true) {
+        total += 1;
+      }
+    }
+    return total;
+  };
   return (
     <div id="App">
       <header id="App header">
-        <h1 id="App h1">Chat between</h1>
+        <h1 id="App h1">
+          Chat between {chatData[0].sender} and {chatData[1].sender}
+        </h1>
+        <section id="App header section">
+          <h2 id="heartWidget" className="widget">
+            <span id="App span">{totalLikes()}❤️s</span>
+          </h2>
+        </section>
       </header>
       <main id="App main">
         <div>{<ChatLog entries={chatData} onUpdateLikes={updateLikes} />}</div>

From b8e646eceef15bd02360f5660db430635cf93cdd Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Tue, 31 Jan 2023 23:31:34 -0800
Subject: [PATCH 09/11] Optional enhancements - seperating local and remote
 messages on left and right side.

---
 src/components/ChatEntry.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 51ae5aef3..46620adea 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,13 +5,14 @@ import TimeStamp from './TimeStamp';
 
 const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => {
   const chatTime = <TimeStamp time={timeStamp} />;
-
+  const localOrRemote = id % 2 === 0 ? 'remote' : 'local';
   const updateLikes = (id) => {
     onUpdateLikes(id);
   };
   const heartLiked = liked ? '❤️' : '🤍';
+
   return (
-    <div key={id} className="chat-entry local">
+    <div key={id} className={`chat-entry ${localOrRemote}`}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>

From 4e10dc10df1d65b5509f44cba9cb2a2bb21ab82e Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Wed, 1 Feb 2023 10:43:09 -0800
Subject: [PATCH 10/11] Wave03 - made some changes to make the tests pass.

---
 src/App.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 61bd5e735..759f71605 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,9 @@ const App = () => {
   const updateLikes = (id) => {
     const chats = chatData.map((chat) => {
       if (chat.id === id) {
-        chat.liked = !chat.liked;
+        const newChat = { ...chat };
+        newChat.liked = !newChat.liked;
+        return newChat;
       }
       return chat;
     });
@@ -31,7 +33,7 @@ const App = () => {
         </h1>
         <section id="App header section">
           <h2 id="heartWidget" className="widget">
-            <span id="App span">{totalLikes()}❤️s</span>
+            <span id="App span">{totalLikes()} ❤️s</span>
           </h2>
         </section>
       </header>

From bef256200436caa8875d7216ff0b0716e56a9a5e Mon Sep 17 00:00:00 2001
From: Soumya Sah <85212732+smysh@users.noreply.github.com>
Date: Wed, 1 Feb 2023 10:54:34 -0800
Subject: [PATCH 11/11] remove isRequired from props that are not required by
 tests.

---
 src/components/ChatEntry.js | 8 ++++----
 src/components/ChatLog.js   | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 46620adea..80e84669e 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
@@ -31,12 +31,12 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => {
 };
 
 ChatEntry.propTypes = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.number,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired,
-  onUpdateLikes: PropTypes.func.isRequired,
+  liked: PropTypes.bool,
+  onUpdateLikes: PropTypes.func,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index a7cc54efa..7e029a2d8 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -25,14 +25,14 @@ const ChatLog = ({ entries, onUpdateLikes }) => {
 ChatLog.propTypes = {
   entries: PropTypes.arrayOf(
     PropTypes.shape({
-      id: PropTypes.number.isRequired,
+      id: PropTypes.number,
       sender: PropTypes.string.isRequired,
       body: PropTypes.string.isRequired,
       timeStamp: PropTypes.string.isRequired,
-      liked: PropTypes.bool.isRequired,
+      liked: PropTypes.bool,
     })
   ).isRequired,
-  onUpdateLikes: PropTypes.func.isRequired,
+  onUpdateLikes: PropTypes.func,
 };
 
 export default ChatLog;