From 2287f674455446fede3ff8ab03e909c9050a5de1 Mon Sep 17 00:00:00 2001
From: Melley Gebretatios <gmelley4@gmail.com>
Date: Fri, 16 Dec 2022 23:33:03 -0500
Subject: [PATCH 1/5] Wave one done. All tests pass.

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

diff --git a/src/App.js b/src/App.js
index c10859093..55c2ddeb2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,20 @@
 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>ChatLog</h1>
       </header>
       <main>
+        <ChatEntry
+          sender={chatMessages[0].sender}
+          body={chatMessages[0].body}
+          timestamp={chatMessages[0].timeStamp}
+        ></ChatEntry>
         {/* 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..a3cddad79 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,17 @@
 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}></TimeStamp>
+        </p>
         <button className="like">🤍</button>
       </section>
     </div>

From 9a674b4b3428eaacb964c8cb67fd9044de1bf913 Mon Sep 17 00:00:00 2001
From: Melley Gebretatios <gmelley4@gmail.com>
Date: Sat, 17 Dec 2022 02:15:31 -0500
Subject: [PATCH 2/5] Waves done but need to work on the tests.

---
 src/App.js                     | 31 +++++++++++++++++-----
 src/components/ChatEntry.js    | 38 +++++++++++++++++++++------
 src/components/ChatLog.js      | 29 ++++++++++++++++++++
 src/components/ChatLog.test.js | 48 +++++++++++++++++-----------------
 4 files changed, 108 insertions(+), 38 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index 55c2ddeb2..3ac4546a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,41 @@
-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 = () => {
+  // brain
+  const [ChatData, setChatData] = useState(chatMessages);
+
+  const NewMessage = (updatedMessage) => {
+    const newdata = ChatData.map((message) => {
+      if (message.id === updatedMessage.id) {
+        return updatedMessage;
+      } else {
+        return message;
+      }
+    });
+    setChatData(newdata);
+  };
+  const numlikes = ChatData.reduce((total, message) => {
+    return total + message.liked;
+  }, 0);
+
+  // beauty
   return (
     <div id="App">
       <header>
-        <h1>ChatLog</h1>
+        <h1>{numlikes}</h1>
       </header>
       <main>
-        <ChatEntry
-          sender={chatMessages[0].sender}
+        {/* <ChatEntry */}
+        {/* sender={chatMessages[0].sender}
           body={chatMessages[0].body}
           timestamp={chatMessages[0].timeStamp}
-        ></ChatEntry>
+        /> */}
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatLog messages={ChatData} updateMessage={NewMessage}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index a3cddad79..75bc99c21 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,23 +3,45 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
+
+const ChatEntry = (id, body, sender, timeStamp, liked, updateMessage) => {
+  const handlingLike = () => {
+    const updatedMessage = {
+      id: id,
+      body: body,
+      sender: sender,
+      timeStamp: timeStamp,
+      liked: liked,
+    };
+    updateMessage(updatedMessage);
+  }
+
   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>{body}</p>
         <p className="entry-time">
-          <TimeStamp time={props.timeStamp}></TimeStamp>
+          <TimeStamp time={timeStamp}></TimeStamp>
         </p>
-        <button className="like">🤍</button>
+        <button onClick={handlingLike} className="like">
+          {liked === false ? '🤍': '💜'}</button>
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes = {
-  //Fill with correct proptypes
-};
+
+  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,
+      updateMessage: PropTypes.func.isRequired,
+    };
+
+  
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..fb7b3d4cc
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = (props) => {
+  const allEntries = props.messages.map((message) => {
+    return (
+      <ChatEntry
+        id={message.id}
+        key={message.id}
+        body={message.body}
+        sender={message.sender}
+        timeStamp={message.timeStamp}
+        liked={message.liked}
+        updateMessage={
+        props.updateMessage
+        }
+      ></ChatEntry>
+    );
+  });
+  // return requires an argument
+  return <div>{allEntries}</div>;
+};
+ChatLog.propTypes = {
+  messages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  updateMessage: PropTypes.func.isRequired,
+};
+
+export default ChatLog;
diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js
index 96f89ebc3..5bafee291 100644
--- a/src/components/ChatLog.test.js
+++ b/src/components/ChatLog.test.js
@@ -1,49 +1,49 @@
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import ChatLog from "./ChatLog";
-import { render, screen } from "@testing-library/react";
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import ChatLog from './ChatLog';
+import { render, screen } from '@testing-library/react';
 
 const LOG = [
   {
-    sender: "Vladimir",
-    body: "why are you arguing with me",
-    timeStamp: "2018-05-29T22:49:06+00:00",
+    sender: 'Vladimir',
+    body: 'why are you arguing with me',
+    timeStamp: '2018-05-29T22:49:06+00:00',
   },
   {
-    sender: "Estragon",
-    body: "Because you are wrong.",
-    timeStamp: "2018-05-29T22:49:33+00:00",
+    sender: 'Estragon',
+    body: 'Because you are wrong.',
+    timeStamp: '2018-05-29T22:49:33+00:00',
   },
   {
-    sender: "Vladimir",
-    body: "because I am what",
-    timeStamp: "2018-05-29T22:50:22+00:00",
+    sender: 'Vladimir',
+    body: 'because I am what',
+    timeStamp: '2018-05-29T22:50:22+00:00',
   },
   {
-    sender: "Estragon",
-    body: "A robot.",
-    timeStamp: "2018-05-29T22:52:21+00:00",
+    sender: 'Estragon',
+    body: 'A robot.',
+    timeStamp: '2018-05-29T22:52:21+00:00',
   },
   {
-    sender: "Vladimir",
-    body: "Notabot",
-    timeStamp: "2019-07-23T22:52:21+00:00",
+    sender: 'Vladimir',
+    body: 'Notabot',
+    timeStamp: '2019-07-23T22:52:21+00:00',
   },
 ];
 
