From 71918ce44c43ed8cfe3911f0e262fbe8472472f4 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Tue, 31 Jan 2023 21:55:07 -0800
Subject: [PATCH 01/17] wave1: pass props to ChatEntry component

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

diff --git a/src/App.js b/src/App.js
index c10859093..08ba54f03 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,18 @@
 import React from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
 
 const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        <ChatEntry></ChatEntry>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..ba16f36cf 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
+  // const id = props.id
+  const sender = props.sender;
+  const body = props.body;
+  const timeStamp = props.timeStamp;
+  // const liked = props.liked
+
   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={props.timeStamp} /></p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -16,7 +23,11 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  // id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.instanceOf(TimeStamp).isRequired
+  // liked: PropTypes.bool.isRequired
 };
 
 export default ChatEntry;

From 2aed422d0f48afe759b2b1afcf1b729021b0e682 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Tue, 31 Jan 2023 22:23:50 -0800
Subject: [PATCH 02/17] wave2: render ChatLog componeny

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

diff --git a/src/App.js b/src/App.js
index 08ba54f03..ad07999a4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 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,7 +12,7 @@ const App = () => {
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
-        <ChatEntry></ChatEntry>
+        <ChatLog entries={chatMessages} />
       </main>
     </div>
   );

From 2e702d0b2dce17ac594c6995b60f8224f28f35c8 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Tue, 31 Jan 2023 22:24:18 -0800
Subject: [PATCH 03/17] wave2: create ChatLog component

---
 src/components/ChatLog.js | 40 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..947a8dace
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import './ChatLog.css';
+import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = (props) => {
+  const messages = props.entries.map((message) => {
+    return (
+
+      <div key={message.id}>
+        <ChatEntry
+          id={message.id}
+          sender={message.sender}
+          body={message.body}
+          timeStamp={message.timeStamp}
+          liked={message.liked}
+        />
+      </div>
+
+    );
+  });
+
+  return <section className="chat-log">{messages}</section>;
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string,
+      timeStamp: PropTypes.instanceOf(TimeStamp).isRequired
+      // liked: PropTypes.bool.isRequired,
+    })
+  )
+};
+
+export default ChatLog;

From c07cd17f18e3b63df022f64dcd8ccfae5b3194f4 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Tue, 31 Jan 2023 22:24:45 -0800
Subject: [PATCH 04/17] wave2: update ChatEntry to include id prop

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index ba16f36cf..a0d3ccc99 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
-  // const id = props.id
+  // const id = props.id;
   const sender = props.sender;
   const body = props.body;
   const timeStamp = props.timeStamp;
@@ -23,7 +23,7 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  // id: PropTypes.number.isRequired,
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.instanceOf(TimeStamp).isRequired

From 3e189b2c67dfb6bb71f3f2187e8a7695b308dd7d Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 17:36:49 -0800
Subject: [PATCH 05/17] Add correct title

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

diff --git a/src/App.js b/src/App.js
index ad07999a4..2723def93 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,7 +7,7 @@ const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Chat between</h1>
+        <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component

From e532e70578e4d7ab7454f5b4c957773be66378b5 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 17:46:01 -0800
Subject: [PATCH 06/17] Add Estragon chatbox to the right side via ternary
 operator

