From 532b8b656c6d5debc54b52843dd5eb5c4641e234 Mon Sep 17 00:00:00 2001
From: Danqing <liudanqing1995@gmail.com>
Date: Wed, 28 Jun 2023 09:25:21 -0700
Subject: [PATCH] all waves

---
 src/App.js                  | 24 +++++++++++++++++
 src/components/ChatEntry.js | 31 ++++++++++++++++++----
 src/components/ChatLog.css  |  6 +++++
 src/components/ChatLog.js   | 53 +++++++++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index c1085909..fa7a4189 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,27 @@
 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 [chatEntries, setChatsLike] = useState(chatMessages)
+
+  const updateLikeData = updatedChat =>{
+    const chats = chatEntries.map(chat => {
+      if (chat.id === updatedChat.id) {
+        return updatedChat;
+      }else {
+        return chat;
+      }
+    }); 
+
+    setChatsLike(chats)
+    
+  }
+
   return (
     <div id="App">
       <header>
@@ -11,6 +30,11 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatLog 
+                entries = {chatEntries}
+                onUpdateChat = {updateLikeData}
+        ></ChatLog>
+
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b..78530453 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,43 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp'
 
 const ChatEntry = (props) => {
+
+
+  const updateLikeButtonClick = () =>{
+    const updateChat ={
+      id : props.id,
+      sender : props.sender,
+      body : props.body,
+      liked : !props.liked, 
+      timeStamp : props.timeStamp,
+    }
+    props.onUpdate(updateChat);
+  }
+
+  const heartColor = props.liked ? '❤️': '🤍'; 
+
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <h2 className="entry-name">{props.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> {props.body} </p>
+        <p className="entry-time"><TimeStamp time = {props.timeStamp}></TimeStamp></p>
+        <button onClick ={updateLikeButtonClick} className="like">{heartColor}</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  onUpdate: PropTypes.func.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css
index 378848d1..eac0e020 100644
--- a/src/components/ChatLog.css
+++ b/src/components/ChatLog.css
@@ -2,3 +2,9 @@
   margin: auto;
   max-width: 50rem;
 }
+
+#ChatLog h2 {
+  font-size: 1.5em;
+  text-align: center;
+  display: inline-block;
+}
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 00000000..4a71c048
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import './ChatLog.css'
+import PropTypes from 'prop-types';
+
+const ChatLog = (props) => {
+    const chatLog = 'chat-log';
+    let showLike;
+    console.log(props.entries);
+    const chatComponents = props.entries.map((chat, index)=> {
+        const entriesData = [...props.entries];
+        const totalLike = [...entriesData].reduce((a,b) => a + (b.liked? 1: 0), 0)
+        showLike = totalLike === 0? '🤍' : totalLike + ' ❤️s'; 
+
+        return (
+            <li key={index}> <ChatEntry  
+                    className = {chatLog} 
+                    id ={chat.id}
+                    sender={chat.sender}
+                    body={chat.body}
+                    liked={chat.liked}
+                    timeStamp={chat.timeStamp}
+                    onUpdate = {props.onUpdateChat}
+                    ></ChatEntry> 
+            </li>
+        ); 
+    });
+    
+    return (
+        <section>
+            <h2>
+                {showLike}
+            </h2>
+            <ul>
+                {chatComponents}
+            </ul>
+        </section>
+    )
+}; 
+
+ChatLog.propsTypes ={
+    chatEntrys: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        sender: PropTypes.string.isRequired,
+        body: PropTypes.string.isRequired,
+        liked: PropTypes.bool.isRequired,
+        timestamp: PropTypes.string.isRequired
+    })),
+    onUpdateChat: PropTypes.func.isRequired
+};
+
+export default ChatLog;
\ No newline at end of file