-describe("Wave 02: ChatLog", () => {
+describe('Wave 02: ChatLog', () => {
   beforeEach(() => {
     render(<ChatLog entries={LOG} />);
   });
 
-  test("renders without crashing and shows all the names", () => {
+  test('renders without crashing and shows all the names', () => {
     [
       {
-        name: "Vladimir",
+        name: 'Vladimir',
         numChats: 3,
       },
       {
-        name: "Estragon",
+        name: 'Estragon',
         numChats: 2,
       },
     ].forEach((person) => {
@@ -56,7 +56,7 @@ describe("Wave 02: ChatLog", () => {
     });
   });
 
-  test("renders an empty list without crashing", () => {
+  test('renders an empty list without crashing', () => {
     const element = render(<ChatLog entries={[]} />);
     expect(element).not.toBeNull();
   });

From f4499ec800a2e1b79c7cfc379177e3725d430228 Mon Sep 17 00:00:00 2001
From: Melley Gebretatios <gmelley4@gmail.com>
Date: Wed, 21 Dec 2022 23:50:28 -0500
Subject: [PATCH 3/5] Wave 2 complete and all tests pass.

---
 src/App.js                  | 36 +++++++++++++++++-------------------
 src/components/ChatEntry.js | 29 +++++++++++++----------------
 src/components/ChatLog.js   | 37 ++++++++++++++++++++-----------------
 3 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3ac4546a3..0037a73d1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,41 +1,39 @@
 import React, { useState } from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
 const App = () => {
   // brain
   const [ChatData, setChatData] = useState(chatMessages);
-
-  const NewMessage = (updatedMessage) => {
-    const newdata = ChatData.map((message) => {
-      if (message.id === updatedMessage.id) {
-        return updatedMessage;
-      } else {
-        return message;
-      }
-    });
-    setChatData(newdata);
+  const [likeCount, setLikeCount] = useState(0);
+  const updateLike = (id, like) => {
+    const newMessage = ChatData.find((entry) => entry.id === id);
+    newMessage.liked = like;
+    setChatData([...ChatData]);
+    if (like) {
+      setLikeCount(likeCount + 1);
+    }
+    if (!like) {
+      setLikeCount(likeCount - 1);
+    }
   };
-  const numlikes = ChatData.reduce((total, message) => {
-    return total + message.liked;
-  }, 0);
-
   // beauty
   return (
     <div id="App">
       <header>
-        <h1>{numlikes}</h1>
+        <h1>{likeCount} ❤️s</h1>
       </header>
       <main>
-        {/* <ChatEntry */}
-        {/* sender={chatMessages[0].sender}
+        {/* <ChatEntry
+          sender={chatMessages[0].sender}
           body={chatMessages[0].body}
           timestamp={chatMessages[0].timeStamp}
         /> */}
         {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-        <ChatLog messages={ChatData} updateMessage={NewMessage}></ChatLog>
+        // Wave 02: Render ChatLog component */}
+        <ChatLog messages={ChatData} updateMessage={updateLike}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 75bc99c21..4ae2645ee 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,8 +3,7 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-
-const ChatEntry = (id, body, sender, timeStamp, liked, updateMessage) => {
+const ChatEntry = ({ id, body, sender, timeStamp, liked, updateMessage }) => {
   const handlingLike = () => {
     const updatedMessage = {
       id: id,
@@ -14,7 +13,7 @@ const ChatEntry = (id, body, sender, timeStamp, liked, updateMessage) => {
       liked: liked,
     };
     updateMessage(updatedMessage);
-  }
+  };
 
   return (
     <div className="chat-entry local">
@@ -25,23 +24,21 @@ const ChatEntry = (id, body, sender, timeStamp, liked, updateMessage) => {
           <TimeStamp time={timeStamp}></TimeStamp>
         </p>
         <button onClick={handlingLike} className="like">
-          {liked === false ? '🤍': '💜'}</button>
+          {liked === false ? '🤍' : '❤️'}
+        </button>
       </section>
     </div>
   );
 };
 
-
-  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,
-      updateMessage: PropTypes.func.isRequired,
-    };
-
-  
+// 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,
+//   updateMessage: PropTypes.func.isRequired,
+// };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index fb7b3d4cc..96a96b064 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,24 +3,27 @@ import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
 const ChatLog = (props) => {
-  const allEntries = props.messages.map((message) => {
-    return (
-      <ChatEntry
-        id={message.id}
-        key={message.id}
-        body={message.body}
-        sender={message.sender}
-        timeStamp={message.timeStamp}
-        liked={message.liked}
-        updateMessage={
-        props.updateMessage
-        }
-      ></ChatEntry>
-    );
-  });
-  // return requires an argument
-  return <div>{allEntries}</div>;
+  const entries = props.entries;
+  return (
+    <div>
+      {entries.map((message) => (
+        <ChatEntry
+          id={message.id}
+          key={message.id}
+          body={message.body}
+          sender={message.sender}
+          timeStamp={message.timeStamp}
+          liked={message.liked}
+          updateMessage={props.updateMessage}
+        ></ChatEntry>
+      ))}
+      ;
+    </div>
+  );
 };
+// return requires an argument
+// return <div>{entries}</div>;
+
 ChatLog.propTypes = {
   messages: PropTypes.arrayOf(PropTypes.object).isRequired,
   updateMessage: PropTypes.func.isRequired,

From d066ed1cf8bc40bf8fdfd5bb85debaf8eb508943 Mon Sep 17 00:00:00 2001
From: Melley Gebretatios <gmelley4@gmail.com>
Date: Fri, 23 Dec 2022 03:14:51 -0500
Subject: [PATCH 4/5] All waves done and all tests pass.

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

diff --git a/src/App.js b/src/App.js
index 0037a73d1..71632459c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
+// import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
@@ -9,31 +9,38 @@ const App = () => {
   const [ChatData, setChatData] = useState(chatMessages);
   const [likeCount, setLikeCount] = useState(0);
   const updateLike = (id, like) => {
+    console.log(id, ChatData);
+    console.log(like);
+    // console.log(id.liked);
+
     const newMessage = ChatData.find((entry) => entry.id === id);
+    console.log('newMessage');
+    console.log(newMessage);
+    console.log(like);
     newMessage.liked = like;
     setChatData([...ChatData]);
     if (like) {
       setLikeCount(likeCount + 1);
+      console.log('setLikeCount');
     }
     if (!like) {
       setLikeCount(likeCount - 1);
+      console.log('setLikeCount2');
     }
   };
   // beauty
   return (
     <div id="App">
       <header>
-        <h1>{likeCount} ❤️s</h1>
+        <h1>Chat between Vladmir and Estrogen</h1>
+        <section>
+          <h2>{likeCount} ❤️s</h2>
+        </section>
       </header>
       <main>
-        {/* <ChatEntry
-          sender={chatMessages[0].sender}
-          body={chatMessages[0].body}
-          timestamp={chatMessages[0].timeStamp}
-        /> */}
         {/* Wave 01: Render one ChatEntry component
         // Wave 02: Render ChatLog component */}
-        <ChatLog messages={ChatData} updateMessage={updateLike}></ChatLog>
+        <ChatLog entries={ChatData} updateMessage={updateLike}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 4ae2645ee..a23b54f6b 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,17 +4,24 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = ({ id, body, sender, timeStamp, liked, updateMessage }) => {
-  const handlingLike = () => {
+  console.log('ChatEntry');
+  const onLikeButtonClick = () => {
+    console.log('onLikeButtonClick');
+    console.log(liked);
+
     const updatedMessage = {
       id: id,
       body: body,
       sender: sender,
       timeStamp: timeStamp,
-      liked: liked,
+      liked: !liked,
     };
-    updateMessage(updatedMessage);
+    updateMessage(updatedMessage.id, updatedMessage.liked);
   };
 
+  const likeColor = liked ? '❤️' : '🤍';
+  // console.log(likeColor);
+  // console.log(onLikeButtonClick);
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -23,22 +30,22 @@ const ChatEntry = ({ id, body, sender, timeStamp, liked, updateMessage }) => {
         <p className="entry-time">
           <TimeStamp time={timeStamp}></TimeStamp>
         </p>
-        <button onClick={handlingLike} className="like">
-          {liked === false ? '🤍' : '❤️'}
+        <button className="like" onClick={onLikeButtonClick}>
+          {likeColor}
         </button>
       </section>
     </div>
   );
 };
 
-// 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,
-//   updateMessage: PropTypes.func.isRequired,
-// };
+ChatEntry.propTypes = {
+  //   //Fill with correct proptypes
+  id: PropTypes.number,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  updateMessage: PropTypes.func.isRequired,
+};
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 96a96b064..23b8a1afe 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -25,7 +25,7 @@ const ChatLog = (props) => {
 // return <div>{entries}</div>;
 
 ChatLog.propTypes = {
-  messages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  entries: PropTypes.arrayOf(PropTypes.object),
   updateMessage: PropTypes.func.isRequired,
 };
 

From b6f0d0297c582f86698e4345585b1b317fa91181 Mon Sep 17 00:00:00 2001
From: Melley Gebretatios <gmelley4@gmail.com>
Date: Fri, 23 Dec 2022 12:15:04 -0500
Subject: [PATCH 5/5] logs deleted.

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

diff --git a/src/App.js b/src/App.js
index 71632459c..21623c901 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,14 +9,14 @@ const App = () => {
   const [ChatData, setChatData] = useState(chatMessages);
   const [likeCount, setLikeCount] = useState(0);
   const updateLike = (id, like) => {
-    console.log(id, ChatData);
-    console.log(like);
+    // console.log(id, ChatData);
+    // console.log(like);
     // console.log(id.liked);
 
     const newMessage = ChatData.find((entry) => entry.id === id);
-    console.log('newMessage');
-    console.log(newMessage);
-    console.log(like);
+    // console.log('newMessage');
+    // console.log(newMessage);
+    // console.log(like);
     newMessage.liked = like;
     setChatData([...ChatData]);
     if (like) {
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index a23b54f6b..cba4a174a 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = ({ id, body, sender, timeStamp, liked, updateMessage }) => {
-  console.log('ChatEntry');
+  // console.log('ChatEntry');
   const onLikeButtonClick = () => {
-    console.log('onLikeButtonClick');
-    console.log(liked);
+    // console.log('onLikeButtonClick');
+    // console.log(liked);
 
     const updatedMessage = {
       id: id,