---
 src/components/ChatEntry.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index a0d3ccc99..c3b622b1e 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -10,8 +10,10 @@ const ChatEntry = (props) => {
   const timeStamp = props.timeStamp;
   // const liked = props.liked
 
+  const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
+
   return (
-    <div className="chat-entry local">
+    <div className={senderSide}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>

From 02959fc37a227bf3e9870ffde59e4398ac00286d Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 17:50:12 -0800
Subject: [PATCH 07/17] Add liked prop

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

diff --git a/src/App.js b/src/App.js
index 2723def93..c8aae12c5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,8 +10,6 @@ const App = () => {
         <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
         <ChatLog entries={chatMessages} />
       </main>
     </div>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index c3b622b1e..a105628f5 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
-  // const id = props.id;
+  const id = props.id;
   const sender = props.sender;
   const body = props.body;
   const timeStamp = props.timeStamp;
-  // const liked = props.liked
+  const liked = props.liked
 
   const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
 
@@ -28,8 +28,8 @@ ChatEntry.propTypes = {
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.instanceOf(TimeStamp).isRequired
-  // liked: PropTypes.bool.isRequired
+  timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
+  liked: PropTypes.bool.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 947a8dace..a987c9276 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -31,8 +31,8 @@ ChatLog.propTypes = {
       id: PropTypes.number.isRequired,
       sender: PropTypes.string.isRequired,
       body: PropTypes.string,
-      timeStamp: PropTypes.instanceOf(TimeStamp).isRequired
-      // liked: PropTypes.bool.isRequired,
+      timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
+      liked: PropTypes.bool.isRequired
     })
   )
 };

From e4ead75d6fb71d82cc4a7b0d08df1fcfadc5c08c Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 18:09:45 -0800
Subject: [PATCH 08/17] Add new attribute likedCount in entryData

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index a105628f5..cd5431b80 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -9,6 +9,7 @@ const ChatEntry = (props) => {
   const body = props.body;
   const timeStamp = props.timeStamp;
   const liked = props.liked
+  const likedCount = props.likedCount
 
   const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
 
@@ -29,7 +30,8 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
-  liked: PropTypes.bool.isRequired
+  liked: PropTypes.bool.isRequired,
+  likedCount: PropTypes.number.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index a987c9276..ae4b39f60 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -16,6 +16,7 @@ const ChatLog = (props) => {
           body={message.body}
           timeStamp={message.timeStamp}
           liked={message.liked}
+          likedCount={messages.likedCount}
         />
       </div>
 
@@ -32,7 +33,8 @@ ChatLog.propTypes = {
       sender: PropTypes.string.isRequired,
       body: PropTypes.string,
       timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
-      liked: PropTypes.bool.isRequired
+      liked: PropTypes.bool.isRequired,
+      likedCount: PropTypes.number.isRequired
     })
   )
 };

From fea50b09732f23cd7ea0b742cd0e966638173bbe Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 18:10:29 -0800
Subject: [PATCH 09/17] Set and update state for a liked message

---
 src/App.js | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index c8aae12c5..17a6fa80d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,15 +2,34 @@ import React from 'react';
 import './App.css';
 import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
+import { useState } from 'react';
 
 const App = () => {
+  const [entryData, setEntryData] = useState(chatMessages);
+
+  const updateLikedMessage = (id) => {
+    const allEntries = entryData.map(entry => {
+      if (entry.id === id) {
+        return {...entry, likedCount: entry.likedCount + 1};
+      } else {
+        return entry;
+      }
+    });
+
+    setEntryData(allEntries);
+  };
+
+  // const totalLikes = (entryData) => {
+
+  // };
+
   return (
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
-        <ChatLog entries={chatMessages} />
+        <ChatLog entries={chatMessages} onUpdateLikedMessage={updateLikedMessage}/>
       </main>
     </div>
   );

From 54362165b441395ef9a4c811ad6716c0e995d9c3 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 18:12:51 -0800
Subject: [PATCH 10/17] Add onUpdateLikedMessage as a prop in Chatlog and
 require it

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

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index ae4b39f60..34a78bad0 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -17,6 +17,7 @@ const ChatLog = (props) => {
           timeStamp={message.timeStamp}
           liked={message.liked}
           likedCount={messages.likedCount}
+          onUpdateLikedMessage={props.onUpdateLikedMessage}
         />
       </div>
 
@@ -36,7 +37,8 @@ ChatLog.propTypes = {
       liked: PropTypes.bool.isRequired,
       likedCount: PropTypes.number.isRequired
     })
-  )
+  ), 
+  onUpdateLikedMessage: PropTypes.func.isRequired
 };
 
 export default ChatLog;

