Chatlog G Quinn--Kunzite

src/App.js

@@ -1,19 +1,45 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import TimeStamp from './components/TimeStamp';
+import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 const App = () => {
+  const [messages, setMessages] = useState(chatMessages);
+
+  const handleLike = (id) => {
+    const updatedMessages = messages.map((message) => {
+      if (message.id === id) {
+        return {
+          ...message,
+          liked: !message.liked,
+        };
+      }
+      return message;
+    });
+
+    setMessages(updatedMessages);
+  };
+
+  const likedMessagesCount = messages.reduce(
+    (count, message) => (message.liked ? count + 1 : count),
+    0
+  );
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Log</h1>
+        <div className="liked-messages-count">{likedMessagesCount} {'❤️'}s</div>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+          <ChatLog entries={messages} handleLike={handleLike}/>
       </main>
-    </div>
-  );
-};
+
+      </div>
+      )
+        };
 
 export default App;

src/components/ChatEntry.css

@@ -58,6 +58,10 @@ button {
   text-align: left;
 }
 
+.chat-entry.remote {
+  text-align: right;
+}
+
 .chat-entry.local .entry-time {
   text-align: right;
 }

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 ChatEntry = (props) => {
+
+  const handleClick = () => {
+    props.handleLike(props.id)
+  };
+
+  const chatEntryClass = props.sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+
+
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of 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>
-      </section>
+    <div className={chatEntryClass}>
+      <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 onClick={handleClick} className="like">{props.liked ? '❤️' : '🤍'}</button>
+      </section> 
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timestamp: PropTypes.element.isRequired,
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({ entries, handleLike }) => {
+    return (
+        <div>
+            {entries.map((entry) => (
+            <ChatEntry
+            id={entry.id}
+            sender={entry.sender}
+            body={entry.body}
+            timeStamp={entry.timeStamp}
+            handleLike={handleLike}
+            liked={entry.liked}
+            key={entry.id}
+        />
+        ))}
+        </div>
+    );
+    };
+
+    ChatLog.propTypes = {
+    entries: PropTypes.arrayOf(
+        PropTypes.shape({
+        sender: PropTypes.string.isRequired,
+        body: PropTypes.string.isRequired,
+        TimeStamp: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    };
+
+export default ChatLog;