From d6ff7618ee8d7404f33d23ccf73148d3dbeeded3 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Sat, 28 Jan 2023 00:05:23 -0800
Subject: [PATCH 01/21] Wave 1 completed

---
 src/App.js                  |  5 +++++
 src/components/ChatEntry.js | 14 ++++++++------
 src/components/ChatLog.js   | 16 ++++++++++++++++
 3 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index c10859093..8357fbeb1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
 
 const App = () => {
@@ -11,6 +12,10 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatEntry sender={chatMessages[0].sender} 
+          body = {chatMessages[0].body}
+          timeStamp = {chatMessages[0].timeStamp}
+        />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..e5c862131 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,24 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   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>
+        <p>{props.body}</p>
+        <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
         <button className="like">🤍</button>
       </section>
     </div>
-  );
-};
+  )};
 
 ChatEntry.propTypes = {
-  //Fill with correct 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..297359d50
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import React from 'react'; 
+import ChatEntry from './ChatEntry';
+import chatMessages from './data/messages.json';
+
+const ChatLog = (props) => {
+    const messages = chatMessages.map((message) => {
+        return(
+            <section key = {message.id}>
+                <ChatEntry sender = {message.sender}
+                body = {message.body}
+                timeStamp = {message.timeStamp}/>
+            </section>
+        );
+    });
+}
\ No newline at end of file

From 310377e8fb5f88b194c5ce2013c7e4e0d44b7424 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Sat, 28 Jan 2023 00:37:54 -0800
Subject: [PATCH 02/21] Wave 2 completed

---
 src/App.js                |  6 ++++--
 src/components/ChatLog.js | 12 ++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8357fbeb1..e1f277d4f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
 import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog'; 
 import chatMessages from './data/messages.json';
 
 const App = () => {
@@ -12,10 +13,11 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatEntry sender={chatMessages[0].sender} 
+        {/* <ChatEntry sender={chatMessages[0].sender} 
           body = {chatMessages[0].body}
           timeStamp = {chatMessages[0].timeStamp}
-        />
+        /> */}
+        <ChatLog entries = {chatMessages}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 297359d50..aed03e130 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react'; 
 import ChatEntry from './ChatEntry';
-import chatMessages from './data/messages.json';
 
-const ChatLog = (props) => {
-    const messages = chatMessages.map((message) => {
+
+const ChatLog = ({entries}) => {
+    const messages = entries.map((message) => {
         return(
             <section key = {message.id}>
                 <ChatEntry sender = {message.sender}
@@ -13,4 +13,8 @@ const ChatLog = (props) => {
             </section>
         );
     });
-}
\ No newline at end of file
+
+    return(messages)
+};
+
+export default ChatLog
\ No newline at end of file

From 473188685c1389f4cad6613759a38510fe8bd24e Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Sun, 29 Jan 2023 21:05:15 -0800
Subject: [PATCH 03/21] wave 3 in progress

---
 src/components/ChatEntry.css |  4 +++-
 src/components/ChatEntry.js  | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..748d89d38 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,6 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
\ No newline at end of file
+}
+
+/*Like heart styling*/ 
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index e5c862131..9ec9e65de 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
+  const [isClicked, setIsClicked] = useState(false); 
+  const [clickCount, setClickCount] = useState(0)
+
+  const updateClickState = () => {
+    setIsClicked(!isClicked)
+  }
+  const updateClickCount = () => {
+    console.log('update click coount')
+    setClickCount(clickCount+1)
+  }
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
         <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
-        <button className="like">🤍</button>
+        <button className = "like" onClick={updateClickState}>{isClicked ? '❤️' : '🤍'}</button>
       </section>
     </div>
   )};

From b6acad3cb0fe38847d3a125b94c72595ee048ae7 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Sun, 29 Jan 2023 21:14:52 -0800
Subject: [PATCH 04/21] Heart styling change completed

---
 src/components/ChatEntry.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 9ec9e65de..f650adf5b 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,22 +5,20 @@ import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   const [isClicked, setIsClicked] = useState(false); 
-  const [clickCount, setClickCount] = useState(0)
 
   const updateClickState = () => {
     setIsClicked(!isClicked)
   }
-  const updateClickCount = () => {
-    console.log('update click coount')
-    setClickCount(clickCount+1)
-  }
+
+  const heartStyle = isClicked ? '❤️' : '🤍'
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">
         <p>{props.body}</p>
         <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
-        <button className = "like" onClick={updateClickState}>{isClicked ? '❤️' : '🤍'}</button>
+        <button className = "like" onClick={updateClickState}>{heartStyle}</button>
       </section>
     </div>
   )};

