finished forgot to commit oh no

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "python.testing.unittestArgs": [
+        "-v",
+        "-s",
+        ".",
+        "-p",
+        "*test.py"
+    ],
+    "python.testing.pytestEnabled": false,
+    "python.testing.unittestEnabled": true
+}

src/App.js

@@ -1,17 +1,43 @@
 import React from 'react';
 import './App.css';
-import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
+import Chats from './data/messages.json';
+
 
 const App = () => {
+  const [chatMessages, setChatMessages] = useState(Chats);
+
+  const heartClick = (entryToUpdate) => {
+    const entries = chatMessages.map((message) => {
+      if (message.id === entryToUpdate.id){
+        return entryToUpdate;
+      }
+      return message;
+    });
+    setChatMessages(entries);
+  };
+
+  const countLikes = (chatMessages) => {
+    let likeCount = 0;
+    for(const message of chatMessages){
+      if (message.liked=== true){
+        likeCount++;
+      }
+    };
+    return likeCount;
+  };
+  const heartTotal = countLikes(chatMessages);
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
+        <h2>Total Likes: {heartTotal} ❤️s</h2>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={chatMessages} heartClick= {heartClick}></ChatLog>
       </main>
+
     </div>
   );
 };

src/components/ChatEntry.js

@@ -1,22 +1,38 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+
+const ChatEntry = ({id, sender, body, timeStamp, liked, heartClick}) => {
+
+  const clickLikedHeart = () => {
+    heartClick(
+      {id:id,
+       sender:sender,
+       body:body, 
+       timeStamp:timeStamp, 
+       liked:!liked})};
 
-const ChatEntry = (props) => {
   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>
-        <button className="like">🤍</button>
+        <p>{body}</p>
+        <p className="entry-time"><TimeStamp time= {timeStamp}></TimeStamp></p>
+        <button className="like" onClick={clickLikedHeart}>{liked ? '❤️': '🤍'}</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,
+  heartClick: PropTypes.func
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+
+
+
+const ChatLog = ({entries, heartClick}) => {
+
+    const getChatLog = () => {
+        return entries.map((entry) => {
+            return (        
+                <ChatEntry 
+                key= {entry.id}
+                id= {entry.id}
+                sender= {entry.sender}
+                body= {entry.body}
+                timeStamp={entry.timeStamp}
+                liked={entry.liked}
+                heartClick= {heartClick}
+                />
+            );
+        });
+    };
+    return (
+        <div>
+            {getChatLog(entries)}
+        </div>
+    )
+};
+
+export default ChatLog;

src/data/messages.json

@@ -1,3 +1,4 @@
+
 [
   {
     "id": 1,