From 144ed488884b5cc9f236070aa588997d8ebdccf6 Mon Sep 17 00:00:00 2001
From: shelby <faulconershelby@gmail.com>
Date: Fri, 17 Jun 2022 17:16:58 -0700
Subject: [PATCH 1/6] completed the first wave testing by writing the ChatEntry
 component

---
 src/App.js                  |  7 +++++++
 src/components/ChatEntry.js | 19 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index c10859093..ddb25f426 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry'
 
 const App = () => {
+
+  const chatMessageData = chatMessages[0];
+  console.log(chatMessages);
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
+        <ChatEntry sender= {chatMessageData.sender} 
+          body = {chatMessageData.body} 
+          timeStamp={chatMessageData.timeStamp}/>
         {/* 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..d03d2b639 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,35 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+
+// const timeDiff = (props) => {
+//   let currentTime = new Date();
+//   let time = currentTime.getUTCDate();
+//   let newTime = time - props.timeStamp
+//   return newTime
+// };
 
 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>
   );
 };
 
+
 ChatEntry.propTypes = {
   //Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;

From 9e54c658b61d1a0a542e7010102fc70c59f9f821 Mon Sep 17 00:00:00 2001
From: shelby <faulconershelby@gmail.com>
Date: Fri, 17 Jun 2022 18:11:45 -0700
Subject: [PATCH 2/6] making a commit to switch to a wave-02 branch

---
 src/components/ChatLog.js | 27 +++++++++++++++++++++++++++
 1 file changed, 27 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..8a41420b9
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+
+const ChatLog = (entries) => {
+    const chatComponents = entries.chatData.map((chatEntry) => {
+        return (
+            <ChatEntry
+                sender={chatEntry.sender}
+                body={chatEntry.body}
+                timeStamp={chatEntry.timeStamp}
+            />
+        );
+    });
+    return (
+        <section className="chat-log">{chatComponents}</section>
+    );
+};
+
+
+ChatLog.propTypes = {
+    chatData: PropTypes.arrayOf(PropTypes.object).isRequired,
+
+};
+
+export default ChatLog;
\ No newline at end of file

From 9ba4a9520352d13446ca6c868776db82bd40170d Mon Sep 17 00:00:00 2001
From: shelby <faulconershelby@gmail.com>
Date: Tue, 21 Jun 2022 11:41:41 -0700
Subject: [PATCH 3/6] I moved onto wave03 without committing, wave02 is
 complete.

---
 src/App.js                  | 39 +++++++++++++++++++++++++++++--------
 src/components/ChatEntry.js | 17 ++++++++--------
 src/components/ChatLog.js   | 14 +++++++------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index ddb25f426..c59f7ddc8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,46 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatEntry from './components/ChatEntry'
+import ChatLog from './components/ChatLog'
 
 const App = () => {
 
-  const chatMessageData = chatMessages[0];
+  // if entry id is liked,
+  // change the string of the element by class name 
+  const [entries, setEntries] = useState(chatMessages);
+  let [count, setCount] = useState(0);
+  let [heart, setHeart] = useState('🤍');
+  
+  // 
+  //  '🤍' : '❤️';
+  // 
+  const toggleLike = (liked) => {
+    // props.liked(props.id);
+    // adjust this function so that id is used
+    // if entry id liked is NOT false, 
+    // then set state of liked.id to '❤️'
+    if (liked !== false) {
+      //set that likeHeart to '❤️'
+      setHeart('❤️');
+      setCount(count+1);
+    } else if (liked !== true) {
+      setHeart('🤍');
+      setCount(count-1);
+    };
+  };
+
   console.log(chatMessages);
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Log</h1>
       </header>
       <main>
-        <ChatEntry sender= {chatMessageData.sender} 
-          body = {chatMessageData.body} 
-          timeStamp={chatMessageData.timeStamp}/>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog 
+        entries={entries}
+        likeHeart={toggleLike}
+        />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index d03d2b639..ad03f7e9c 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 
-// const timeDiff = (props) => {
-//   let currentTime = new Date();
-//   let time = currentTime.getUTCDate();
-//   let newTime = time - props.timeStamp
-//   return newTime
-// };
+// liked boolean prop type needs to be added
+// if liked = true change the state to (❤️)  filled heart
+// else false is empty heart (🤍). which is default
+// count when liked occurs
+
 
 const ChatEntry = (props) => {
   return (
@@ -18,18 +17,20 @@ const ChatEntry = (props) => {
       <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={props.toggleLike}>{props.heart}</button>
       </section>
     </div>
   );
 };
 
-
+// add id to chatEntry
 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;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 8a41420b9..a55111f67 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,13 +3,15 @@ import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
 
-const ChatLog = (entries) => {
-    const chatComponents = entries.chatData.map((chatEntry) => {
+const ChatLog = (props) => {
+    console.log(props)
+    const chatComponents = props.entries.map((entry) => {
         return (
             <ChatEntry
-                sender={chatEntry.sender}
-                body={chatEntry.body}
-                timeStamp={chatEntry.timeStamp}
+                sender={entry.sender}
+                body={entry.body}
+                timeStamp={entry.timeStamp}
+                liked={entry.liked}
             />
         );
     });
@@ -20,7 +22,7 @@ const ChatLog = (entries) => {
 
 
 ChatLog.propTypes = {
-    chatData: PropTypes.arrayOf(PropTypes.object).isRequired,
+    entries: PropTypes.arrayOf(PropTypes.object).isRequired,
 
 };
 

From cd1e650b4e517090dfbf26ffbef17c27d8de98da Mon Sep 17 00:00:00 2001
From: shelby <faulconershelby@gmail.com>
Date: Wed, 22 Jun 2022 15:30:12 -0700
Subject: [PATCH 4/6] completed wave-03 and added remote messages display

---
 src/App.js                  | 41 ++++++++++++++++++++++---------------
 src/components/ChatEntry.js |  7 +++++--
 src/components/ChatLog.js   |  4 ++++
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index c59f7ddc8..ebe0a939e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
-import ChatEntry from './components/ChatEntry'
 import ChatLog from './components/ChatLog'
 
 const App = () => {
@@ -9,37 +8,45 @@ const App = () => {
   // if entry id is liked,
   // change the string of the element by class name 
   const [entries, setEntries] = useState(chatMessages);
-  let [count, setCount] = useState(0);
-  let [heart, setHeart] = useState('🤍');
-  
-  // 
   //  '🤍' : '❤️';
-  // 
-  const toggleLike = (liked) => {
-    // props.liked(props.id);
+  const toggleLike = (id) => {
     // adjust this function so that id is used
     // if entry id liked is NOT false, 
     // then set state of liked.id to '❤️'
-    if (liked !== false) {
-      //set that likeHeart to '❤️'
-      setHeart('❤️');
-      setCount(count+1);
-    } else if (liked !== true) {
-      setHeart('🤍');
-      setCount(count-1);
+    const entriesCopy = entries.map((entry) => {
+      if (entry.id === id) {
+        return   {
+          id: entry.id,
+          sender: entry.sender,
+          body: entry.body,
+          timeStamp: entry.timeStamp,
+          liked: !entry.liked
+        };
+      } else return entry;
+    });
+    setEntries(entriesCopy);
+  };
+
+  const countLikes = () => {
+    let counter = 0;
+    for (let entry of entries) {
+      if (entry.liked) {
+        counter += 1;
+      };
     };
+    return counter;
   };
 
-  console.log(chatMessages);
   return (
     <div id="App">
       <header>
         <h1>Chat Log</h1>
+        <h2>Count: {countLikes()}</h2>
       </header>
       <main>
         <ChatLog 
         entries={entries}
-        likeHeart={toggleLike}
+        setLiked={toggleLike}
         />
       </main>
     </div>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index ad03f7e9c..5f0743186 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -9,15 +9,18 @@ import TimeStamp from './TimeStamp';
 // else false is empty heart (🤍). which is default
 // count when liked occurs
 
+ //  '🤍' : '❤️';
 
 const ChatEntry = (props) => {
+  const heartIcon =  (props.liked) ? '❤️' : '🤍';
+  const messageAlign = (props.sender === 'Vladimir') ? 'remote' : 'local';
   return (
-    <div className="chat-entry local">
+    <div className={`chat-entry ${messageAlign}`}>
       <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" onClick={props.toggleLike}>{props.heart}</button>
+        <button className="like" onClick={() => {props.setLiked(props.id)}}>{heartIcon}</button>
       </section>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index a55111f67..6b427390c 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,16 +2,20 @@ import React from 'react';
 import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
+ //  '🤍' : '❤️';
 
 const ChatLog = (props) => {
     console.log(props)
     const chatComponents = props.entries.map((entry) => {
         return (
             <ChatEntry
+                id = {entry.id}
+                key = {entry.id}
                 sender={entry.sender}
                 body={entry.body}
                 timeStamp={entry.timeStamp}
                 liked={entry.liked}
+                setLiked={props.setLiked}
             />
         );
     });

From c5094b6d1bf218b4fa08317e2b1cb14b5411d9f0 Mon Sep 17 00:00:00 2001
From: shelby <faulconershelby@gmail.com>
Date: Thu, 23 Jun 2022 10:26:33 -0700
Subject: [PATCH 5/6] cleaned up comments and white space

---
 src/App.js                  |  9 ++-------
 src/components/ChatEntry.js | 10 ----------
 src/components/ChatLog.js   |  5 +----
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index ebe0a939e..ed1886db4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,15 +4,10 @@ import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog'
 
 const App = () => {
-
-  // if entry id is liked,
-  // change the string of the element by class name 
+  
   const [entries, setEntries] = useState(chatMessages);
-  //  '🤍' : '❤️';
+
   const toggleLike = (id) => {
-    // adjust this function so that id is used
-    // if entry id liked is NOT false, 
-    // then set state of liked.id to '❤️'
     const entriesCopy = entries.map((entry) => {
       if (entry.id === id) {
         return   {
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 5f0743186..a774211cf 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,14 +3,6 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-
-// liked boolean prop type needs to be added
-// if liked = true change the state to (❤️)  filled heart
-// else false is empty heart (🤍). which is default
-// count when liked occurs
-
- //  '🤍' : '❤️';
-
 const ChatEntry = (props) => {
   const heartIcon =  (props.liked) ? '❤️' : '🤍';
   const messageAlign = (props.sender === 'Vladimir') ? 'remote' : 'local';
@@ -26,9 +18,7 @@ const ChatEntry = (props) => {
   );
 };
 
-// add id to chatEntry
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 6b427390c..c5c749487 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,10 +2,8 @@ import React from 'react';
 import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
- //  '🤍' : '❤️';
-
 const ChatLog = (props) => {
-    console.log(props)
+
     const chatComponents = props.entries.map((entry) => {
         return (
             <ChatEntry
@@ -24,7 +22,6 @@ const ChatLog = (props) => {
     );
 };
 
-
 ChatLog.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.object).isRequired,
 

From 2106549b4d64c0725950566d82abb2c8f501b215 Mon Sep 17 00:00:00 2001
From: shelby <faulconershelby@gmail.com>
Date: Fri, 24 Jun 2022 09:55:58 -0700
Subject: [PATCH 6/6] fixed h2 so that the test passed.

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

diff --git a/src/App.js b/src/App.js
index ed1886db4..c916db67a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -36,7 +36,7 @@ const App = () => {
     <div id="App">
       <header>
         <h1>Chat Log</h1>
-        <h2>Count: {countLikes()}</h2>
+        <h2>{countLikes()} ❤️s</h2>
       </header>
       <main>
         <ChatLog