From ac9769dbf22993e8abe2c669195220715f6ced4b Mon Sep 17 00:00:00 2001
From: Jackie <jackiemay08@gmail.com>
Date: Fri, 23 Jun 2023 10:15:08 -0400
Subject: [PATCH 1/6] Wave 01 completed. Chat Entry and App components updated
 to display a single message

---
 src/App.js                  |  8 +++++++-
 src/components/ChatEntry.js | 13 +++++++++----
 src/components/ChatLog.js   | 23 +++++++++++++++++++++++
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index c1085909..dfc3063b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,22 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry.js';
+import ChatLog from './components/ChatLog.js'
 
 const App = () => {
+  const firstPerson = chatMessages[0].sender
+  const secondPerson = chatMessages[1].sender
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between {firstPerson} and {secondPerson}</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatEntry sender={firstPerson} body={chatMessages[0].body} timeStamp={chatMessages[0].timeStamp}></ChatEntry>
+        {/* <ChatLog></ChatLog> */}
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b..ff0e7c90 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,17 @@
 import React from 'react';
 import './ChatEntry.css';
+import TimeStamp from './TimeStamp.js';
 import PropTypes from 'prop-types';
 
 const ChatEntry = (props) => {
+  const timeEntry=props.timeStamp
   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">Replace with TimeStamp component</p> */}
+        <p className="entry-time"><TimeStamp time={timeEntry}></TimeStamp></p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -16,7 +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;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 00000000..de9c3fd8
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import './ChatLog.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry.js'
+import chatMessages from '/Users/japonte/Developer/projects/react-chatlog/src/data/messages.json';;
+
+const ChatLog = (entries) => {
+    const ChatLogEntries = chatMessages.map((events) => {
+        return (
+            <div>
+                <ChatEntry sender={events.sender} timeStamp={events.timeStamp} body={events.body}></ChatEntry>
+            </div>
+        );
+    });
+    
+    return (
+        <div>
+            {ChatLogEntries}
+        </div>
+    );
+};
+
+export default ChatLog

From 80b45547b92aa893b289063586f1cb6281e3973c Mon Sep 17 00:00:00 2001
From: Jackie <jackiemay08@gmail.com>
Date: Fri, 23 Jun 2023 10:15:50 -0400
Subject: [PATCH 2/6] Wave 02 WIP. Chat Log component added.

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

diff --git a/src/App.js b/src/App.js
index dfc3063b..0cb8db03 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,7 +16,7 @@ const App = () => {
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
         <ChatEntry sender={firstPerson} body={chatMessages[0].body} timeStamp={chatMessages[0].timeStamp}></ChatEntry>
-        {/* <ChatLog></ChatLog> */}
+        <ChatLog></ChatLog>
       </main>
     </div>
   );

From b24cec556de45b7200a4f6a2b47dedef3e5ce900 Mon Sep 17 00:00:00 2001
From: Jackie <jackiemay08@gmail.com>
Date: Fri, 23 Jun 2023 11:49:07 -0400
Subject: [PATCH 3/6] Wave 02 WIP. Chatlog differentiates between local and
 remote entries.

---
 src/App.js                  |  1 -
 src/components/ChatEntry.js | 16 ++++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0cb8db03..e7fe3544 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,6 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatEntry sender={firstPerson} body={chatMessages[0].body} timeStamp={chatMessages[0].timeStamp}></ChatEntry>
         <ChatLog></ChatLog>
       </main>
     </div>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index ff0e7c90..edfe9ca7 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,12 +5,24 @@ import PropTypes from 'prop-types';
 
 const ChatEntry = (props) => {
   const timeEntry=props.timeStamp
+  if (props.sender==='Vladimir') {
+    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={timeEntry}></TimeStamp></p>
+          <button className="like">🤍</button>
+        </section>
+      </div>
+    );
+    };
+
   return (
-    <div className="chat-entry local">
+    <div className="chat-entry remote">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
-        {/* <p className="entry-time">Replace with TimeStamp component</p> */}
         <p className="entry-time"><TimeStamp time={timeEntry}></TimeStamp></p>
         <button className="like">🤍</button>
       </section>

From 5a18708216e36c5d5c77d90bde1fe6873945f09f Mon Sep 17 00:00:00 2001
From: Jackie <jackiemay08@gmail.com>
Date: Mon, 26 Jun 2023 16:34:40 -0400
Subject: [PATCH 4/6] Wave 3 WIP. Lifted and handled state. Added like count.

---
 src/App.js                  | 36 ++++++++++++++++++++++++++++++++----
 src/components/ChatEntry.js | 23 +++++++++++++++++++++--
 src/components/ChatLog.js   | 29 ++++++++++++++++++++++++-----
 3 files changed, 77 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index e7fe3544..7bc81994 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,49 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatEntry from './components/ChatEntry.js';
 import ChatLog from './components/ChatLog.js'
 
+
 const App = () => {
   const firstPerson = chatMessages[0].sender
   const secondPerson = chatMessages[1].sender
+
+
+
+  const [chatData, setChatData] = useState(chatMessages);
+
+  const onUpdateChat = (updatedChat) => {
+    const messages = chatData.map(chat => {
+      if (chat.id === updatedChat.id) {
+        return updatedChat;
+      } else {
+        return chat;
+      }
+    });
+
+    setChatData(messages);
+  };
+
+  let totalLikes = 0
+  for (const message of chatData) {
+      if (message.liked) {
+        totalLikes +=1
+      };
+  };
+
+
   return (
     <div id="App">
       <header>
         <h1>Chat between {firstPerson} and {secondPerson}</h1>
+        <p>{totalLikes} ❤️s</p>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-        <ChatLog></ChatLog>
+        <ChatLog        
+          chatData={chatData}
+          onUpdateChat={onUpdateChat}>
+        </ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index edfe9ca7..15ab8ef5 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,6 +5,23 @@ import PropTypes from 'prop-types';
 
 const ChatEntry = (props) => {
   const timeEntry=props.timeStamp
+
+  const onLikeButtonClick = () => {
+    const updatedChat = {
+        id: props.id,
+        sender: props.sender,
+        body: props.body,
+        timeStamp: props.timeStamp,
+        liked: !props.liked
+    };
+
+    props.onUpdateChat(updatedChat);
+
+  };
+
+  const heartColor = props.liked ? '❤️' : '🤍';
+
+
   if (props.sender==='Vladimir') {
     return (
       <div className="chat-entry local">
@@ -12,7 +29,7 @@ const ChatEntry = (props) => {
         <section className="entry-bubble">
           <p>{props.body}</p>
           <p className="entry-time"><TimeStamp time={timeEntry}></TimeStamp></p>
-          <button className="like">🤍</button>
+          <button className="like" onClick={onLikeButtonClick}>{heartColor}</button>
         </section>
       </div>
     );
@@ -24,7 +41,7 @@ const ChatEntry = (props) => {
       <section className="entry-bubble">
         <p>{props.body}</p>
         <p className="entry-time"><TimeStamp time={timeEntry}></TimeStamp></p>
-        <button className="like">🤍</button>
+          <button className="like" onClick={onLikeButtonClick}>{heartColor}</button>
       </section>
     </div>
   );
@@ -34,6 +51,8 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool,
+  onUpdateChat: PropTypes.func.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index de9c3fd8..8e801eac 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,13 +2,22 @@ import React from 'react';
 import './ChatLog.css';
 import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry.js'
-import chatMessages from '/Users/japonte/Developer/projects/react-chatlog/src/data/messages.json';;
 
-const ChatLog = (entries) => {
-    const ChatLogEntries = chatMessages.map((events) => {
+const ChatLog = (props) => {
+    if (!props.chatData) {
+        return null
+    }
+    const ChatLogEntries = props.chatData.map((entry) => {
         return (
-            <div>
-                <ChatEntry sender={events.sender} timeStamp={events.timeStamp} body={events.body}></ChatEntry>
+            <div key={entry.id}>
+                <ChatEntry 
+                    id={entry.id} 
+                    sender={entry.sender} 
+                    timeStamp={entry.timeStamp} 
+                    body={entry.body} 
+                    liked={entry.liked}
+                    onUpdateChat={props.onUpdateChat}
+                ></ChatEntry>
             </div>
         );
     });
@@ -20,4 +29,14 @@ const ChatLog = (entries) => {
     );
 };
 
+ChatLog.propTypes = {
+    chat: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        senderData: PropTypes.string.isRequired,
+        bodyData: PropTypes.string.isRequired,
+        likedData: PropTypes.bool.isRequired
+    })),
+    onUpdateChat: PropTypes.func.isRequired
+};
+
 export default ChatLog

From 6f5116a66094356643fadc1b1a8707537361c86d Mon Sep 17 00:00:00 2001
From: Jackie <jackiemay08@gmail.com>
Date: Mon, 26 Jun 2023 17:21:13 -0400
Subject: [PATCH 5/6] Wave 03 commit. Chat log sends property to chat entry to
 distinguish local and remote user.

---
 src/App.js                  | 11 ++++-------
 src/components/ChatEntry.js | 17 ++---------------
 src/components/ChatLog.js   |  1 +
 3 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7bc81994..3e7cbb1f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,12 @@
 import React, {useState} from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
-import ChatEntry from './components/ChatEntry.js';
 import ChatLog from './components/ChatLog.js'
 
 
 const App = () => {
-  const firstPerson = chatMessages[0].sender
-  const secondPerson = chatMessages[1].sender
-
-
+  const localUser = chatMessages[0].sender
+  const remoteUser = chatMessages[1].sender
 
   const [chatData, setChatData] = useState(chatMessages);
 
@@ -36,8 +33,8 @@ const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Chat between {firstPerson} and {secondPerson}</h1>
-        <p>{totalLikes} ❤️s</p>
+        <h1>Chat between {localUser} and {remoteUser}</h1>
+        <p id="heartWidget">{totalLikes} ❤️s</p>
       </header>
       <main>
         <ChatLog        
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 15ab8ef5..3741d65a 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -20,23 +20,10 @@ const ChatEntry = (props) => {
   };
 
   const heartColor = props.liked ? '❤️' : '🤍';
-
-
-  if (props.sender==='Vladimir') {
-    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={timeEntry}></TimeStamp></p>
-          <button className="like" onClick={onLikeButtonClick}>{heartColor}</button>
-        </section>
-      </div>
-    );
-    };
+  // const chatEntry = props.sender==='Vladimir' ? 'chat-entry local' : 'chat-entry remote';
 
   return (
-    <div className="chat-entry remote">
+    <div className={props.chatEntry}>
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 8e801eac..d676b817 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -17,6 +17,7 @@ const ChatLog = (props) => {
                     body={entry.body} 
                     liked={entry.liked}
                     onUpdateChat={props.onUpdateChat}
+                    chatEntry={entry.sender===props.chatData[0].sender ? 'chat-entry local' : 'chat-entry remote'}
                 ></ChatEntry>
             </div>
         );

From bc77ca8d3945f3532733a89dfca033657fa2bef4 Mon Sep 17 00:00:00 2001
From: Jackie <jackiemay08@gmail.com>
Date: Mon, 26 Jun 2023 17:31:28 -0400
Subject: [PATCH 6/6] likes tracker css formatted to match example.

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

diff --git a/src/App.css b/src/App.css
index d97beb4e..5c638ee1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,6 +28,10 @@
 
 #App header section {
   background-color: #e0ffff;
+  color: black;
+  font-size: 1.5em;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 #App .widget {
diff --git a/src/App.js b/src/App.js
index 3e7cbb1f..cf90d9b5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,7 +34,7 @@ const App = () => {
     <div id="App">
       <header>
         <h1>Chat between {localUser} and {remoteUser}</h1>
-        <p id="heartWidget">{totalLikes} ❤️s</p>
+        <section>{totalLikes} ❤️s</section>
       </header>
       <main>
         <ChatLog        
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 3741d65a..9d6b2d90 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -16,11 +16,9 @@ const ChatEntry = (props) => {
     };
 
     props.onUpdateChat(updatedChat);
-
   };
 
   const heartColor = props.liked ? '❤️' : '🤍';
-  // const chatEntry = props.sender==='Vladimir' ? 'chat-entry local' : 'chat-entry remote';
 
   return (
     <div className={props.chatEntry}>