From fd86aa9765d2903e584cc30ca27ffe974af2e302 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 18:15:56 -0800
Subject: [PATCH 11/17] Add onUpdateLikedMessage in ChatEntry and require it

---
 src/components/ChatEntry.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index cd5431b80..e3173c922 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -8,8 +8,9 @@ const ChatEntry = (props) => {
   const sender = props.sender;
   const body = props.body;
   const timeStamp = props.timeStamp;
-  const liked = props.liked
-  const likedCount = props.likedCount
+  const liked = props.liked;
+  const likedCount = props.likedCount;
+  const onUpdateLikedMessage =  props.onUpdateLikedMessage;
 
   const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
 
@@ -31,7 +32,8 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
   liked: PropTypes.bool.isRequired,
-  likedCount: PropTypes.number.isRequired
+  likedCount: PropTypes.number.isRequired,
+  onUpdateLikedMessage: PropTypes.func.isRequired
 };
 
 export default ChatEntry;

From 69d143866045d71f03c3a77f4fd088e97c864167 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 18:48:07 -0800
Subject: [PATCH 12/17] Like heart and total likes

---
 src/App.js                  | 20 ++++++++++++++------
 src/components/ChatEntry.js | 12 ++++++++----
 src/components/ChatLog.js   |  4 +---
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 17a6fa80d..f96cd6a5d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,20 +8,24 @@ const App = () => {
   const [entryData, setEntryData] = useState(chatMessages);
 
   const updateLikedMessage = (id) => {
-    const allEntries = entryData.map(entry => {
+    const allEntries = entryData.map((entry) => {
       if (entry.id === id) {
-        return {...entry, likedCount: entry.likedCount + 1};
+        return { ...entry, liked: !entry.liked };
       } else {
         return entry;
       }
     });
-
     setEntryData(allEntries);
   };
 
-  // const totalLikes = (entryData) => {
+  const totalLikes = () => {
+    const allLikes = entryData.reduce((likeCount, entry) => 
+    likeCount + entry.liked, 0);
+    console.log('allik', allLikes)
+    return allLikes
+  };
 
-  // };
+  const allLikes = totalLikes();
 
   return (
     <div id="App">
@@ -29,7 +33,11 @@ const App = () => {
         <h1>Chat between Vladimir and Estragon</h1>
       </header>
       <main>
-        <ChatLog entries={chatMessages} onUpdateLikedMessage={updateLikedMessage}/>
+        <div>{allLikes} ❤️s</div>
+        <ChatLog
+          entries={chatMessages}
+          onUpdateLikedMessage={updateLikedMessage}
+        />
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index e3173c922..e8f637d58 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -9,18 +9,23 @@ const ChatEntry = (props) => {
   const body = props.body;
   const timeStamp = props.timeStamp;
   const liked = props.liked;
-  const likedCount = props.likedCount;
   const onUpdateLikedMessage =  props.onUpdateLikedMessage;
 
   const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
 
+  const heart = liked ? '❤️' : '🤍';
+
   return (
     <div className={senderSide}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
-        <p className="entry-time"><TimeStamp time={props.timeStamp} /></p>
-        <button className="like">🤍</button>
+        <p className="entry-time"><TimeStamp time={timeStamp} /></p>
+        <button 
+          className="like"
+          onClick={() => onUpdateLikedMessage(id)}
+        >
+          {heart}</button>
       </section>
     </div>
   );
@@ -32,7 +37,6 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
   liked: PropTypes.bool.isRequired,
-  likedCount: PropTypes.number.isRequired,
   onUpdateLikedMessage: PropTypes.func.isRequired
 };
 
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 34a78bad0..78b8b841d 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -16,7 +16,6 @@ const ChatLog = (props) => {
           body={message.body}
           timeStamp={message.timeStamp}
           liked={message.liked}
-          likedCount={messages.likedCount}
           onUpdateLikedMessage={props.onUpdateLikedMessage}
         />
       </div>
@@ -34,8 +33,7 @@ ChatLog.propTypes = {
       sender: PropTypes.string.isRequired,
       body: PropTypes.string,
       timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
-      liked: PropTypes.bool.isRequired,
-      likedCount: PropTypes.number.isRequired
+      liked: PropTypes.bool.isRequired
     })
   ), 
   onUpdateLikedMessage: PropTypes.func.isRequired

From 64ff625cc78265377a951090c16623dd4712556c Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 18:53:57 -0800
Subject: [PATCH 13/17] Add total likes to header

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

diff --git a/src/App.js b/src/App.js
index f96cd6a5d..cf50f8c06 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,6 @@ const App = () => {
   const totalLikes = () => {
     const allLikes = entryData.reduce((likeCount, entry) => 
     likeCount + entry.liked, 0);
-    console.log('allik', allLikes)
     return allLikes
   };
 
@@ -31,9 +30,11 @@ const App = () => {
     <div id="App">
       <header>
         <h1>Chat between Vladimir and Estragon</h1>
+        <section>
+          <div className="widget" id="heartWidget">{allLikes} ❤️s</div>
+        </section>
       </header>
       <main>
-        <div>{allLikes} ❤️s</div>
         <ChatLog
           entries={chatMessages}
           onUpdateLikedMessage={updateLikedMessage}

From 6f19d43a437e316ddb8c449ca75cb3e2ffe96835 Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 19:26:26 -0800
Subject: [PATCH 14/17] Fix hearting a message

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index e8f637d58..0128e2f7d 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -9,10 +9,8 @@ const ChatEntry = (props) => {
   const body = props.body;
   const timeStamp = props.timeStamp;
   const liked = props.liked;
-  const onUpdateLikedMessage =  props.onUpdateLikedMessage;
 
   const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
-
   const heart = liked ? '❤️' : '🤍';
 
   return (
@@ -21,11 +19,9 @@ const ChatEntry = (props) => {
       <section className="entry-bubble">
         <p>{body}</p>
         <p className="entry-time"><TimeStamp time={timeStamp} /></p>
-        <button 
-          className="like"
-          onClick={() => onUpdateLikedMessage(id)}
-        >
-          {heart}</button>
+        <button className="like" onClick={() => props.onUpdateLikedMessage(id)}>
+          {heart}
+        </button>
       </section>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 78b8b841d..94a714c4a 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -8,7 +8,6 @@ import ChatEntry from './ChatEntry';
 const ChatLog = (props) => {
   const messages = props.entries.map((message) => {
     return (
-
       <div key={message.id}>
         <ChatEntry
           id={message.id}

From 3cc9d745e0432aff9226fb0d1d140323515c9d2f Mon Sep 17 00:00:00 2001
From: diana <arreoladiana11@gmail.com>
Date: Wed, 1 Feb 2023 20:14:52 -0800
Subject: [PATCH 15/17] Pass entryData as a prop

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

diff --git a/src/App.js b/src/App.js
index cf50f8c06..e93e4d816 100644
--- a/src/App.js
+++ b/src/App.js
@@ -36,7 +36,7 @@ const App = () => {
       </header>
       <main>
         <ChatLog
-          entries={chatMessages}
+          entries={entryData}
           onUpdateLikedMessage={updateLikedMessage}
         />
       </main>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 0128e2f7d..39928391d 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -10,7 +10,9 @@ const ChatEntry = (props) => {
   const timeStamp = props.timeStamp;
   const liked = props.liked;
 
-  const senderSide = (sender === 'Vladimir') ? 'chat-entry local' : 'chat-entry remote';
+  const senderSide =
+    sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+
   const heart = liked ? '❤️' : '🤍';
 
   return (
@@ -18,7 +20,9 @@ const ChatEntry = (props) => {
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
-        <p className="entry-time"><TimeStamp time={timeStamp} /></p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp} />
+        </p>
         <button className="like" onClick={() => props.onUpdateLikedMessage(id)}>
           {heart}
         </button>
@@ -31,9 +35,9 @@ ChatEntry.propTypes = {
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
+  timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool.isRequired,
-  onUpdateLikedMessage: PropTypes.func.isRequired
+  onUpdateLikedMessage: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 94a714c4a..45694ec90 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,7 +2,6 @@ import React from 'react';
 import './ChatLog.css';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
-import TimeStamp from './TimeStamp';
 import ChatEntry from './ChatEntry';
 
 const ChatLog = (props) => {
@@ -31,7 +30,7 @@ ChatLog.propTypes = {
       id: PropTypes.number.isRequired,
       sender: PropTypes.string.isRequired,
       body: PropTypes.string,
-      timeStamp: PropTypes.instanceOf(TimeStamp).isRequired,
+      timeStamp: PropTypes.string.isRequired,
       liked: PropTypes.bool.isRequired
     })
   ), 

From 74037416df10da34bcbc3b0750120f8f2bc5bb8c Mon Sep 17 00:00:00 2001
From: Diana <35948232+diarreola@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:12:53 -0700
Subject: [PATCH 16/17] Update README.md

---
 README.md | 27 +--------------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 71851feea..283b2f3ca 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # React Chat Log
-In this project we will use core React concepts to build a chat messenger-style application that displays a log of chat messages between two people, using static data from a JSON file. We will build user interaction with a like feature. 
+Chat messenger-style application that displays a log of chat messages between two people, using static data from a JSON file. User interaction is built in with a like feature. 
 
 ## Skills Assessed
 - Building React components that receive data through props
@@ -9,28 +9,3 @@ In this project we will use core React concepts to build a chat messenger-style
 - Practicing reading and running tests
 - Using git as part of the development workflow
 - Demonstrating understanding of the front-end layer, and the relationship between user interaction and the UI
-
-## Project Outline
-This project comes with a minimal scaffold based on the baseline React application generated by `create-react-app`. We provide the JSON file with static chat message data and the CSS styles, and you will need to implement all of the components except for the provided `TimeStamp` component.
-
-![React Chat Log demo](./images/react-chatlog-demo.png)
-
-## Project Directions
-- [Planning and Setup](./project-docs/setup.md)
-- [Wave 01: Presentational Component](./project-docs/wave-01.md)
-- [Wave 02: Container Component](./project-docs/wave-02.md)
-- [Wave 03: Event Handling and Lifting Up State](./project-docs/wave-03.md)
-- [Optional Enhancements](./project-docs/optional-enhancements.md)
-
-## Testing
-
-The tests for this project are a mix of unit tests (Waves 01 and 02) and integration tests (Wave 03). The directions for each wave include a section about the tests for that wave. The unit tests provided for Wave 01 and Wave 02 require us to be prescriptive around component and prop names. The integration tests for Wave 03 allow for more freedom in the implementation details of this wave's feature. 
-
-Writing front-end tests is outside the scope of the core curriculum. We provide minimal tests for this project for a few reasons. We can use these tests to partially verify the correctness of our code. Tests support the refactoring process and enforce consistency in implementation details. Additionally, by reviewing these front-end tests, we have some exposure to what unit tests and integration tests look like in front-end testing.
-
-Follow your curiosity to learn more about front-end testing:
-- [Front End Testing: A Complete Conceptual Overview](https://www.testim.io/blog/front-end-testing-complete-overview/)
-- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
-
-
-

From c0dfc743772ea0c736a262d4a4e4b4ebd29fcc8f Mon Sep 17 00:00:00 2001
From: Diana <35948232+diarreola@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:46:09 -0700
Subject: [PATCH 17/17] Update README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 283b2f3ca..2d460c4b2 100644
--- a/README.md
+++ b/README.md
@@ -9,3 +9,7 @@ Chat messenger-style application that displays a log of chat messages between tw
 - Practicing reading and running tests
 - Using git as part of the development workflow
 - Demonstrating understanding of the front-end layer, and the relationship between user interaction and the UI
+
+
+##
+<img width="1227" alt="react-chatlog" src="https://github.com/diarreola/react-chatlog/assets/35948232/7c268926-152f-410d-a91d-42a9e4108b43">