From 930f92e4a948599d777d0ca106dfaa651f8e4233 Mon Sep 17 00:00:00 2001
From: Corntto9 <>
Date: Sat, 14 Dec 2024 01:08:24 -0800
Subject: [PATCH 1/5] wave 1 update ChatEntry and App components

---
 src/App.jsx                  | 18 ++++++++++++++++--
 src/components/ChatEntry.jsx | 23 ++++++++++++++++++-----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 14a7f684d..3a139e3b7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,28 @@
+import { useState } from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
+
+
+
+const chatData = {
+  "id": 1,
+  "sender":"Vladimir",
+  "body":"why are you arguing with me",
+  "timeStamp":"2018-05-29T22:49:06+00:00",
+  "liked": false
+}
+
 
 const App = () => {
+  //const [chatEntry, setChatEntry] = useState(DATA);
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatEntry sender={chatData.sender} body={chatData.body} timeStamp={chatData.timeStamp}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 15c56f96b..af3229cc7 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,12 +1,21 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+const ChatEntry = ({
+  // id,
+  sender,
+  body,
+  timeStamp,
+  
+}) => { 
 
-const ChatEntry = () => {
   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 className='body'>{body}</p>
+        <TimeStamp time = {timeStamp}></TimeStamp>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -14,7 +23,11 @@ const ChatEntry = () => {
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  // id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  // liked: PropTypes.timeStamp.isRequired,
 };
 
 export default ChatEntry;

From 50d5f4ffc2afbf8ddc0c8a1988c6998cc2e07f51 Mon Sep 17 00:00:00 2001
From: Corntto9 <>
Date: Sat, 14 Dec 2024 01:42:37 -0800
Subject: [PATCH 2/5] wave 2 implement ChatLog component

---
 src/App.jsx                  | 14 +++++---------
 src/components/ChatEntry.jsx |  4 ++--
 src/components/ChatLog.jsx   | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ChatLog.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 3a139e3b7..645501357 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,12 @@
 import { useState } from 'react';
 import './App.css';
 import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+import messages from './data/messages.json'
 
 
 
-const chatData = {
-  "id": 1,
-  "sender":"Vladimir",
-  "body":"why are you arguing with me",
-  "timeStamp":"2018-05-29T22:49:06+00:00",
-  "liked": false
-}
+const LOG = messages;
 
 
 const App = () => {
@@ -19,10 +15,10 @@ const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Between Vladimir and Estragon </h1>
       </header>
       <main>
-        <ChatEntry sender={chatData.sender} body={chatData.body} timeStamp={chatData.timeStamp}/>
+        <div>{<ChatLog entries={LOG}/>}</div>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index af3229cc7..78bba7cfc 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -23,11 +23,11 @@ const ChatEntry = ({
 };
 
 ChatEntry.propTypes = {
-  // id: PropTypes.number.isRequired,
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  // liked: PropTypes.timeStamp.isRequired,
+  liked: PropTypes.bool,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
new file mode 100644
index 000000000..1317dc445
--- /dev/null
+++ b/src/components/ChatLog.jsx
@@ -0,0 +1,36 @@
+import './ChatLog.css';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+
+const ChatLog = ({entries}) => {
+    const getChatLogJSX = (entries) => {
+        return entries.map((entry) => {
+            return (
+                <ChatEntry 
+                    key={entry.id}
+                    id={entry.id}
+                    sender={entry.sender}
+                    body={entry.body}
+                    timeStamp={entry.timeStamp}
+                    liked={entry.liked}
+                />
+            );
+        });
+    };
+    return <div className="chat-log">{getChatLogJSX(entries)}</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,
+  };
+  
+  export default ChatLog;
\ No newline at end of file

From f23241531ee26065c20f88f7c6ee7d4601ce0640 Mon Sep 17 00:00:00 2001
From: Corntto9 <>
Date: Mon, 16 Dec 2024 00:25:53 -0800
Subject: [PATCH 3/5] wave 3 handle like button and display total likes

---
 src/App.jsx                  | 38 +++++++++++++++++++++++++++++++++---
 src/components/ChatEntry.jsx | 30 +++++++++++++++++++---------
 src/components/ChatLog.jsx   | 19 +++++++++---------
 3 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 645501357..70eb2ece9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
+// import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
 import messages from './data/messages.json'
 
@@ -8,17 +8,49 @@ import messages from './data/messages.json'
 
 const LOG = messages;
 
+// export let GLOBAL_LIKE_COUNT = 0;
+
 
 const App = () => {
-  //const [chatEntry, setChatEntry] = useState(DATA);
+  const [entries, setEntries] = useState(LOG);
+
+  // update chat entry
+  
+  const toggleLike = (id) => {
+    const updatedEntries = entries.map(entry => {
+      if (entry.id === id) {
+        
+          // update like count if liked is true
+          return {... entry, liked: !entry.liked};
+        
+      } else {
+        // no change
+        return entry;
+      }
+    });
+    console.log('Updated entries:', updatedEntries);
+    setEntries(updatedEntries);
+  }
+
+  const totalLikes = entries.filter(entry => entry.liked).length;
+  
 
   return (
     <div id="App">
       <header>
         <h1>Chat Between Vladimir and Estragon </h1>
+        <h2 id="heartWidget">{totalLikes} ❤️s </h2>
+
       </header>
       <main>
-        <div>{<ChatLog entries={LOG}/>}</div>
+        <div>
+          <ChatLog 
+            entries={entries}
+            onLikeToggle={toggleLike}
+          />
+          
+
+        </div>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 78bba7cfc..152460cc2 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,14 +1,20 @@
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
+import { useState } from 'react';
+
+const ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => {
+
+  // const buttonHeart = liked ? '❤️ ' : '🤍'; 
+
+  const handleHeartClick = () => {
+    console.log(`Heart clicked for ID: ${id}`);
+    onLikeToggle(id);
+    // setIsLiked((isLiked) => !isLiked);
+    // GLOBAL_LIKE_COUNT += isLiked? 1: -1;
+  };
+
 
-const ChatEntry = ({
-  // id,
-  sender,
-  body,
-  timeStamp,
-  
-}) => { 
 
   return (
     <div className="chat-entry local">
@@ -16,18 +22,24 @@ const ChatEntry = ({
       <section className="entry-bubble">
         <p className='body'>{body}</p>
         <TimeStamp time = {timeStamp}></TimeStamp>
-        <button className="like">🤍</button>
+        <button 
+          className='like'
+          onClick={handleHeartClick}>
+            {liked ? '❤️' : '🤍'}
+        </button>
       </section>
     </div>
   );
 };
 
+
 ChatEntry.propTypes = {
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  liked: PropTypes.bool,
+  liked: PropTypes.bool.isRequired,
+  onLikeToggle: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index 1317dc445..caa354f50 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -3,22 +3,22 @@ import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 
 
-const ChatLog = ({entries}) => {
-    const getChatLogJSX = (entries) => {
-        return entries.map((entry) => {
-            return (
-                <ChatEntry 
+const ChatLog = ({entries, onLikeToggle}) => {
+    return (
+        <div className="chat-log">
+            {entries.map(entry => (
+                <ChatEntry
                     key={entry.id}
                     id={entry.id}
                     sender={entry.sender}
                     body={entry.body}
                     timeStamp={entry.timeStamp}
                     liked={entry.liked}
+                    onLikeToggle={onLikeToggle}
                 />
-            );
-        });
-    };
-    return <div className="chat-log">{getChatLogJSX(entries)}</div> 
+            ))}
+        </div>
+    );
 };
 
 ChatLog.propTypes = {
@@ -31,6 +31,7 @@ ChatLog.propTypes = {
         liked: PropTypes.bool.isRequired,
       })
     ).isRequired,
+    onLikeToggle: PropTypes.func.isRequired,
   };
   
   export default ChatLog;
\ No newline at end of file

From c78100973721c49dbad44ea130ad5a57e0740b32 Mon Sep 17 00:00:00 2001
From: Corntto9 <>
Date: Mon, 16 Dec 2024 01:22:20 -0800
Subject: [PATCH 4/5] handle local and remote message

---
 src/App.jsx                  | 20 ++++++--------------
 src/components/ChatEntry.jsx | 14 +++++++-------
 src/components/ChatLog.jsx   |  2 +-
 3 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 70eb2ece9..95d29f59f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,51 +5,43 @@ import ChatLog from './components/ChatLog';
 import messages from './data/messages.json'
 
 
-
+// import data from messages.json
 const LOG = messages;
 
-// export let GLOBAL_LIKE_COUNT = 0;
-
 
 const App = () => {
   const [entries, setEntries] = useState(LOG);
 
-  // update chat entry
-  
+  // update chat entry => like change
   const toggleLike = (id) => {
     const updatedEntries = entries.map(entry => {
       if (entry.id === id) {
-        
-          // update like count if liked is true
+          // toggle like
           return {... entry, liked: !entry.liked};
-        
       } else {
         // no change
         return entry;
       }
     });
-    console.log('Updated entries:', updatedEntries);
+    // update entries
     setEntries(updatedEntries);
   }
 
   const totalLikes = entries.filter(entry => entry.liked).length;
   
-
   return (
     <div id="App">
       <header>
-        <h1>Chat Between Vladimir and Estragon </h1>
+        <h1>Chat Between {entries[0].sender} and {entries[1].sender} </h1>
         <h2 id="heartWidget">{totalLikes} ❤️s </h2>
-
       </header>
       <main>
         <div>
           <ChatLog 
             entries={entries}
             onLikeToggle={toggleLike}
+            // localUser={localUser}
           />
-          
-
         </div>
       </main>
     </div>
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index 152460cc2..fa0d40811 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -5,25 +5,24 @@ import { useState } from 'react';
 
 const ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => {
 
-  // const buttonHeart = liked ? '❤️ ' : '🤍'; 
-
   const handleHeartClick = () => {
-    console.log(`Heart clicked for ID: ${id}`);
     onLikeToggle(id);
-    // setIsLiked((isLiked) => !isLiked);
-    // GLOBAL_LIKE_COUNT += isLiked? 1: -1;
   };
 
+  let isLocalUser = false
 
+  if (sender === 'Vladimir') {
+    isLocalUser = true;
+  } 
 
   return (
-    <div className="chat-entry local">
+    <div className={isLocalUser?'chat-entry local':'chat-entry remote'}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p className='body'>{body}</p>
         <TimeStamp time = {timeStamp}></TimeStamp>
         <button 
-          className='like'
+          className='like' //className from test
           onClick={handleHeartClick}>
             {liked ? '❤️' : '🤍'}
         </button>
@@ -40,6 +39,7 @@ ChatEntry.propTypes = {
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
   onLikeToggle: PropTypes.func.isRequired,
+  
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx
index caa354f50..48c951b1f 100644
--- a/src/components/ChatLog.jsx
+++ b/src/components/ChatLog.jsx
@@ -34,4 +34,4 @@ ChatLog.propTypes = {
     onLikeToggle: PropTypes.func.isRequired,
   };
   
-  export default ChatLog;
\ No newline at end of file
+export default ChatLog;
\ No newline at end of file

From 0932d037c576ecde714a81d1959e7eab326cd979 Mon Sep 17 00:00:00 2001
From: Corntto9 <>
Date: Mon, 16 Dec 2024 01:25:59 -0800
Subject: [PATCH 5/5] formatting

---
 src/App.jsx                  | 2 --
 src/components/ChatEntry.jsx | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 95d29f59f..a6013bb6f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import './App.css';
-// import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
 import messages from './data/messages.json'
 
@@ -40,7 +39,6 @@ const App = () => {
           <ChatLog 
             entries={entries}
             onLikeToggle={toggleLike}
-            // localUser={localUser}
           />
         </div>
       </main>
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx
index fa0d40811..7461cceaf 100644
--- a/src/components/ChatEntry.jsx
+++ b/src/components/ChatEntry.jsx
@@ -1,7 +1,6 @@
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
-import { useState } from 'react';
 
 const ChatEntry = ({id, sender, body, timeStamp,liked, onLikeToggle}) => {