From 1fa58cbeb08e4da98c9b059b87ee880797ac3517 Mon Sep 17 00:00:00 2001
From: Sheung Wan Wong <melodywonghxy@hotmail.com>
Date: Thu, 2 Feb 2023 02:57:43 -0700
Subject: [PATCH 1/5] completed wave 01

---
 .vscode/settings.json       |  3 +++
 src/App.js                  | 19 +++++++++++++++++--
 src/components/ChatEntry.js | 15 ++++++++-------
 3 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index c10859093..4970cecd4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,29 @@
 import React from 'react';
 import './App.css';
-import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
+
+const message = {
+  id: 1,
+  sender: 'Vladimir',
+  body: 'why are you arguing with me',
+  timeStamp: '2018-05-29T22:49:06+00:00',
+  liked: false,
+};
 
 const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>OcelotChat</h1>
       </header>
       <main>
+        <ChatEntry
+          id={message.id}
+          sender={message.sender}
+          body={message.body}
+          timeStamp={message.timeStamp}
+          liked={message.liked}
+        />
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..0992642c2 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
+const ChatEntry = ({ sender, body, timeStamp }) => {
   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>
+        <p>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
         <button className="like">🤍</button>
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes = {
-  //Fill with correct proptypes
-};
+ChatEntry.propTypes = {};
 
 export default ChatEntry;

From f5283bd2b9fef71bf2ac7a8b01445174afc56a98 Mon Sep 17 00:00:00 2001
From: Sheung Wan Wong <melodywonghxy@hotmail.com>
Date: Thu, 2 Feb 2023 04:28:34 -0700
Subject: [PATCH 2/5] completed wave2

---
 src/App.js                  | 23 +++++++++++++----------
 src/components/ChatEntry.js | 18 +++++++++++++++---
 src/components/ChatLog.js   | 21 +++++++++++++++++++++
 3 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index 4970cecd4..c6a328df9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
+//import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+import chatMessages from './data/messages.json';
 
-const message = {
-  id: 1,
-  sender: 'Vladimir',
-  body: 'why are you arguing with me',
-  timeStamp: '2018-05-29T22:49:06+00:00',
-  liked: false,
-};
+// const message = {
+//   id: 1,
+//   sender: 'Vladimir',
+//   body: 'why are you arguing with me',
+//   timeStamp: '2018-05-29T22:49:06+00:00',
+//   liked: false,
+// };
 
 const App = () => {
   return (
@@ -17,13 +19,14 @@ const App = () => {
         <h1>OcelotChat</h1>
       </header>
       <main>
-        <ChatEntry
+        {/* <ChatEntry
           id={message.id}
           sender={message.sender}
           body={message.body}
           timeStamp={message.timeStamp}
           liked={message.liked}
-        />
+        /> */}
+        <ChatLog entries={chatMessages} />
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 0992642c2..13ee2dbed 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ sender, body, timeStamp }) => {
+const ChatEntry = ({ sender, body, timeStamp, liked }) => {
+  // const [isLiked, setIsLiked] = userState(liked);
+
+  // const changeLike = () => setIsLiked(!isLiked);
+  // const heart = isLiked? '❤️' : '🤍';
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
@@ -13,11 +18,18 @@ const ChatEntry = ({ sender, body, timeStamp }) => {
           <TimeStamp time={timeStamp} />
         </p>
         <button className="like">🤍</button>
+        {/* <button className="like" onClick={changeLike}> */}
+        {/* {heart}
+        </button> */}
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes = {};
+ChatEntry.propTypes = {
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+};
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..83401e7f4
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import './ChatLog.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({ entries }) => {
+  const chatEntries = entries.map((entry) => {
+    return (
+      <ChatEntry
+        id={entry.id}
+        sender={entry.sender}
+        body={entry.body}
+        timeStamp={entry.timeStamp}
+        liked={entry.liked}
+      />
+    );
+  });
+  return <section>{chatEntries}</section>;
+};
+
+export default ChatLog;

From 1edb6f9a6820672b42e2b61e2672eaf26eeeebc3 Mon Sep 17 00:00:00 2001
From: Sheung Wan Wong <melodywonghxy@hotmail.com>
Date: Thu, 2 Feb 2023 07:33:55 -0700
Subject: [PATCH 3/5] wave 3 completed

---
 src/App.js                  | 32 +++++++++++++++++++++-----------
 src/components/ChatEntry.js | 37 +++++++++++++++++++++++++++----------
 src/components/ChatLog.js   | 17 ++++++++++++++++-
 3 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index c6a328df9..560be220f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 //import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
@@ -13,22 +13,32 @@ import chatMessages from './data/messages.json';
 // };
 
 const App = () => {
+  const [chatData, setChatData] = useState(chatMessages);
+  const [numLiked, setNumLiked] = useState(0);
+
+  const updateChatHeart = (updatedChat) => {
+    const chats = chatData.map((chat) => {
+      if (chat.id === updatedChat.id) {
+        if (updatedChat.liked) {
+          setNumLiked(numLiked + 1);
+        } else {
+          setNumLiked(numLiked - 1);
+        }
+        return updatedChat;
+      } else {
+        return chat;
+      }
+    });
+    setChatData(chats);
+  };
   return (
     <div id="App">
       <header>
         <h1>OcelotChat</h1>
+        <h1>{numLiked} ❤️s</h1>
       </header>
       <main>
-        {/* <ChatEntry
-          id={message.id}
-          sender={message.sender}
-          body={message.body}
-          timeStamp={message.timeStamp}
-          liked={message.liked}
-        /> */}
-        <ChatLog entries={chatMessages} />
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={chatData} onUpdateChatHeart={updateChatHeart} />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 13ee2dbed..00a5f4892 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,35 +1,52 @@
-import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({ sender, body, timeStamp, liked }) => {
-  // const [isLiked, setIsLiked] = userState(liked);
+const ChatEntry = ({
+  id,
+  sender,
+  body,
+  timeStamp,
+  liked,
+  onUpdateChatHeart,
+}) => {
+  const updateChatEntry = () => {
+    const updatedChat = {
+      id,
+      sender,
+      body,
+      timeStamp,
+      liked: !liked,
+    };
+    onUpdateChatHeart(updatedChat);
+  };
 
-  // const changeLike = () => setIsLiked(!isLiked);
-  // const heart = isLiked? '❤️' : '🤍';
+  const heart = liked ? '❤️' : '🤍';
 
   return (
-    <div className="chat-entry local">
+    <div className="chat-entry local" id={id}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
         <p className="entry-time">
           <TimeStamp time={timeStamp} />
         </p>
-        <button className="like">🤍</button>
-        {/* <button className="like" onClick={changeLike}> */}
-        {/* {heart}
-        </button> */}
+
+        <button className="like" onClick={updateChatEntry}>
+          {heart}
+        </button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onUpdateChatHeart: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 83401e7f4..4dfaf77c7 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,19 +3,34 @@ import './ChatLog.css';
 import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({ entries }) => {
+const ChatLog = ({ entries, onUpdateChatHeart }) => {
   const chatEntries = entries.map((entry) => {
     return (
       <ChatEntry
+        key={entry.id}
         id={entry.id}
         sender={entry.sender}
         body={entry.body}
         timeStamp={entry.timeStamp}
         liked={entry.liked}
+        onUpdateChatHeart={onUpdateChatHeart}
       />
     );
   });
   return <section>{chatEntries}</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,
+    })
+  ),
+  onUpdateChatHeart: PropTypes.func.isRequired,
+};
+
 export default ChatLog;

From 8dcd165793449d9586e3edf52b731e98a1787fc3 Mon Sep 17 00:00:00 2001
From: Sheung Wan Wong <melodywonghxy@hotmail.com>
Date: Thu, 2 Feb 2023 07:49:47 -0700
Subject: [PATCH 4/5] make numLiked a h2 element

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 560be220f..8e05783ac 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,7 +35,7 @@ const App = () => {
     <div id="App">
       <header>
         <h1>OcelotChat</h1>
-        <h1>{numLiked} ❤️s</h1>
+        <h2>{numLiked} ❤️ s</h2>
       </header>
       <main>
         <ChatLog entries={chatData} onUpdateChatHeart={updateChatHeart} />

From f119f1081f5d6bc6af1db7d5c9b11f7e4fe62f94 Mon Sep 17 00:00:00 2001
From: MelodyW2022 <melodywonghxy@hotmail.com>
Date: Thu, 2 Feb 2023 08:06:43 -0700
Subject: [PATCH 5/5] Update App.js

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 8e05783ac..560be220f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,7 +35,7 @@ const App = () => {
     <div id="App">
       <header>
         <h1>OcelotChat</h1>
-        <h2>{numLiked} ❤️ s</h2>
+        <h1>{numLiked} ❤️s</h1>
       </header>
       <main>
         <ChatLog entries={chatData} onUpdateChatHeart={updateChatHeart} />