From 79f9fe023c161c9ab952068c76eb8fe758012b36 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sat, 8 Jul 2023 22:24:27 -0600
Subject: [PATCH 01/11] rendered one ChatEntry component and imported ChatEntry
 in App.js

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

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

From 609636f17676de4b80b5e770d7a21e6fa0563d8a Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sat, 8 Jul 2023 22:34:21 -0600
Subject: [PATCH 02/11] imported TimeStamp, added propTypes to ChatEntry, and
 passed props into ChatEntry

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..04afa3c05 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp.js';
 
 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"><TimeStamp time={props.timeStamp}/></p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -17,6 +18,11 @@ const ChatEntry = (props) => {
 
 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 e5713dd6f47e8f4440ee632aa74016560d1f1e17 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sat, 8 Jul 2023 22:42:12 -0600
Subject: [PATCH 03/11] changed rendering of ChatEntry to ChatLog in App.js

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

diff --git a/src/App.js b/src/App.js
index f7e974313..9cec9c88b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,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 (
@@ -10,7 +10,7 @@ const App = () => {
         <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
-        <ChatEntry entries={chatMessages}/>
+        <ChatLog entries={chatMessages}/>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>

From 8723c1d661e0e98c6c93771e10332e29e6c1d84a Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sat, 8 Jul 2023 23:02:24 -0600
Subject: [PATCH 04/11] created Chatlog component

---
 src/components/ChatLog.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 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..06c21b400
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import ChatEntry from './ChatEntry.js';
+import PropTypes from 'prop-types';
+import './ChatLog.css';
+
+const ChatLog = ({ entries }) => {
+    return entries.map((entry) => {
+        return (
+            <ChatEntry
+                id={entry.id}
+                sender={entry.sender}
+                body={entry.body}
+                liked={entry.liked}
+                timeStamp={entry.timeStamp}
+            />
+        );
+    });
+};
+
+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,
+        })
+    ),
+};
+
+export default ChatLog;
\ No newline at end of file

From ae3fbf32293a98c3add440f159ca46d70501d27f Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 00:20:02 -0600
Subject: [PATCH 05/11] set-up state handling for like button in App.js

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

