D19 Kunzite - Abby Castillo

src/App.css

@@ -71,4 +71,8 @@
 
 .purple {
   color: purple
-}
+}
+
+/* button like {
+
+} */

src/App.js

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
-import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import HeartCounter from './components/HeartCounter'
+import messagesJSON from './data/messages.json'
 
 const App = () => {
+  const [messageData, setMessageData] = useState(messagesJSON);
+
+  const toggleLiked = (id) => {
+    const messages = messageData.map((message) => {
+      if (message.id === id) {
+        message.liked = !message.liked;
+      }
+      return message;
+    });
+
+    setMessageData(messages);
+  }
+
+  const totalLikes = messagesJSON.filter(message => message.liked).length;
+
   return (
+
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat with Vladimir</h1>
+        <br></br>
+        <HeartCounter likeTotal={totalLikes} />
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={messageData} onLikeMessage={toggleLiked}/>
       </main>
     </div>
   );

src/components/ChatEntry.css

@@ -97,4 +97,9 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
+}
+
+/* like styles */
+.like {
+  font-size: small;
 }

src/components/ChatEntry.js

@@ -1,22 +1,48 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+import LikeButton from './LikeButton';
+
+const setMessageLocation = (userName) => {
+
+  if (userName === 'Vladimir') {
+    return 'chat-entry local'; 
+  } else if (userName === 'Estragon') {
+    return 'chat-entry remote'; 
+  };
+
+}
+
+const ChatEntry = ({id, sender, body, timeStamp, isLiked, onLikeMessage}) => {
+
+  const updateLike = () => {
+    onLikeMessage(id);
+  };
+
+  const senderLocation = setMessageLocation(sender);
 
-const ChatEntry = (props) => {
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    <div className={senderLocation}>
+      <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>
+
+        <LikeButton heartCondition={isLiked} updateLike={updateLike}/>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  isLiked: PropTypes.bool.isRequired,
+  onLikeMessage: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
+

src/components/ChatLog.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+import './ChatLog.css';
+
+const ChatLog = ({entries, onLikeMessage}) => {
+  const chatComponents = entries.map((message) => {
+    return (
+      <div key={message.id} >
+        <ChatEntry 
+          id={message.id}
+          sender={message.sender}
+          body={message.body}
+          timeStamp={message.timeStamp}
+          isLiked={message.liked}
+          onLikeMessage={onLikeMessage}
+        />
+      </div>
+    );
+  });
+
+  return (<section className='chat-log'>
+    {chatComponents}
+  </section>)
+};
+
+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
+  })),
+  onLikeMessage: PropTypes.func.isRequired,
+};
+
+export default ChatLog;

src/components/HeartCounter.js

@@ -0,0 +1,19 @@
+import '../App.css';
+import PropTypes from 'prop-types';
+
+const HeartCounter = (props) => {
+
+  return (
+    <div>
+      <p className='heartWidget'>
+      {props.likeTotal} ❤️s
+      </p>
+    </div>
+  );
+};
+
+HeartCounter.propTypes = {
+  likeTotal: PropTypes.number.isRequired,
+};
+
+export default HeartCounter;

src/components/LikeButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LikeButton = (props) => {
+  if (props.heartCondition) {
+    return <button onClick={props.updateLike}>❤️</button>
+  } else {
+    return <button className='like' onClick={props.updateLike}>🤍</button>
+  };
+};
+
+LikeButton.propTypes = {
+  heartCondition: PropTypes.bool.isRequired,
+  updateLike: PropTypes.func.isRequired
+}
+
+export default LikeButton;