From 838c01877737d99602712546700a4e2ce5beb571 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Mon, 30 Jan 2023 01:24:37 -0800
Subject: [PATCH 05/21] Wave 2 part 2 in progress, debug nneeded

---
 src/App.js                  | 25 ++++++++++++++++---------
 src/components/ChatEntry.js | 27 +++++++++++++++++----------
 src/components/ChatLog.js   | 28 ++++++++++++++++++++++------
 3 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/App.js b/src/App.js
index e1f277d4f..476b79fd1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,30 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
-import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog'; 
 import chatMessages from './data/messages.json';
 
 const App = () => {
+  const [chatEntries, setChatEntries] = useState(chatMessages);  
+
+  const updateChatEntry = (chatToUpdate) => {
+    const chats = chatEntries.map((entry) => {
+      if(entry.id === chatToUpdate.id){
+        return chatToUpdate; 
+      }
+      return entry; 
+    });
+    setChatEntries(chats); 
+  };
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-        {/* <ChatEntry sender={chatMessages[0].sender} 
-          body = {chatMessages[0].body}
-          timeStamp = {chatMessages[0].timeStamp}
-        /> */}
-        <ChatLog entries = {chatMessages}/>
+        <ChatLog entries = {chatMessages}
+          onUpdateChat = {updateChatEntry}
+        />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index f650adf5b..dc848adc1 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,32 +1,39 @@
-import React, { useState } from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
-  const [isClicked, setIsClicked] = useState(false); 
-
+const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
   const updateClickState = () => {
-    setIsClicked(!isClicked)
+    onUpdateChat({
+      id, 
+      sender,
+      body, 
+      timeStamp, 
+      liked : !liked,
+      onUpdateChat
+    })
   }
 
-  const heartStyle = isClicked ? '❤️' : '🤍'
+  const heartStyle = liked ? '❤️' : '🤍'
 
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">{props.sender}</h2>
+      <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
-        <p>{props.body}</p>
-        <p className="entry-time"><TimeStamp time={props.timeStamp}/></p>
+        <p>{body}</p>
+        <p className="entry-time"><TimeStamp time={timeStamp}/></p>
         <button className = "like" onClick={updateClickState}>{heartStyle}</button>
       </section>
     </div>
   )};
 
 ChatEntry.propTypes = {
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.string.isRequired
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onUpdateChat:PropTypes.func.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index aed03e130..b6bd9f725 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,18 +3,34 @@ import React from 'react';
 import ChatEntry from './ChatEntry';
 
 
-const ChatLog = ({entries}) => {
+const ChatLog = ({entries, onUpdateChat}) => {
     const messages = entries.map((message) => {
         return(
             <section key = {message.id}>
-                <ChatEntry sender = {message.sender}
-                body = {message.body}
-                timeStamp = {message.timeStamp}/>
+                <ChatEntry 
+                    sender = {message.sender}
+                    body = {message.body}
+                    timeStamp = {message.timeStamp}
+                    id = {message.id}
+                    liked = {message.liked}
+                    onUpdateChat = {message.onUpdateChat}
+                />
             </section>
         );
     });
-
-    return(messages)
+    return(messages);
 };
 
+ChatLog.PropTypes = {
+    chatMessages: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            sender: PropTypes.string.isRequired,
+            body: PropTypes.string.isRequired,
+            timeStamp: PropTypes.string.isRequired,
+            liked: PropTypes.bool.isRequired,
+            onUpdateChat:PropTypes.func.isRequired
+        })
+    )
+}
 export default ChatLog
\ No newline at end of file

From a425ea1682f278fa9d2f144066262334c669d3f4 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Mon, 30 Jan 2023 01:35:50 -0800
Subject: [PATCH 06/21] Wave 3 still debugging

---
 src/components/ChatEntry.js | 6 ++----
 src/components/ChatLog.js   | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index dc848adc1..0ba1c7371 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -9,12 +9,10 @@ const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
       sender,
       body, 
       timeStamp, 
-      liked : !liked,
-      onUpdateChat
+      liked : !liked
     })
   }
