Kunzite - Angie Tran

src/App.js

@@ -1,19 +1,46 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 const App = () => {
+
+  const [chatDATA, setchatDATA] = useState(chatMessages);
+
+  const onLikeUpdate = (updatedEntry) => {
+    const entries = chatDATA.map(entry => {
+      if (entry.id === updatedEntry.id) {
+        return updatedEntry;
+      } else {
+        return entry;
+      }
+    });
+    setchatDATA(entries);
+  };
+
+  const calTotalLikes = (chatDATA) => { 
+    return chatDATA.reduce(
+      (likesCount, entry) => likesCount + entry.liked, 0); 
+  };
+
+  const likesCount = calTotalLikes(chatDATA);
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between Vladimir and Estragon</h1>
+        <section>
+          <h2 id='heartWidget' className='widget'>{likesCount} ❤️s</h2>
+        </section>
       </header>
       <main>
+        <ChatLog entries={chatDATA} onLikeUpdate={onLikeUpdate}/>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;

src/components/ChatEntry.js

@@ -1,22 +1,44 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp.js';
+
+const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeUpdate}) => {
+
+  const onLikeBtnClick = () => {
+    const updatedEntry = {
+      id: id,
+      sender: sender,
+      body: body,
+      timeStamp: timeStamp,
+      liked: !liked
+    }
+    onLikeUpdate(updatedEntry);
+  }
+
+  const heartStatus = liked ? '❤️' : '🤍';
+  const remoteStatus = sender === 'Estragon' ? 'remote' : 'local';
 
-const ChatEntry = (props) => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={`chat-entry ${remoteStatus}`}>
+      <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={onLikeBtnClick}>{heartStatus}</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,
+  onLikeUpdate: PropTypes.func
 };
 
-export default ChatEntry;
+export default ChatEntry;

src/components/ChatLog.js

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