diff --git a/src/App.js b/src/App.js
index 9cec9c88b..e3dc44147 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,15 +2,29 @@ import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 const App = () => {
+  const [chatDATA, setchatDATA] = useState(chatMessages);
+  const updateChat = (updatedEntry) => {
+    setchatDATA((prev) => {
+      return prev.map((entry) => {
+        if (entry.id === updatedEntry.id) {
+          return updatedEntry;
+        } else {
+          return entry;
+        }
+      });
+    });
+  };
+
   return (
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
-        <ChatLog entries={chatMessages}/>
+        <ChatLog entries={chatDATA} onLikeMessage={updateChat}/>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
@@ -18,4 +32,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file

From 0fda4da2fc1ff031d1becd7bcdc728b0c7e5c8d1 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 00:30:55 -0600
Subject: [PATCH 06/11] set-up event handling for like button in ChatEntry.js

---
 src/components/ChatEntry.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 04afa3c05..8607da0b3 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,13 +4,27 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp.js';
 
 const ChatEntry = (props) => {
+
+  const onLikeBtnClick = () => {
+    const updatedEntry = {
+      id: props.id,
+      sender: props.sender,
+      body: props.body,
+      timeStamp: props.timeStamp,
+      liked: !props.liked
+    }
+    props.onUpdate(updatedEntry)
+  }
+  
+  const heartStatus = props.liked ? '❤️' : '🤍';
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
         <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
-        <button className="like">🤍</button>
+        <button className="like" onClick={onLikeBtnClick}>{heartStatus}</button>
       </section>
     </div>
   );

From 79877f7bdeec4d4b47f984416087af74cfef9d70 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 00:42:21 -0600
Subject: [PATCH 07/11] set-up event handling for like button in ChatLog.js

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

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 06c21b400..27eecb399 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,8 +3,8 @@ import ChatEntry from './ChatEntry.js';
 import PropTypes from 'prop-types';
 import './ChatLog.css';
 
-const ChatLog = ({ entries }) => {
-    return entries.map((entry) => {
+const ChatLog = (props) => {
+    return props.map((entry) => {
         return (
             <ChatEntry
                 id={entry.id}
@@ -12,6 +12,7 @@ const ChatLog = ({ entries }) => {
                 body={entry.body}
                 liked={entry.liked}
                 timeStamp={entry.timeStamp}
+                onUpdateEntry={props.onUpdateEntry}
             />
         );
     });
@@ -27,6 +28,7 @@ ChatLog.propTypes = {
             liked: PropTypes.bool.isRequired,
         })
     ),
+    onUpdateEntry: PropTypes.func.isRequired
 };
 
 export default ChatLog;
\ No newline at end of file

From a4f14d623964baf1f83ed7b1dcefba5bec4a15bd Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 01:49:52 -0600
Subject: [PATCH 08/11] fixed bug to pass Wave 1 & 2 tests by re-naming and
 re-aranging onLikeUpdate

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

diff --git a/src/App.js b/src/App.js
index e3dc44147..b62b2f002 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,26 +5,37 @@ import ChatLog from './components/ChatLog';
 import { useState } from 'react';
 
 const App = () => {
+  
   const [chatDATA, setchatDATA] = useState(chatMessages);
+
   const updateChat = (updatedEntry) => {
-    setchatDATA((prev) => {
-      return prev.map((entry) => {
-        if (entry.id === updatedEntry.id) {
-          return updatedEntry;
-        } else {
-          return entry;
-        }
-      });
+    const entries = chatDATA.map(entry => {
+      if (entry.id === updatedEntry.id) {
+        return updatedEntry;
+      } else {
+        return entry;
+      }
     });
+    setchatDATA(entries);
+  };
+
+  const calTotalLikes = (chatDATA) => { 
+    return chatDATA.reduce(
+      (likesCount, entry) => likesCount + entry.liked, 0); 
   };
 
+  const likesCount = calTotalLikes(chatDATA);
+
   return (
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
+        <section>
+          <h2 id='heartWidget' className='widget'>{likesCount} ❤️s</h2>
+        </section>
       </header>
       <main>
-        <ChatLog entries={chatDATA} onLikeMessage={updateChat}/>
+        <ChatLog entries={chatDATA} onLikeUpdate={updateChat}/>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 8607da0b3..8df14f6bb 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,7 +3,7 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp.js';
 
-const ChatEntry = (props) => {
+const ChatEntry = (props, onLikeUpdate) => {
 
   const onLikeBtnClick = () => {
     const updatedEntry = {
@@ -13,9 +13,9 @@ const ChatEntry = (props) => {
       timeStamp: props.timeStamp,
       liked: !props.liked
     }
-    props.onUpdate(updatedEntry)
+    onLikeUpdate(updatedEntry);
   }
-  
+
   const heartStatus = props.liked ? '❤️' : '🤍';
 
   return (
@@ -37,6 +37,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
+  onLikeUpdate: PropTypes.func.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 27eecb399..719bef261 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,8 +3,8 @@ import ChatEntry from './ChatEntry.js';
 import PropTypes from 'prop-types';
 import './ChatLog.css';
 
-const ChatLog = (props) => {
-    return props.map((entry) => {
+const ChatLog = ({ entries, onLikeUpdate }) => {
+    return entries.map((entry) => {
         return (
             <ChatEntry
                 id={entry.id}
@@ -12,7 +12,7 @@ const ChatLog = (props) => {
                 body={entry.body}
                 liked={entry.liked}
                 timeStamp={entry.timeStamp}
-                onUpdateEntry={props.onUpdateEntry}
+                onLikeUpdate={onLikeUpdate}
             />
         );
     });
@@ -28,7 +28,7 @@ ChatLog.propTypes = {
             liked: PropTypes.bool.isRequired,
         })
     ),
-    onUpdateEntry: PropTypes.func.isRequired
+    onLikeUpdate: PropTypes.func.isRequired
 };
 
 export default ChatLog;
\ No newline at end of file

From c7883b437b3121b07e278cd9c53d4ac4e953c2f0 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 22:10:33 -0600
Subject: [PATCH 09/11] fixed bug with onLikeUpdate by updating ChatEntry props

---
 src/App.js                  |  4 ++--
 src/components/ChatEntry.js | 20 ++++++++++----------
 src/components/ChatLog.js   |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index b62b2f002..af53c27d1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ const App = () => {
   
   const [chatDATA, setchatDATA] = useState(chatMessages);
 
-  const updateChat = (updatedEntry) => {
+  const onLikeUpdate = (updatedEntry) => {
     const entries = chatDATA.map(entry => {
       if (entry.id === updatedEntry.id) {
         return updatedEntry;
@@ -35,7 +35,7 @@ const App = () => {
         </section>
       </header>
       <main>
-        <ChatLog entries={chatDATA} onLikeUpdate={updateChat}/>
+        <ChatLog entries={chatDATA} onLikeUpdate={onLikeUpdate}/>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 8df14f6bb..5abeb90a2 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,27 +3,27 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp.js';
 
-const ChatEntry = (props, onLikeUpdate) => {
+const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeUpdate}) => {
 
   const onLikeBtnClick = () => {
     const updatedEntry = {
-      id: props.id,
-      sender: props.sender,
-      body: props.body,
-      timeStamp: props.timeStamp,
-      liked: !props.liked
+      id: id,
+      sender: sender,
+      body: body,
+      timeStamp: timeStamp,
+      liked: !liked
     }
     onLikeUpdate(updatedEntry);
   }
 
-  const heartStatus = props.liked ? '❤️' : '🤍';
+  const heartStatus = liked ? '❤️' : '🤍';
 
   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"><TimeStamp time={props.timeStamp}/></p>
+        <p>{body}</p>
+        <p className="entry-time"><TimeStamp time={timeStamp}/></p>
         <button className="like" onClick={onLikeBtnClick}>{heartStatus}</button>
       </section>
     </div>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 719bef261..5dce7e691 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,7 +3,7 @@ import ChatEntry from './ChatEntry.js';
 import PropTypes from 'prop-types';
 import './ChatLog.css';
 
-const ChatLog = ({ entries, onLikeUpdate }) => {
+const ChatLog = ({entries, onLikeUpdate}) => {
     return entries.map((entry) => {
         return (
             <ChatEntry

From 425ecf3cae97527111b93e3164f9adcc58a126e8 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 22:37:26 -0600
Subject: [PATCH 10/11] assigned chat entries as either local or remote

---
 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 5abeb90a2..69a3978e5 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -17,9 +17,10 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeUpdate}) => {
   }
 
   const heartStatus = liked ? '❤️' : '🤍';
+  const remoteStatus = sender === 'Estragon' ? 'remote' : 'local';
 
   return (
-    <div className="chat-entry local">
+    <div className={`chat-entry ${remoteStatus}`}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
@@ -40,4 +41,4 @@ ChatEntry.propTypes = {
   onLikeUpdate: PropTypes.func.isRequired
 };
 
-export default ChatEntry;
+export default ChatEntry;
\ No newline at end of file

From 1e821d1533daf77d29696c04bc468fe8503c8fe4 Mon Sep 17 00:00:00 2001
From: Angie Tran <tranangiekim@gmail.com>
Date: Sun, 9 Jul 2023 22:51:10 -0600
Subject: [PATCH 11/11] fixed console.error by making onLikeUpdate not required
 and added key to ChatEntry

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 69a3978e5..4c226de70 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -38,7 +38,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
-  onLikeUpdate: PropTypes.func.isRequired
+  onLikeUpdate: PropTypes.func
 };
 
 export default ChatEntry;
\ No newline at end of file
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 5dce7e691..05998c757 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -7,6 +7,7 @@ const ChatLog = ({entries, onLikeUpdate}) => {
     return entries.map((entry) => {
         return (
             <ChatEntry
+                key={entry.id}
                 id={entry.id}
                 sender={entry.sender}
                 body={entry.body}
@@ -28,7 +29,7 @@ ChatLog.propTypes = {
             liked: PropTypes.bool.isRequired,
         })
     ),
-    onLikeUpdate: PropTypes.func.isRequired
+    onLikeUpdate: PropTypes.func
 };
 
 export default ChatLog;
\ No newline at end of file