chatlog, am I talking to myself?

src/App.css

@@ -1,5 +1,5 @@
 #App {
-  background-color: #87cefa;
+  background: #87cefa;
 }
 
 #App header {
@@ -26,8 +26,10 @@
   display: inline-block;
 }
 
+
 #App header section {
   background-color: #e0ffff;
+  color: black;
 }
 
 #App .widget {

src/App.js

@@ -1,16 +1,40 @@
 import React from 'react';
+import { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
+  const [messages, setMessages] = useState(chatMessages);
+
+  const toggleLike = (id) => {
+    setMessages(
+      messages.map((message) => 
+        message.id === id ? { ...message, liked: !message.liked } : message
+      )
+    );
+  };
+
+  const countLikes = () => {
+    let heartCount = 0;
+    for (let message of messages) {
+      if (message.liked) {
+        heartCount += 1;
+      }
+    }return heartCount;
+  };
+
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Waiting for Chat GDT</h1>
+        <section> 
+          <h2>{countLikes()} ❤️s</h2>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries ={messages} toggleLike={toggleLike}/>
       </main>
     </div>
   );

src/components/ChatEntry.css

@@ -26,6 +26,7 @@ button {
   width: fit-content;
 }
 
+
 .chat-entry .entry-bubble:hover {
   background-color: #fefea2;
 }

src/components/ChatEntry.js

@@ -1,22 +1,41 @@
 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, toggleLike}) => {
+  const handleLikeClick = () => {
+    toggleLike(id);
+  };
+
+const localOrRemote = (sender) => {
+if (sender === 'Vladimir') {
+  return 'chat-entry local';
+} else if (sender === 'Estragon') {
+  return 'chat-entry remote';
+};
+};
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className= {localOrRemote(sender)}>
+      <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}/>
+        </p>
+        <button className="like" onClick={handleLikeClick}>{liked ? '❤️' : '🤍'}</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number.isRequired,
+  body: PropTypes.string.isRequired,
+  sender: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool,
+  toggleLike: PropTypes.func,
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,42 @@
+import './ChatEntry.css'
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+
+const Chatlog = ({entries, toggleLike}) => {
+    const  getEntries = () => {
+        return entries.map((entry, index) => {
+        return (
+            <ChatEntry 
+            key={index}
+            id={entry.id}
+            sender={entry.sender} 
+            body={entry.body}
+            timeStamp={entry.timeStamp}
+            liked={entry.liked}
+            toggleLike={toggleLike}
+            />
+        );
+    });
+}
+    return <main>
+        <section className='chat-log'>
+            {getEntries()}
+        </section>
+        </main>
+};
+
+Chatlog.propTypes = {
+    entries: PropTypes.arrayOf (
+        PropTypes.shape (
+            {   
+                sender: PropTypes.string.isRequired,
+                body: PropTypes.string.isRequired,
+                timeStamp: PropTypes.string.isRequired,
+                liked: PropTypes.bool,
+            })
+    ).isRequired,
+    toggleLike: PropTypes.func,
+};
+
+export default Chatlog;