-
-  const heartStyle = liked ? '❤️' : '🤍'
+  const heartStyle = liked ? '❤️' : '🤍';
 
   return (
     <div className="chat-entry local">
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index b6bd9f725..8cac83adc 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -31,6 +31,6 @@ ChatLog.PropTypes = {
             liked: PropTypes.bool.isRequired,
             onUpdateChat:PropTypes.func.isRequired
         })
-    )
+    ).isRequired
 }
 export default ChatLog
\ No newline at end of file

From be731750646dbb82b47163ece63431acef34eaff Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Mon, 30 Jan 2023 22:25:17 -0800
Subject: [PATCH 07/21] debug completed

---
 src/App.js                   |  6 +++---
 src/components/ChatEntry.css |  4 +---
 src/components/ChatLog.js    | 10 +++++-----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 476b79fd1..d0a9e7efe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,14 +4,14 @@ import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
 const App = () => {
-  const [chatEntries, setChatEntries] = useState(chatMessages);  
+  const [chatEntries, setChatEntries] = useState(chatMessages);   
 
   const updateChatEntry = (chatToUpdate) => {
     const chats = chatEntries.map((entry) => {
       if(entry.id === chatToUpdate.id){
         return chatToUpdate; 
       }
-      return entry; 
+      return entry;
     });
     setChatEntries(chats); 
   };
@@ -22,7 +22,7 @@ const App = () => {
         <h1>Application title</h1>
       </header>
       <main>
-        <ChatLog entries = {chatMessages}
+        <ChatLog entries = {chatEntries}
           onUpdateChat = {updateChatEntry}
         />
       </main>
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 748d89d38..05c3baa44 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,6 +97,4 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
-
-/*Like heart styling*/ 
+}
\ No newline at end of file
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 8cac83adc..706e4ad4e 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import React from 'react'; 
 import ChatEntry from './ChatEntry';
+import './ChatLog.css'; 
 
 
 const ChatLog = ({entries, onUpdateChat}) => {
@@ -13,7 +13,7 @@ const ChatLog = ({entries, onUpdateChat}) => {
                     timeStamp = {message.timeStamp}
                     id = {message.id}
                     liked = {message.liked}
-                    onUpdateChat = {message.onUpdateChat}
+                    onUpdateChat = {onUpdateChat}
                 />
             </section>
         );
@@ -22,7 +22,7 @@ const ChatLog = ({entries, onUpdateChat}) => {
 };
 
 ChatLog.PropTypes = {
-    chatMessages: PropTypes.arrayOf(
+    entries: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.number.isRequired,
             sender: PropTypes.string.isRequired,
@@ -30,7 +30,7 @@ ChatLog.PropTypes = {
             timeStamp: PropTypes.string.isRequired,
             liked: PropTypes.bool.isRequired,
             onUpdateChat:PropTypes.func.isRequired
-        })
-    ).isRequired
+        })).isRequired
 }
+
 export default ChatLog
\ No newline at end of file

From 4f1a56c0b4c9bd99dd2e68ab05a1a7885cfc3d71 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Tue, 31 Jan 2023 20:25:07 -0800
Subject: [PATCH 08/21] Like count feature added

