From 412f49a0b73649674c2f2e714ad8f7367fa6ede3 Mon Sep 17 00:00:00 2001
From: Alexa Coffman <coffman.alexa@gmail.com>
Date: Fri, 17 Jun 2022 10:38:37 -0700
Subject: [PATCH 1/6] display first message

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

diff --git a/src/App.js b/src/App.js
index c10859093..598fc1ca3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,22 @@
 import React from 'react';
 import './App.css';
+import ChatEntry from './components/ChatEntry';
 import chatMessages from './data/messages.json';
 
 const App = () => {
+  const firstMessage = chatMessages[0];
+
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
+        <ChatEntry
+          sender={firstMessage.sender}
+          body={firstMessage.body}
+          timeStamp={firstMessage.timeStamp}
+        ></ChatEntry>
         {/* 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..2ae589bab 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 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"> {props.timeStamp} </p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -16,7 +16,9 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;

From d3d60224ba58ebf6a36ce1f08f0bc475c2510faf Mon Sep 17 00:00:00 2001
From: Alexa Coffman <coffman.alexa@gmail.com>
Date: Sat, 18 Jun 2022 11:52:00 -0700
Subject: [PATCH 2/6] created ChatLog component, updated App component to show
 all entries

---
 src/App.js                | 12 +++---------
 src/components/ChatLog.js | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index 598fc1ca3..37e98c145 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,16 @@
 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 = () => {
-  const firstMessage = chatMessages[0];
-
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Log</h1>
       </header>
       <main>
-        <ChatEntry
-          sender={firstMessage.sender}
-          body={firstMessage.body}
-          timeStamp={firstMessage.timeStamp}
-        ></ChatEntry>
+        <ChatLog entries={chatMessages}></ChatLog>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
       </main>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..1b464e502
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+import './ChatLog.css';
+
+const ChatLog = (props) => {
+  const chatComponents = props.entries.map((entries, index) => {
+    return (
+      <section>
+        <ChatEntry
+          sender={entries.sender}
+          body={entries.body}
+          timeStamp={entries.timeStamp}
+        ></ChatEntry>
+      </section>
+    );
+  });
+
+  return (
+    <section>
+      <ul class="chat-log">{chatComponents}</ul>
+    </section>
+  );
+};
+
+ChatLog.prototype = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+    })
+  ),
+};
+
+export default ChatLog;

From ffb9fdc2cf3e87771a9a0f4763f0c1d9cf89e255 Mon Sep 17 00:00:00 2001
From: Alexa Coffman <coffman.alexa@gmail.com>
Date: Sat, 18 Jun 2022 11:59:05 -0700
Subject: [PATCH 3/6] updated ChatEntry to use remote css if sender is not
 Vladimir

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 2ae589bab..9fae4649c 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,16 +3,29 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
 const ChatEntry = (props) => {
-  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"> {props.timeStamp} </p>
-        <button className="like">🤍</button>
-      </section>
-    </div>
-  );
+  if (props.sender === 'Vladimir') {
+    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"> {props.timeStamp} </p>
+          <button className="like">🤍</button>
+        </section>
+      </div>
+    );
+  } else {
+    return (
+      <div className="chat-entry remote">
+        <h2 className="entry-name"> {props.sender} </h2>
+        <section className="entry-bubble">
+          <p> {props.body} </p>
+          <p className="entry-time"> {props.timeStamp} </p>
+          <button className="like">🤍</button>
+        </section>
+      </div>
+    );
+  }
 };
 
 ChatEntry.propTypes = {

From b0587cbb8cecff9a642f58018d1c74f86cae4e96 Mon Sep 17 00:00:00 2001
From: Alexa Coffman <coffman.alexa@gmail.com>
Date: Sat, 18 Jun 2022 13:15:22 -0700
Subject: [PATCH 4/6] added onClick behavior to like heart, heart changes
 colors

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

diff --git a/src/App.js b/src/App.js
index 37e98c145..3da426f2c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
 const App = () => {
+  const [entryData, setEntryData] = useState(chatMessages);
+
+  const updateEntryData = (updatedEntry) => {
+    const entries = entryData.map((chatEntry) => {
+      if (chatEntry.id === updatedEntry.id) {
+        return updatedEntry;
+      } else {
+        return chatEntry;
+      }
+    });
+    setEntryData(entries);
+  };
+
   return (
     <div id="App">
       <header>
         <h1>Chat Log</h1>
       </header>
       <main>
-        <ChatLog entries={chatMessages}></ChatLog>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog entries={entryData} onUpdateEntry={updateEntryData}></ChatLog>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 9fae4649c..15e00fc8e 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,6 +3,19 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
 const ChatEntry = (props) => {
+  const onLikeButtonClick = () => {
+    const updatedEntry = {
+      id: props.id,
+      sender: props.sender,
+      body: props.body,
+      timeStamp: props.timeStamp,
+      liked: !props.liked,
+    };
+    props.onUpdate(updatedEntry);
+  };
+
+  const heart = props.liked ? '❤️' : '🤍';
+
   if (props.sender === 'Vladimir') {
     return (
       <div className="chat-entry local">
@@ -10,7 +23,9 @@ const ChatEntry = (props) => {
         <section className="entry-bubble">
           <p> {props.body} </p>
           <p className="entry-time"> {props.timeStamp} </p>
-          <button className="like">🤍</button>
+          <button className="like" onClick={onLikeButtonClick}>
+            {heart}
+          </button>
         </section>
       </div>
     );
@@ -21,7 +36,9 @@ const ChatEntry = (props) => {
         <section className="entry-bubble">
           <p> {props.body} </p>
           <p className="entry-time"> {props.timeStamp} </p>
-          <button className="like">🤍</button>
+          <button className="like" onClick={onLikeButtonClick}>
+            {heart}
+          </button>
         </section>
       </div>
     );
@@ -29,9 +46,12 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
+  id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool,
+  onUpdate: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 1b464e502..b29679993 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -4,13 +4,16 @@ import PropTypes from 'prop-types';
 import './ChatLog.css';
 
 const ChatLog = (props) => {
-  const chatComponents = props.entries.map((entries, index) => {
+  const chatComponents = props.entries.map((chatEntry, index) => {
     return (
       <section>
         <ChatEntry
-          sender={entries.sender}
-          body={entries.body}
-          timeStamp={entries.timeStamp}
+          id={chatEntry.id}
+          sender={chatEntry.sender}
+          body={chatEntry.body}
+          timeStamp={chatEntry.timeStamp}
+          liked={chatEntry.liked}
+          onUpdate={props.onUpdateEntry}
         ></ChatEntry>
       </section>
     );
@@ -18,19 +21,22 @@ const ChatLog = (props) => {
 
   return (
     <section>
-      <ul class="chat-log">{chatComponents}</ul>
+      <ul className="chat-log">{chatComponents}</ul>
     </section>
   );
 };
 
-ChatLog.prototype = {
+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,
     })
   ),
+  onUpdateEntry: PropTypes.func.isRequired,
 };
 
 export default ChatLog;

From 36cbedef7d1429ffba1c68c38c341ba351f1362d Mon Sep 17 00:00:00 2001
From: Alexa Coffman <coffman.alexa@gmail.com>
Date: Sat, 18 Jun 2022 13:47:26 -0700
Subject: [PATCH 5/6] Added updateLikes helper and display counter

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

diff --git a/src/App.js b/src/App.js
index 3da426f2c..dbcb04489 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,9 +3,20 @@ import './App.css';
 import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
 
+let totalLikes = 0;
+
+const updateLikes = (entryData) => {
+  let likes = 0;
+  for (const entry of entryData) {
+    if (entry.liked) {
+      likes += 1;
+    }
+  }
+  totalLikes = likes;
+};
+
 const App = () => {
   const [entryData, setEntryData] = useState(chatMessages);
-
   const updateEntryData = (updatedEntry) => {
     const entries = entryData.map((chatEntry) => {
       if (chatEntry.id === updatedEntry.id) {
@@ -15,12 +26,18 @@ const App = () => {
       }
     });
     setEntryData(entries);
+    updateLikes(entries);
   };
 
   return (
     <div id="App">
       <header>
-        <h1>Chat Log</h1>
+        <h1>Chat between Vladimir and Estragon</h1>
+        <section className="header section">
+          <h4 id="heartWidget" className="widget">
+            {totalLikes} ❤️s
+          </h4>
+        </section>
       </header>
       <main>
         <ChatLog entries={entryData} onUpdateEntry={updateEntryData}></ChatLog>

From 3512f97bc079c6f3798c8d69e955e15ca11c3243 Mon Sep 17 00:00:00 2001
From: Alexa Coffman <coffman.alexa@gmail.com>
Date: Sat, 18 Jun 2022 14:16:13 -0700
Subject: [PATCH 6/6] added TimeStamp components to ChatEntry

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 15e00fc8e..86d1f6a0a 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = (props) => {
   const onLikeButtonClick = () => {
@@ -22,7 +23,12 @@ const ChatEntry = (props) => {
         <h2 className="entry-name"> {props.sender} </h2>
         <section className="entry-bubble">
           <p> {props.body} </p>
-          <p className="entry-time"> {props.timeStamp} </p>
+          <p className="entry-time">
+            <TimeStamp
+              time={props.timeStamp}
+              className="entry-time"
+            ></TimeStamp>
+          </p>
           <button className="like" onClick={onLikeButtonClick}>
             {heart}
           </button>
@@ -35,7 +41,12 @@ const ChatEntry = (props) => {
         <h2 className="entry-name"> {props.sender} </h2>
         <section className="entry-bubble">
           <p> {props.body} </p>
-          <p className="entry-time"> {props.timeStamp} </p>
+          <p className="entry-time">
+            <TimeStamp
+              time={props.timeStamp}
+              className="entry-time"
+            ></TimeStamp>
+          </p>
           <button className="like" onClick={onLikeButtonClick}>
             {heart}
           </button>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index b29679993..dbbbe40a9 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import './ChatLog.css';
 
 const ChatLog = (props) => {
-  const chatComponents = props.entries.map((chatEntry, index) => {
+  const chatComponents = props.entries.map((chatEntry) => {
     return (
       <section>
         <ChatEntry