From e346338b3e05101bda026ca23debab6175dba78f Mon Sep 17 00:00:00 2001
From: Hope Olaide <hopeolaide@gmail.com>
Date: Wed, 22 Jun 2022 02:55:46 -0400
Subject: [PATCH 1/4] Wave 01 complete + git hygiene practice

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

diff --git a/src/App.js b/src/App.js
index c10859093..46672f3a7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,31 @@
 import React from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
 
 const App = () => {
+  // const message = chatMessages[0];
+  console.log(chatMessages);
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
+        {chatMessages.map(
+          (
+            message //Mapping each entry of chatMessages array to a chatEntry react component
+          ) => (
+            <ChatEntry
+              key={message.id} //Look up react keyError
+              id={message.id}
+              sender={message.sender}
+              body={message.body}
+              timeStamp={message.timeStamp}
+              liked={message.liked}
+            />
+          )
+        )}
         {/* 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 b92f0b7b2..f9f870427 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,18 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
+const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <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>
+        <p>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
+
         <button className="like">🤍</button>
       </section>
     </div>
@@ -17,6 +21,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.string.isRequired,
 };
 
 export default ChatEntry;

From 8d8c761998a06bbbe9d4731e87f8195da921fc03 Mon Sep 17 00:00:00 2001
From: Hope Olaide <hopeolaide@gmail.com>
Date: Wed, 22 Jun 2022 12:02:19 -0400
Subject: [PATCH 2/4] Wave02 complete. Tests Passed.

---
 src/App.js                  | 21 +++------------------
 src/components/ChatEntry.js |  8 ++++----
 src/components/ChatLog.js   | 25 +++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index 46672f3a7..aabfa038b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
   // const message = chatMessages[0];
@@ -9,25 +9,10 @@ const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Hope's React Practice Chat Log</h1>
       </header>
       <main>
-        {chatMessages.map(
-          (
-            message //Mapping each entry of chatMessages array to a chatEntry react component
-          ) => (
-            <ChatEntry
-              key={message.id} //Look up react keyError
-              id={message.id}
-              sender={message.sender}
-              body={message.body}
-              timeStamp={message.timeStamp}
-              liked={message.liked}
-            />
-          )
-        )}
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={chatMessages} />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index f9f870427..2781e0d29 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import './ChatEntry.css';
-import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
+import PropTypes from 'prop-types';
 
-const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
+const ChatEntry = ({ sender, body, timeStamp }) => {
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -12,8 +12,8 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp} />
         </p>
-
         <button className="like">🤍</button>
+        {/* <button onClick={() => printMessage()} className="like">🤍</button> */}
       </section>
     </div>
   );
@@ -25,7 +25,7 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  liked: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..f38b1a025
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = ({ entries }) => {
+  return entries.map((entry) => {
+    //Mapping each entry of chatMessages array to a chatEntry react component
+    return (
+      <ChatEntry
+        key={entry.id} /* //Look up react keyError */
+        id={entry.id}
+        sender={entry.sender}
+        body={entry.body}
+        timeStamp={entry.timeStamp}
+        liked={entry.liked}
+      />
+    );
+  });
+};
+
+ChatLog.propTypes = {
+  //Fill with correct proptypes
+  entries: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+export default ChatLog;

From cf0020939a9aaa8645ea09bf28e3f5de99465d2e Mon Sep 17 00:00:00 2001
From: Hope Olaide <hopeolaide@gmail.com>
Date: Wed, 22 Jun 2022 12:42:31 -0400
Subject: [PATCH 3/4] Wave03 in-progress. Nearly there.

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 2781e0d29..fbc8217ec 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -13,7 +13,9 @@ const ChatEntry = ({ sender, body, timeStamp }) => {
           <TimeStamp time={timeStamp} />
         </p>
         <button className="like">🤍</button>
-        {/* <button onClick={() => printMessage()} className="like">🤍</button> */}
+        {/* <button onClick={() => printMessage()} className="like"> */}
+        🤍
+        {/* </button> */}
       </section>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index f38b1a025..ed2b6d740 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
-const ChatLog = ({ entries }) => {
+const ChatLog = ({ entries, update }) => {
   return entries.map((entry) => {
     //Mapping each entry of chatMessages array to a chatEntry react component
     return (
@@ -13,6 +13,7 @@ const ChatLog = ({ entries }) => {
         body={entry.body}
         timeStamp={entry.timeStamp}
         liked={entry.liked}
+        onUpdate={update}
       />
     );
   });
@@ -21,5 +22,6 @@ const ChatLog = ({ entries }) => {
 ChatLog.propTypes = {
   //Fill with correct proptypes
   entries: PropTypes.arrayOf(PropTypes.object).isRequired,
+  update: PropTypes.func.isRequired,
 };
 export default ChatLog;

From 1d57031950ef68aacb3e80bb38c4292758ef9213 Mon Sep 17 00:00:00 2001
From: Hope Olaide <hopeolaide@gmail.com>
Date: Wed, 22 Jun 2022 21:07:35 -0400
Subject: [PATCH 4/4] Wave 03 complete. All tests passed.

---
 src/App.js                  | 26 ++++++++++++++++++++++----
 src/components/ChatEntry.js | 25 ++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index aabfa038b..52ba38022 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,36 @@
-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 message = chatMessages[0];
-  console.log(chatMessages);
+  //Brains
+  const [updateChatLog, setUpdateChatLog] = useState(chatMessages);
+  // for every item in updated ChatLog replace existing message with latest message.
+  const refreshMessageLog = (updatedEntry) => {
+    const newChatData = updateChatLog.map((entry) => {
+      if (entry.id === updatedEntry.id) {
+        return updatedEntry;
+      } else {
+        return entry;
+      }
+    });
+    setUpdateChatLog(newChatData);
+  };
+
+  const likeCount = updateChatLog.reduce((total, entry) => {
+    return total + entry.liked;
+  }, 0);
+
+  //Beauty
   return (
     <div id="App">
       <header>
         <h1>Hope's React Practice Chat Log</h1>
+        <h2>{likeCount} ❤️s</h2>
       </header>
       <main>
-        <ChatLog entries={chatMessages} />
+        <ChatLog entries={updateChatLog} update={refreshMessageLog} />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index fbc8217ec..c6a470ab2 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,7 +3,23 @@ import './ChatEntry.css';
 import TimeStamp from './TimeStamp';
 import PropTypes from 'prop-types';
 
-const ChatEntry = ({ sender, body, timeStamp }) => {
+const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdate }) => {
+  //Brains
+  const handleChangeHeart = () => {
+    const updatedEntry = {
+      id: id,
+      sender: sender,
+      body: body,
+      timeStamp: timeStamp,
+      liked: !liked,
+    };
+    onUpdate(updatedEntry);
+  };
+
+  //Beauty
+  const renderHeart = () => {
+    return liked ? '❤️' : '🤍';
+  };
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -12,10 +28,9 @@ const ChatEntry = ({ sender, body, timeStamp }) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp} />
         </p>
-        <button className="like">🤍</button>
-        {/* <button onClick={() => printMessage()} className="like"> */}
-        🤍
-        {/* </button> */}
+        <button onClick={handleChangeHeart} className="like">
+          {renderHeart()}
+        </button>
       </section>
     </div>
   );