---
 src/App.js                  | 18 +++++++++++++++++-
 src/components/ChatEntry.js |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index d0a9e7efe..ebfe5cafa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import chatMessages from './data/messages.json';
 
 const App = () => {
   const [chatEntries, setChatEntries] = useState(chatMessages);   
+  let numberLikes = 0 
 
   const updateChatEntry = (chatToUpdate) => {
     const chats = chatEntries.map((entry) => {
@@ -13,13 +14,28 @@ const App = () => {
       }
       return entry;
     });
+
     setChatEntries(chats); 
   };
 
+  const numberOfLikes = () => {
+    for(const entry of chatEntries){
+      if(entry.liked){
+        numberLikes++ 
+      }
+    }
+    return numberLikes
+  }
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <div className='applicationTitle'>
+          <h1>Application title</h1>
+        </div>
+        <div className='numberOfLikes'>
+          <h1>{numberOfLikes()} ❤️s</h1>
+        </div>
       </header>
       <main>
         <ChatLog entries = {chatEntries}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 0ba1c7371..838160828 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,7 +2,7 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
+const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked, numberLikes}) => {
   const updateClickState = () => {
     onUpdateChat({
       id, 
@@ -14,6 +14,7 @@ const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
   }
   const heartStyle = liked ? '❤️' : '🤍';
 
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>

From caac5d73a6cbd034baae0b018be159879c8002fc Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Tue, 31 Jan 2023 20:52:12 -0800
Subject: [PATCH 09/21] Count like feature updated

---
 src/App.js                  | 19 +++++--------------
 src/components/ChatEntry.js |  3 +--
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index ebfe5cafa..c5374c747 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,38 +3,29 @@ import './App.css';
 import ChatLog from './components/ChatLog'; 
 import chatMessages from './data/messages.json';
 
+let numberLikes = 0;
+
 const App = () => {
   const [chatEntries, setChatEntries] = useState(chatMessages);   
-  let numberLikes = 0 
-
   const updateChatEntry = (chatToUpdate) => {
     const chats = chatEntries.map((entry) => {
       if(entry.id === chatToUpdate.id){
+        numberLikes = chatToUpdate.liked ? numberLikes+1 : numberLikes-1
         return chatToUpdate; 
       }
       return entry;
     });
-
     setChatEntries(chats); 
   };
 
-  const numberOfLikes = () => {
-    for(const entry of chatEntries){
-      if(entry.liked){
-        numberLikes++ 
-      }
-    }
-    return numberLikes
-  }
-
   return (
     <div id="App">
       <header>
         <div className='applicationTitle'>
-          <h1>Application title</h1>
+          <h1>Chat between Vladimir and Estragon</h1>
         </div>
         <div className='numberOfLikes'>
-          <h1>{numberOfLikes()} ❤️s</h1>
+          <h1>{numberLikes} ❤️s</h1>
         </div>
       </header>
       <main>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 838160828..0ba1c7371 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,7 +2,7 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked, numberLikes}) => {
+const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
   const updateClickState = () => {
     onUpdateChat({
       id, 
@@ -14,7 +14,6 @@ const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked, numberLike
   }
   const heartStyle = liked ? '❤️' : '🤍';
 
-
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>

From 60796dedc747a7f02494398c4f242d1260a2b7a8 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Tue, 31 Jan 2023 21:17:25 -0800
Subject: [PATCH 10/21] Format chat box to have one sender of the left and
 another one on the right

---
 src/components/ChatEntry.css | 8 ++++++++
 src/components/ChatEntry.js  | 9 ++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..4f5451f68 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,12 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
+}
+
+.Vladimir {
+  margin-left: 10%;
+}
+
+.Estragon {
+  margin-left: 75%;
 }
\ No newline at end of file
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 0ba1c7371..f358344b4 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -13,9 +13,16 @@ const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
     })
   }
   const heartStyle = liked ? '❤️' : '🤍';
+  let entryClass = ''
+
+  if(sender === 'Vladimir'){
+    entryClass = 'Vladimir';
+  }else{
+    entryClass = 'Estragon'; 
+  }
 
   return (
-    <div className="chat-entry local">
+    <div className={`chat-entry local ${entryClass}`}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>

From 2fc427fdb65e36dfdbb2f104a8faafb6417d1b3b Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Tue, 31 Jan 2023 21:26:00 -0800
Subject: [PATCH 11/21] Optional wave in progress

---
 src/App.css | 10 +++++++++-
 src/App.js  |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index d97beb4e6..2a6538b87 100644
--- a/src/App.css
+++ b/src/App.css
@@ -71,4 +71,12 @@
 
 .purple {
   color: purple
-}
\ No newline at end of file
+}
+
+.numberOfLikes {
+  background-color: aliceblue;
+}
+
+.numberLikes {
+  color: black;
+}
diff --git a/src/App.js b/src/App.js
index c5374c747..8ffd8035c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,10 +22,10 @@ const App = () => {
     <div id="App">
       <header>
         <div className='applicationTitle'>
-          <h1>Chat between Vladimir and Estragon</h1>
+          <h1>Chat between Vladimir Estragon</h1>
         </div>
         <div className='numberOfLikes'>
-          <h1>{numberLikes} ❤️s</h1>
+          <h1 className='numberLikes'>{numberLikes} ❤️s</h1>
         </div>
       </header>
       <main>

From 58066890cf397d6cb838335fa0ed9410c9a2afef Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 00:37:42 -0800
Subject: [PATCH 12/21] Styling in progress.

---
 src/App.css                  |  2 +-
 src/App.js                   |  4 +++-
 src/components/ChatEntry.css | 10 ++--------
 src/components/ChatEntry.js  |  6 +++---
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 2a6538b87..2ebe1692e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -46,7 +46,7 @@
 }
 
 #App span {
-  display: inline-block
+  display: inline-block;
 }
 
 .red {
diff --git a/src/App.js b/src/App.js
index 8ffd8035c..4dbd150cd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,10 +22,12 @@ const App = () => {
     <div id="App">
       <header>
         <div className='applicationTitle'>
-          <h1>Chat between Vladimir Estragon</h1>
+          <h1>Chat between <span className='green'>Vladimir</span> and <span className='blue'>Estragon</span> </h1>
         </div>
         <div className='numberOfLikes'>
+          <span className='green'>Vladimir's color</span>
           <h1 className='numberLikes'>{numberLikes} ❤️s</h1>
+          <span className='blue'>Estragon's color</span>
         </div>
       </header>
       <main>
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 4f5451f68..54116a818 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -17,6 +17,7 @@ button {
 }
 
 .chat-entry .entry-bubble {
+  color: green;
   background-color: #ffffe0;
   border-radius: 30px;
   max-width: 50rem;
@@ -80,6 +81,7 @@ button {
   background-color: #e0ffff;
   margin-left: auto;
   margin-right: 0;
+  color: blue;
 }
 
 .chat-entry.remote .entry-bubble:hover {
@@ -97,12 +99,4 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
-
-.Vladimir {
-  margin-left: 10%;
-}
-
-.Estragon {
-  margin-left: 75%;
 }
\ No newline at end of file
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index f358344b4..8589c7a98 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -16,13 +16,13 @@ const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
   let entryClass = ''
 
   if(sender === 'Vladimir'){
-    entryClass = 'Vladimir';
+    entryClass = 'local';
   }else{
-    entryClass = 'Estragon'; 
+    entryClass = 'remote'; 
   }
 
   return (
-    <div className={`chat-entry local ${entryClass}`}>
+    <div className={`chat-entry ${entryClass}`}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>

From d4cf21ccadf5b6cd8961d77cc3c6a625e4269934 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 14:54:42 -0800
Subject: [PATCH 13/21] Completed

---
 src/App.css | 8 ++++++++
 src/App.js  | 2 --
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 2ebe1692e..25013a9ab 100644
--- a/src/App.css
+++ b/src/App.css
@@ -80,3 +80,11 @@
 .numberLikes {
   color: black;
 }
+
+.vladimir_sub_header {
+  
+}
+
+.estragon_sub_header {
+
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 4dbd150cd..3a51219e8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,9 +25,7 @@ const App = () => {
           <h1>Chat between <span className='green'>Vladimir</span> and <span className='blue'>Estragon</span> </h1>
         </div>
         <div className='numberOfLikes'>
-          <span className='green'>Vladimir's color</span>
           <h1 className='numberLikes'>{numberLikes} ❤️s</h1>
-          <span className='blue'>Estragon's color</span>
         </div>
       </header>
       <main>

From 7bc579ab1247b530d2e7e51fd594b0711c3007fd Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 15:01:39 -0800
Subject: [PATCH 14/21] Bug fixed

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

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 706e4ad4e..dad5966e6 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -21,7 +21,7 @@ const ChatLog = ({entries, onUpdateChat}) => {
     return(messages);
 };
 
-ChatLog.PropTypes = {
+ChatLog.propTypes = {
     entries: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.number.isRequired,

From b6cd3e4a996126197a9092355e4cedaf6caf45e4 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 15:07:38 -0800
Subject: [PATCH 15/21] fixed propTypes

---
 src/components/ChatEntry.js | 2 +-
 src/components/ChatLog.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 8589c7a98..26cb45315 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -38,7 +38,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
-  onUpdateChat:PropTypes.func.isRequired
+  onUpdateChat:PropTypes.func
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index dad5966e6..375a1aded 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -29,7 +29,7 @@ ChatLog.propTypes = {
             body: PropTypes.string.isRequired,
             timeStamp: PropTypes.string.isRequired,
             liked: PropTypes.bool.isRequired,
-            onUpdateChat:PropTypes.func.isRequired
+            onUpdateChat:PropTypes.func
         })).isRequired
 }
 

From 8e12c171f99bad560ca52186706bcb1a612f511e Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 15:08:53 -0800
Subject: [PATCH 16/21] Fixed proptypes

---
 src/components/ChatEntry.js | 10 +++++-----
 src/components/ChatLog.js   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 26cb45315..c23bf766b 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -33,11 +33,11 @@ const ChatEntry = ({id, sender, body, timeStamp, onUpdateChat, liked}) => {
   )};
 
 ChatEntry.propTypes = {
-  id: PropTypes.number.isRequired,
-  sender: PropTypes.string.isRequired,
-  body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired,
+  id: PropTypes.number,
+  sender: PropTypes.string,
+  body: PropTypes.string,
+  timeStamp: PropTypes.string,
+  liked: PropTypes.bool,
   onUpdateChat:PropTypes.func
 };
 
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 375a1aded..fa93b4ec3 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -24,11 +24,11 @@ const ChatLog = ({entries, onUpdateChat}) => {
 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,
+            id: PropTypes.number,
+            sender: PropTypes.string,
+            body: PropTypes.string,
+            timeStamp: PropTypes.string,
+            liked: PropTypes.bool,
             onUpdateChat:PropTypes.func
         })).isRequired
 }

From 1392545d7c78beb27384ed68162c2423d01ede08 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 23:19:29 -0800
Subject: [PATCH 17/21] key added to chatlog.js

---
 src/components/ChatLog.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index fa93b4ec3..c3c5ab1c5 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -8,6 +8,7 @@ const ChatLog = ({entries, onUpdateChat}) => {
         return(
             <section key = {message.id}>
                 <ChatEntry 
+                    key={message.id}
                     sender = {message.sender}
                     body = {message.body}
                     timeStamp = {message.timeStamp}

From 9b9fc2b2180fdb6aa7170083fd7c8943ccf7981f Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 23:27:59 -0800
Subject: [PATCH 18/21] key added to chatlog.js

---
 src/components/ChatLog.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index c3c5ab1c5..b4711ce2a 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -4,13 +4,13 @@ import './ChatLog.css';
 
 
 const ChatLog = ({entries, onUpdateChat}) => {
-    const messages = entries.map((message) => {
+    const messages = entries.map((message, index) => {
         return(
             <section key = {message.id}>
                 <ChatEntry 
-                    key={message.id}
+                    key = {index}
                     sender = {message.sender}
-                    body = {message.body}
+                    body = {message.body} 
                     timeStamp = {message.timeStamp}
                     id = {message.id}
                     liked = {message.liked}

From 33c00c086d175d68febd2d9e192d164806f14c01 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Wed, 1 Feb 2023 23:30:36 -0800
Subject: [PATCH 19/21] key added to chatlog.js

---
 src/components/ChatLog.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index b4711ce2a..e190c9ba8 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -6,9 +6,8 @@ import './ChatLog.css';
 const ChatLog = ({entries, onUpdateChat}) => {
     const messages = entries.map((message, index) => {
         return(
-            <section key = {message.id}>
+            <section key = {index}>
                 <ChatEntry 
-                    key = {index}
                     sender = {message.sender}
                     body = {message.body} 
                     timeStamp = {message.timeStamp}

From f4f72af42c16452c9ce65763ddfcd000a1d46444 Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Thu, 2 Feb 2023 10:50:33 -0800
Subject: [PATCH 20/21] Modified heart count to use useState

---
 src/App.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3a51219e8..f278828b6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,20 +3,20 @@ import './App.css';
 import ChatLog from './components/ChatLog'; 
 import chatMessages from './data/messages.json';
 
-let numberLikes = 0;
-
 const App = () => {
   const [chatEntries, setChatEntries] = useState(chatMessages);   
+  const [numberLikes, setNumberLikes] = useState(0);   
+
   const updateChatEntry = (chatToUpdate) => {
     const chats = chatEntries.map((entry) => {
       if(entry.id === chatToUpdate.id){
-        numberLikes = chatToUpdate.liked ? numberLikes+1 : numberLikes-1
+        setNumberLikes(chatToUpdate.liked ? numberLikes+1 : numberLikes-1) 
         return chatToUpdate; 
       }
       return entry;
     });
-    setChatEntries(chats); 
-  };
+    setChatEntries(chats);
+  }; 
 
   return (
     <div id="App">

From 8421b758c9f0907aea08fbf9b9d56acf099f413b Mon Sep 17 00:00:00 2001
From: Yufei Bao <ybao1005@gmail.com>
Date: Tue, 7 Feb 2023 14:24:59 -0800
Subject: [PATCH 21/21] Test github token

---
 src/components/ChatLog.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index e190c9ba8..f55b5528e 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 import './ChatLog.css'; 
 
-
 const ChatLog = ({entries, onUpdateChat}) => {
     const messages = entries.map((message, index) => {
         return(