From aa06118c0d34128282a268aa99c9492003fbaf6f Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Sun, 19 Jun 2022 00:24:06 -0700
Subject: [PATCH 1/7]  all chats passed in

---
 src/App.js                  |  7 ++++---
 src/components/ChatEntry.js | 11 +++++++----
 src/components/ChatLog.js   | 16 ++++++++++++++++
 3 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index c1085909..bdab40e1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,17 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
+  console.log(chatMessages);
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chatty chats</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog chats={chatMessages}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b..d4817958 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,13 +2,13 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
-const ChatEntry = (props) => {
+const ChatEntry = ({ sender, body, timeStamp }) => {
   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}</p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -17,6 +17,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..297dc823
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({ chats }) => {
+  return chats.map((chat) => {
+    return (
+      <ChatEntry
+        sender={chat.sender}
+        body={chat.body}
+        timeStamp={chat.timeStamp}
+      />
+    );
+  });
+};
+
+export default ChatLog;

From e655c8715452b088853a18ba4d30c324facd8b34 Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Tue, 21 Jun 2022 17:55:36 -0700
Subject: [PATCH 2/7]  adding state

---
 src/App.js                  |  2 +-
 src/components/ChatEntry.js | 13 ++++++++++---
 src/components/ChatLog.js   |  6 ++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index bdab40e1..60dd690f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ const App = () => {
         <h1>Chatty chats</h1>
       </header>
       <main>
-        <ChatLog chats={chatMessages}></ChatLog>
+        <ChatLog entries={chatMessages}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index d4817958..5d6a7a24 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,15 +1,20 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ sender, body, timeStamp }) => {
+const ChatEntry = ({ sender, body, timeStamp, id, liked }) => {
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
-        <p className="entry-time">{timeStamp}</p>
-        <button className="like">🤍</button>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp}> years ago</TimeStamp>
+        </p>
+        <button onClick={liked} className="like">
+          🤍
+        </button>
       </section>
     </div>
   );
