Madison Jackson React Chatlog

src/App.js

@@ -1,16 +1,43 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+
 
 const App = () => {
+
+  const [chatData, setChatData] = useState(chatMessages);
+  let [likeCount, setLikeCount] = useState(0);
+  // let likeCount = 0;
+
+  const onLikeClick = (id) => {
+  setChatData(chatData.map(chat => {
+    if (chat.id === id){
+      chat.liked = !chat.liked
+      if (chat.liked === true){
+        setLikeCount(likeCount += 1)
+      };
+      if (chat.liked === false){
+        setLikeCount(likeCount -= 1)
+      };
+
+      return chat;
+    }
+    return chat;
+}));
+};
+
+
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>ChatBug</h1>
+        <h2>{likeCount} ❤️s</h2>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <div><ChatLog entries={chatData} onClick={onLikeClick}></ChatLog></div>
       </main>
     </div>
   );

src/components/ChatEntry.js

@@ -1,22 +1,29 @@
 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, onClick}) => {
+  const heartColor = liked === false ? '🤍' : '❤️'; 
+  const likeButton = () => {onClick(id)};
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <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}></TimeStamp></p>
+        <button className="like" onClick={likeButton}>{heartColor}</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,
+  onClick: PropTypes.func.isRequired,
 };
-
 export default ChatEntry;

src/components/ChatLog.js

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