From d7aefa2b2d5a81b6eda2ccdfff8fa55ff632b067 Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Fri, 16 Dec 2022 12:59:03 -0500
Subject: [PATCH 1/8] added passing props to ChatEntry

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

diff --git a/src/App.js b/src/App.js
index c10859093..c0e7f4c33 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
 
 const App = () => {
   return (
@@ -11,6 +12,11 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatEntry
+          sender="Vladimir"
+          body="why are you arguing with me"
+          timeStamp="2018-05-29T22:49:06+00:00"
+        ></ChatEntry>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..5a5fba0ed 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 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>
@@ -16,7 +16,9 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  sender: PropTypes.string,
+  body: PropTypes.string,
+  timeStamp: PropTypes.string,
 };
 
 export default ChatEntry;

From 621cb09b9f520ca4f740eab90f4a0569d827b6b9 Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Fri, 16 Dec 2022 13:03:31 -0500
Subject: [PATCH 2/8] fixed time stamp

added TimeStamp component into ChatEntry, passing in props.timeStamp
---
 src/components/ChatEntry.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 5a5fba0ed..ace413c90 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   return (
@@ -8,7 +9,9 @@ const ChatEntry = (props) => {
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
-        <p className="entry-time">{props.timeStamp}</p>
+        <p className="entry-time">
+          <TimeStamp time={props.timeStamp}></TimeStamp>
+        </p>
         <button className="like">🤍</button>
       </section>
     </div>

From bf4e8ccb1e5d860f92933a9d37835c1a94deddc0 Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Sun, 18 Dec 2022 15:16:48 -0500
Subject: [PATCH 3/8] created ChatLog.js

---
 src/components/ChatLog.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 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..e69de29bb

From 1a62607e71fd818cfe19de65d0b19a9baf18eb6d Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Sun, 18 Dec 2022 15:46:54 -0500
Subject: [PATCH 4/8] Wave 02

added propTypes to ChatEntry.js
created working ChatLog component
---
 src/App.js                  |  2 ++
 src/components/ChatEntry.js |  2 ++
 src/components/ChatLog.js   | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+)

diff --git a/src/App.js b/src/App.js
index c0e7f4c33..168287f04 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
   return (
@@ -17,6 +18,7 @@ const App = () => {
           body="why are you arguing with me"
           timeStamp="2018-05-29T22:49:06+00:00"
         ></ChatEntry>
+        <ChatLog entries={chatMessages}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index ace413c90..ff4b8cbff 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -19,9 +19,11 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
+  id: PropTypes.number,
   sender: PropTypes.string,
   body: PropTypes.string,
   timeStamp: PropTypes.string,
+  liked: PropTypes.bool,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index e69de29bb..79c9d5cc2 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import './ChatLog.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry.js';
+
+const ChatLog = ({ entries }) => {
+  const getChatLogJSX = (entries) => {
+    return entries.map((entry) => {
+      return (
+        <ChatEntry
+          id={entry.id}
+          sender={entry.sender}
+          body={entry.body}
+          timeStamp={entry.timeStamp}
+          liked={entry.liked}
+        />
+      );
+    });
+  };
+  return <ul class-name="chat-log">{getChatLogJSX(entries)}</ul>;
+};
+
+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,
+};
+
+export default ChatLog;

From a6cdbdf60eda76874175c580582f3ac6d3f4b8d5 Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Sun, 18 Dec 2022 15:51:29 -0500
Subject: [PATCH 5/8] refactored ChatEntry to use class 'local'/'remote'

---
 src/App.js                  | 5 -----
 src/components/ChatEntry.js | 3 ++-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 168287f04..d1bc1ca4c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,11 +13,6 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatEntry
-          sender="Vladimir"
-          body="why are you arguing with me"
-          timeStamp="2018-05-29T22:49:06+00:00"
-        ></ChatEntry>
         <ChatLog entries={chatMessages}></ChatLog>
       </main>
     </div>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index ff4b8cbff..122496288 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,8 +4,9 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
+  const source = props.sender === 'Vladimir' ? 'local' : 'remote';
   return (
-    <div className="chat-entry local">
+    <div className={`chat-entry ${source}`}>
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>

From 991675be74ee7e7f925758d10336bb7f3af9e94f Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Sun, 18 Dec 2022 15:52:42 -0500
Subject: [PATCH 6/8] renamed App.js header title

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

diff --git a/src/App.js b/src/App.js
index d1bc1ca4c..c1c6a6296 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
-import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
 
 const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Vladimir and Estragon's Conversation</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component

From 23920490bf5fbcd7e144c7e676ae9f0895595d50 Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Sun, 18 Dec 2022 17:16:02 -0500
Subject: [PATCH 7/8] Wave 03 added like button functionality

---
 src/components/ChatEntry.css |  5 ++++-
 src/components/ChatEntry.js  | 32 ++++++++++++++++++++++++++++++--
 src/components/ChatLog.js    |  1 +
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..8064252ba 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -8,6 +8,9 @@ button {
 	outline: inherit;
 }
 
+button.liked {
+}
+
 .chat-entry {
   margin: 1rem;
 }
@@ -97,4 +100,4 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
\ No newline at end of file
+}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 122496288..a194be10d 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,10 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   const source = props.sender === 'Vladimir' ? 'local' : 'remote';
+  // let isLiked = props.liked;
+  // let heart = 'no-heart';
+
+  // const toggleLikeButton = () => {
+  //   isLiked = !isLiked;
+  //   if (isLiked) {
+  //     heart = 'heart';
+  //   } else {
+  //     heart = 'no-heart';
+  //   }
+  // };
+  const [liked, setLiked] = useState(props.liked);
+  // const buttonClass = liked ? 'liked' : '';
+  const toggleLikeButton = () => {
+    const heart = document.getElementById(props.id);
+    setLiked(!liked);
+    if (liked) {
+      heart.textContent = '🤍';
+    } else {
+      heart.textContent = '❤️';
+    }
+    setLiked(!liked);
+  };
+
+  console.log(props.id);
+
   return (
     <div className={`chat-entry ${source}`}>
       <h2 className="entry-name">{props.sender}</h2>
@@ -13,7 +39,9 @@ const ChatEntry = (props) => {
         <p className="entry-time">
           <TimeStamp time={props.timeStamp}></TimeStamp>
         </p>
-        <button className="like">🤍</button>
+        <button className="like" id={props.id} onClick={toggleLikeButton}>
+          🤍
+        </button>
       </section>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 79c9d5cc2..d7cf2069f 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -8,6 +8,7 @@ const ChatLog = ({ entries }) => {
     return entries.map((entry) => {
       return (
         <ChatEntry
+          key={entry.id}
           id={entry.id}
           sender={entry.sender}
           body={entry.body}

From ce8fc0e2a606af8980b0f46d400f5ece4d6ca28d Mon Sep 17 00:00:00 2001
From: mhc <mhchau0+ada@gmail.com>
Date: Sun, 18 Dec 2022 17:56:29 -0500
Subject: [PATCH 8/8] Wave 03 added like count

Tracks current number of likes on page, will decrement when unliked
---
 src/App.js                  | 12 ++++++++++--
 src/components/ChatEntry.js | 17 ++---------------
 src/components/ChatLog.js   | 31 +++++++++++++++----------------
 3 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/App.js b/src/App.js
index c1c6a6296..094309c64 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
 const App = () => {
+  const [likeCount, setLikeCount] = useState(0);
+  const updateLikeCount = (increment) => {
+    setLikeCount(likeCount + increment);
+  };
   return (
     <div id="App">
       <header>
         <h1>Vladimir and Estragon's Conversation</h1>
+        <h2>{`${likeCount} ❤️s`}</h2>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatLog entries={chatMessages}></ChatLog>
+        <ChatLog
+          entries={chatMessages}
+          onUpdateLikeCount={updateLikeCount}
+        ></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index a194be10d..b53a215f2 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,32 +5,19 @@ import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   const source = props.sender === 'Vladimir' ? 'local' : 'remote';
-  // let isLiked = props.liked;
-  // let heart = 'no-heart';
-
-  // const toggleLikeButton = () => {
-  //   isLiked = !isLiked;
-  //   if (isLiked) {
-  //     heart = 'heart';
-  //   } else {
-  //     heart = 'no-heart';
-  //   }
-  // };
   const [liked, setLiked] = useState(props.liked);
-  // const buttonClass = liked ? 'liked' : '';
   const toggleLikeButton = () => {
     const heart = document.getElementById(props.id);
     setLiked(!liked);
     if (liked) {
       heart.textContent = '🤍';
+      props.onUpdate(-1);
     } else {
       heart.textContent = '❤️';
+      props.onUpdate(1);
     }
     setLiked(!liked);
   };
-
-  console.log(props.id);
-
   return (
     <div className={`chat-entry ${source}`}>
       <h2 className="entry-name">{props.sender}</h2>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index d7cf2069f..63fcc0e28 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,22 +3,21 @@ import './ChatLog.css';
 import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry.js';
 
-const ChatLog = ({ entries }) => {
-  const getChatLogJSX = (entries) => {
-    return entries.map((entry) => {
-      return (
-        <ChatEntry
-          key={entry.id}
-          id={entry.id}
-          sender={entry.sender}
-          body={entry.body}
-          timeStamp={entry.timeStamp}
-          liked={entry.liked}
-        />
-      );
-    });
-  };
-  return <ul class-name="chat-log">{getChatLogJSX(entries)}</ul>;
+const ChatLog = (props) => {
+  const chatEntryComponents = props.entries.map((entry) => {
+    return (
+      <ChatEntry
+        key={entry.id}
+        id={entry.id}
+        sender={entry.sender}
+        body={entry.body}
+        timeStamp={entry.timeStamp}
+        liked={entry.liked}
+        onUpdate={props.onUpdateLikeCount}
+      />
+    );
+  });
+  return <ul class-name="chat-log">{chatEntryComponents}</ul>;
 };
 
 ChatLog.propTypes = {