Erina P. - Kunzite

src/App.css

@@ -28,6 +28,9 @@
 
 #App header section {
   background-color: #e0ffff;
+  color: #222;
+  font-size:1.0em;
+  font-weight: bold;
 }
 
 #App .widget {

src/App.js

@@ -1,19 +1,45 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog.js';
+import { useState } from 'react';
 
 const App = () => {
+  const [entries, setEntriesData] = useState(chatMessages);
+  const updateLikedCount = (id) => {
+    setEntriesData((prev) => {
+      return prev.map((entry) => {
+        if(id === entry.id) {
+          return {
+            ...entry,
+            liked: !entry.liked,
+          };        } else {
+          return entry;
+        }
+      });
+    });
+  }
+  const totalLikesTally = entries.reduce((total, entry) => {
+    if (entry.liked === true) {
+      total += 1;
+    }
+    return total;
+  }, 0);
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>🤖 Chatterbot 🤖</h1>
+        <section className='header section'>{totalLikesTally} ❤️s</section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog 
+        className='chat-log' 
+        entries={entries}
+        updateLikedCount={updateLikedCount}/> 
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;

src/components/ChatEntry.css

@@ -27,7 +27,7 @@ button {
 }
 
 .chat-entry .entry-bubble:hover {
-  background-color: #fefea2;
+  background-color: hsl(60, 98%, 82%);
 }
 
 .chat-entry .entry-name {

src/components/ChatEntry.js

@@ -1,22 +1,36 @@
 import React from 'react';
 import './ChatEntry.css';
-import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+import PropTypes from 'prop-types'; 
 
 const ChatEntry = (props) => {
-  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>
-  );
-};
+  const onLikeButtonClick = () => {
+    props.updateLikedCount(props.id);
+  }
+
+  const formatMessages = props.sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+    return (
+      <div className={formatMessages}>
+        <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 className='like'onClick={onLikeButtonClick}>
+            {props.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,
+  onUpdate: PropTypes.func
 };
 
-export default ChatEntry;
+export default ChatEntry;

src/components/ChatLog.css

@@ -2,3 +2,5 @@
   margin: auto;
   max-width: 50rem;
 }
+
+

src/components/ChatLog.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import './ChatLog.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry.js';
+
+const ChatLog = (props) => {
+  const chatComponents = props.entries.map(entry => {
+    return (
+      <ChatEntry
+      key={entry.id} 
+      id={entry.id}  
+      sender={entry.sender}
+      body={entry.body}
+      liked={entry.liked}
+      timeStamp={entry.timeStamp}
+      updateLikedCount={props.updateLikedCount}/>
+      );
+    });
+    return (
+      <div>
+        {chatComponents}
+      </div>
+  );
+};
+
+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
+    }))
+};
+
+export default ChatLog;