@@ -20,6 +25,8 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
+  id: PropTypes.number,
+  liked: PropTypes.bool,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 297dc823..d8706cff 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({ chats }) => {
-  return chats.map((chat) => {
+const ChatLog = ({ entries }) => {
+  return entries.map((chat) => {
     return (
       <ChatEntry
         sender={chat.sender}
         body={chat.body}
         timeStamp={chat.timeStamp}
+        id={chat.id}
+        key={chat.id}
       />
     );
   });

From c8dbb68cd160348e294a289539c169f08ab9b256 Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Tue, 21 Jun 2022 17:56:30 -0700
Subject: [PATCH 3/7] unsaved work

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

diff --git a/src/App.js b/src/App.js
index 60dd690f..05b77c30 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,17 @@
-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 = () => {
   console.log(chatMessages);
+  const [liked, setLiked] = useState(0);
+  const countLikes = () => {};
   return (
     <div id="App">
       <header>
         <h1>Chatty chats</h1>
+        <h3> {countLikes} </h3>
       </header>
       <main>
         <ChatLog entries={chatMessages}></ChatLog>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 5d6a7a24..527bfd66 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';

From e72e12d4c4d4efebe44758915809419f2ca49095 Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Wed, 22 Jun 2022 14:53:45 -0700
Subject: [PATCH 4/7] more debugging needed

---
 src/App.js                  | 28 +++++++++++++++++++++++-----
 src/components/ChatEntry.js | 27 +++++++++++++++++++--------
 src/components/ChatLog.js   |  6 ++++--
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 05b77c30..4c75b55c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,16 +5,34 @@ import ChatLog from './components/ChatLog';
 
 const App = () => {
   console.log(chatMessages);
-  const [liked, setLiked] = useState(0);
-  const countLikes = () => {};
+  const [chats, setChatState] = useState(chatMessages);
+
+  const updateChatLiked = (id) => {
+    const newChats = chats.map((chat) => {
+      if (chat.id === id) {
+        chat.liked = !chat.liked;
+      }
+      return newChats;
+    });
+    setChatState(newChats);
+  };
+
+  const sumLikes = () => {
+    let filteredChats = chats.filter(sumLikesHelper);
+    return filteredChats.length;
+  };
+  function sumLikesHelper(likes) {
+    return chats.likes === true;
+  }
+
   return (
     <div id="App">
       <header>
-        <h1>Chatty chats</h1>
-        <h3> {countLikes} </h3>
+        <h1>Chats</h1>
+        <h3>{sumLikes()} ❤️'s</h3>
       </header>
       <main>
-        <ChatLog entries={chatMessages}></ChatLog>
+        <ChatLog chats={chats} updateChat={updateChatLiked(chats.id)}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 527bfd66..215e55cf 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,17 +3,27 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ sender, body, timeStamp, id, liked }) => {
+const ChatEntry = (props) => {
+  const changeHeart = !props.liked ? '🤍' : '❤️';
+  const convertLike = () => {
+    const updatingChatMessage = {
+      id: props.id,
+      sender: props.sender,
+      body: props.body,
+      liked: !props.liked,
+    };
+    props.updateChat(updatingChatMessage);
+  };
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">{sender}</h2>
+      <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
-        <p>{body}</p>
+        <p>{props.body}</p>
         <p className="entry-time">
-          <TimeStamp time={timeStamp}> years ago</TimeStamp>
+          <TimeStamp time={props.timeStamp}> years ago</TimeStamp>
         </p>
-        <button onClick={liked} className="like">
-          🤍
+        <button onClick={convertLike} className="like">
+          {changeHeart}
         </button>
       </section>
     </div>
@@ -25,8 +35,9 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  id: PropTypes.number,
-  liked: PropTypes.bool,
+  id: PropTypes.number.isRequired,
+  liked: PropTypes.bool.isRequired,
+  updateChat: PropTypes.func,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index d8706cff..4e81c875 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({ entries }) => {
-  return entries.map((chat) => {
+const ChatLog = ({ chats }) => {
+  return chats.map((chat) => {
     return (
       <ChatEntry
         sender={chat.sender}
@@ -10,6 +10,8 @@ const ChatLog = ({ entries }) => {
         timeStamp={chat.timeStamp}
         id={chat.id}
         key={chat.id}
+        liked={chat.liked}
+        updateChatState={chat.chatState}
       />
     );
   });

From 9bae67a296bf706ddfe03f06ba9d556df512da6a Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Wed, 22 Jun 2022 15:30:01 -0700
Subject: [PATCH 5/7] Changing heart works now

---
 src/App.js                  | 22 ++--------------------
 src/components/ChatEntry.js | 16 ++++++----------
 2 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4c75b55c..44cbc1ed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,32 +7,14 @@ const App = () => {
   console.log(chatMessages);
   const [chats, setChatState] = useState(chatMessages);
 
-  const updateChatLiked = (id) => {
-    const newChats = chats.map((chat) => {
-      if (chat.id === id) {
-        chat.liked = !chat.liked;
-      }
-      return newChats;
-    });
-    setChatState(newChats);
-  };
-
-  const sumLikes = () => {
-    let filteredChats = chats.filter(sumLikesHelper);
-    return filteredChats.length;
-  };
-  function sumLikesHelper(likes) {
-    return chats.likes === true;
-  }
-
   return (
     <div id="App">
       <header>
         <h1>Chats</h1>
-        <h3>{sumLikes()} ❤️'s</h3>
+        <h3>{0} ❤️'s</h3>
       </header>
       <main>
-        <ChatLog chats={chats} updateChat={updateChatLiked(chats.id)}></ChatLog>
+        <ChatLog chats={chats}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 215e55cf..5fbcd96d 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,16 +4,12 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
-  const changeHeart = !props.liked ? '🤍' : '❤️';
-  const convertLike = () => {
-    const updatingChatMessage = {
-      id: props.id,
-      sender: props.sender,
-      body: props.body,
-      liked: !props.liked,
-    };
-    props.updateChat(updatingChatMessage);
+  const [liked, setLike] = useState(false);
+  const changeHeart = !liked ? '🤍' : '❤️';
+  const changeLiked = () => {
+    return setLike(!liked);
   };
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
@@ -22,7 +18,7 @@ const ChatEntry = (props) => {
         <p className="entry-time">
           <TimeStamp time={props.timeStamp}> years ago</TimeStamp>
         </p>
-        <button onClick={convertLike} className="like">
+        <button onClick={changeLiked} className="like">
           {changeHeart}
         </button>
       </section>

From 3b22a47596ab19130aa9e94d8b9b5156ee0525ad Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Wed, 22 Jun 2022 22:19:16 -0700
Subject: [PATCH 6/7] Yay everything works

---
 src/App.js                  | 27 ++++++++++++++++++++++++---
 src/components/ChatEntry.js | 16 ++++++++++++----
 src/components/ChatLog.js   | 15 +++++++++++----
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 44cbc1ed..584b318e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,16 +5,37 @@ import ChatLog from './components/ChatLog';
 
 const App = () => {
   console.log(chatMessages);
-  const [chats, setChatState] = useState(chatMessages);
+  const [chatsMessages, setChatState] = useState(chatMessages);
+  const changeLike = (id) => {
+    const newData = chatsMessages.map((chat) => {
+      if (chat.id === id) {
+        chat.liked = !chat.liked;
+        return chat;
+      }
+      return chat;
+    });
+    return setChatState(newData);
+  };
+  const sumLikes = () => {
+    console.log('Inside sumLikes');
+    const likedTrue = chatsMessages.filter((chat) => {
+      //we only want to add the cat to the array if it's id does not equal the id of the cat we want to remove
+      return chat.liked === true;
+    });
+    return likedTrue.length;
+  };
 
   return (
     <div id="App">
       <header>
         <h1>Chats</h1>
-        <h3>{0} ❤️'s</h3>
+        <h3>{sumLikes()} ❤️'s</h3>
       </header>
       <main>
-        <ChatLog chats={chats}></ChatLog>
+        <ChatLog
+          chatsMessages={chatsMessages}
+          onChangeLike={changeLike}
+        ></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 5fbcd96d..5294137e 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -6,8 +6,11 @@ import TimeStamp from './TimeStamp';
 const ChatEntry = (props) => {
   const [liked, setLike] = useState(false);
   const changeHeart = !liked ? '🤍' : '❤️';
-  const changeLiked = () => {
-    return setLike(!liked);
+  const changeLike = (id) => {
+    const likeState = setLike(!liked);
+    props.onChangeLike(id);
+
+    return likeState;
   };
 
   return (
@@ -18,7 +21,12 @@ const ChatEntry = (props) => {
         <p className="entry-time">
           <TimeStamp time={props.timeStamp}> years ago</TimeStamp>
         </p>
-        <button onClick={changeLiked} className="like">
+        <button
+          onClick={() => {
+            changeLike(props.id);
+          }}
+          className="like"
+        >
           {changeHeart}
         </button>
       </section>
@@ -33,7 +41,7 @@ ChatEntry.propTypes = {
   timeStamp: PropTypes.string.isRequired,
   id: PropTypes.number.isRequired,
   liked: PropTypes.bool.isRequired,
-  updateChat: PropTypes.func,
+  onChangeLike: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 4e81c875..0e8a96ef 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import { React } from 'react';
 import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
 
-const ChatLog = ({ chats }) => {
-  return chats.map((chat) => {
+const ChatLog = (props) => {
+  const chatMessageArray = props.chatsMessages.map((chat) => {
     return (
       <ChatEntry
         sender={chat.sender}
@@ -11,10 +12,16 @@ const ChatLog = ({ chats }) => {
         id={chat.id}
         key={chat.id}
         liked={chat.liked}
-        updateChatState={chat.chatState}
+        onChangeLike={props.onChangeLike}
       />
     );
   });
+  return chatMessageArray;
+};
+
+ChatLog.propTypes = {
+  chatsMessages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onChangeLike: PropTypes.func.isRequired,
 };
 
 export default ChatLog;

From c6de636e9eaec86e23d216e9665a4c26e85bd942 Mon Sep 17 00:00:00 2001
From: Kassidy Buslach <kjbuslach@gmail.com>
Date: Wed, 22 Jun 2022 22:25:54 -0700
Subject: [PATCH 7/7] Cleaned up console.logs:D

---
 src/App.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 584b318e..d2ac9ac4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,9 +17,7 @@ const App = () => {
     return setChatState(newData);
   };
   const sumLikes = () => {
-    console.log('Inside sumLikes');
     const likedTrue = chatsMessages.filter((chat) => {
-      //we only want to add the cat to the array if it's id does not equal the id of the cat we want to remove
       return chat.liked === true;
     });
     return likedTrue.length;