From 5b8490215d68d84e514d877b27856d223f0be10b Mon Sep 17 00:00:00 2001
From: Diana <diana38974@gmail.com>
Date: Tue, 18 Jul 2023 20:33:52 -0400
Subject: [PATCH 1/6] Updated ChatEntry and App - Wave 01.

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

diff --git a/src/App.js b/src/App.js
index c10859093..170838dcf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,18 @@
 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 Lisa and Olivia</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatEntry></ChatEntry>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..8618f73dc 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 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 +19,9 @@ const ChatEntry = (props) => {
 
 ChatEntry.propTypes = {
   //Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;

From ff8708ebfe312ac43ff0a81da238ad5b17e26aca Mon Sep 17 00:00:00 2001
From: Diana <diana38974@gmail.com>
Date: Sun, 30 Jul 2023 14:14:11 -0400
Subject: [PATCH 2/6] Implemented a ChatLog component.

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

diff --git a/src/App.js b/src/App.js
index 170838dcf..4ae90f4e3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,18 @@
 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>Chat between Lisa and Olivia</h1>
+        <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatEntry></ChatEntry>
+        <ChatLog entries={chatMessages}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 8618f73dc..c99eb9047 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..94a936807
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import './ChatLog.css'; 
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = (props) => {
+    const chatEntryComponents = props.entries.map((entry) => (
+        <ChatEntry
+            key={entry.id}
+            id={entry.id}
+            sender={entry.sender}
+            body={entry.body}
+            timeStamp={entry.timeStamp}
+        />
+    ));
+
+    return (
+        <div>
+            <h1>Conversation</h1>
+            {chatEntryComponents}
+        </div>
+    );
+};
+
+ChatLog.propTypes = {
+    entries: PropTypes.array.isRequired,
+};
+export default ChatLog;
\ No newline at end of file

From 250dd2af6bc93c8681542c9a58d63344617299f3 Mon Sep 17 00:00:00 2001
From: Diana <diana38974@gmail.com>
Date: Sun, 30 Jul 2023 23:41:05 -0400
Subject: [PATCH 3/6] updated componentes to manage a like feature.

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

diff --git a/src/App.js b/src/App.js
index 4ae90f4e3..a49b32e40 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,29 @@
-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 [totalLikes, setTotalLikes] = useState(0);
+
+  const likeChangeHandler = (liked) => {
+    if (liked) {
+      setTotalLikes((prevTotal) => prevTotal + 1);
+    } else {
+      setTotalLikes((prevTotal) => prevTotal - 1);
+    }
+  };
+
   return (
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
+        <p> Total Likes: {totalLikes} ❤️ </p>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatLog entries={chatMessages}/>
+        <ChatLog entries={chatMessages} onLikeChange={likeChangeHandler} />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index c99eb9047..eed129c27 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,14 +4,27 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
+  const [liked, setLiked] = useState(false);
+
+  const likeClickHandler = () => {
+    setLiked((prevLiked) => !prevLiked);
+
+    props.onLikeChange(!liked);
+    
+  };
+
 
   return (
-    <div className="chat-entry local">
+    <div className={ `chat-entry ${liked ? 'liked': ''}`}>
       <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>
+        <p className="entry-time">
+          <TimeStamp time ={props.timeStamp} />
+        </p>
+        <button className="like" onClick={likeClickHandler}> 
+        {liked ? '❤️' : '🤍'}
+        </button>
       </section>
     </div>
   );
@@ -22,6 +35,7 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
+  onLikeChange: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 94a936807..e3d92da80 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 
 const ChatLog = (props) => {
+    // console.log(props.onLikeChange)
     const chatEntryComponents = props.entries.map((entry) => (
         <ChatEntry
             key={entry.id}
@@ -11,6 +12,7 @@ const ChatLog = (props) => {
             sender={entry.sender}
             body={entry.body}
             timeStamp={entry.timeStamp}
+            onLikeChange={props.onLikeChange}
         />
     ));
 
@@ -24,5 +26,7 @@ const ChatLog = (props) => {
 
 ChatLog.propTypes = {
     entries: PropTypes.array.isRequired,
+    onLikeChange: PropTypes.func.isRequired,
 };
+
 export default ChatLog;
\ No newline at end of file

From 33ecccfc7b04a72ae5ae0fb9762ad7edbc8df8cd Mon Sep 17 00:00:00 2001
From: Diana <diana38974@gmail.com>
Date: Mon, 31 Jul 2023 10:13:29 -0400
Subject: [PATCH 4/6] Implemented wave 3, and local and remote changes.

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

diff --git a/src/App.js b/src/App.js
index a49b32e40..a73d97ee8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,7 +18,7 @@ const App = () => {
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
-        <p> Total Likes: {totalLikes} ❤️ </p>
+        <p> {totalLikes} ❤️s</p>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index eed129c27..41f010cf1 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -13,9 +13,11 @@ const ChatEntry = (props) => {
     
   };
 
+  const isLocal = props.sender === 'Vladimir';
+  const entryClass = `chat-entry ${isLocal ? 'local': 'remote'}`;
 
   return (
-    <div className={ `chat-entry ${liked ? 'liked': ''}`}>
+    <div className={entryClass}>
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>

From cc4d29653a5bb01c4c1b57dc04c7e26b3868900e Mon Sep 17 00:00:00 2001
From: Diana <diana38974@gmail.com>
Date: Mon, 31 Jul 2023 14:09:28 -0400
Subject: [PATCH 5/6] modifying Chatlog, adding an empty function.

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

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index e3d92da80..9b05b87f8 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -5,6 +5,7 @@ import ChatEntry from './ChatEntry';
 
 const ChatLog = (props) => {
     // console.log(props.onLikeChange)
+
     const chatEntryComponents = props.entries.map((entry) => (
         <ChatEntry
             key={entry.id}
@@ -29,4 +30,9 @@ ChatLog.propTypes = {
     onLikeChange: PropTypes.func.isRequired,
 };
 
+
+ChatLog.defaultProps = {
+    onLikeChange: () => {},
+};
+
 export default ChatLog;
\ No newline at end of file

From 5ed7d17084600969bcdeca0de48191dbd24c0770 Mon Sep 17 00:00:00 2001
From: Diana <diana38974@gmail.com>
Date: Mon, 31 Jul 2023 14:15:41 -0400
Subject: [PATCH 6/6] removed function in Chatlog.

---
 src/components/ChatLog.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 9b05b87f8..ddcfceafe 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -30,9 +30,4 @@ ChatLog.propTypes = {
     onLikeChange: PropTypes.func.isRequired,
 };
 
-
-ChatLog.defaultProps = {
-    onLikeChange: () => {},
-};
-
 export default ChatLog;
\ No newline at end of file