From 5b875020a89ab508cce4b977aff249101474750e Mon Sep 17 00:00:00 2001
From: Lisa Utsett <lisabethutsett@gmail.com>
Date: Thu, 26 Jan 2023 21:51:17 -0500
Subject: [PATCH 1/8] workign through wave 01

---
 src/components/ChatEntry.js | 16 +++++++++++-----
 src/components/ChatLog.css  |  2 ++
 src/components/ChatLog.js   |  9 +++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..4d8775d37 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,13 +2,14 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
-const ChatEntry = (props) => {
+
+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 +17,12 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number.isRequired,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timestamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired
+
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css
index 378848d1f..02100de18 100644
--- a/src/components/ChatLog.css
+++ b/src/components/ChatLog.css
@@ -2,3 +2,5 @@
   margin: auto;
   max-width: 50rem;
 }
+
+
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..0d7be1192
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,9 @@
+import React from "react";
+import './ChatEntry.js';
+import './ChatLog.css';
+
+const ChatLog = () => {
+
+
+    return();
+  }
\ No newline at end of file

From 550da5c14e6df346692618f8026f1bcdc2cc528a Mon Sep 17 00:00:00 2001
From: Lisa Utsett <lisabethutsett@gmail.com>
Date: Tue, 31 Jan 2023 00:45:55 -0500
Subject: [PATCH 2/8] finished wave02

---
 src/App.css                  |  3 +++
 src/App.js                   | 43 ++++++++++++++++++++++++++++++++----
 src/components/ChatEntry.css |  3 ++-
 src/components/ChatEntry.js  | 34 +++++++++++++++++++---------
 src/components/ChatLog.css   |  1 -
 src/components/ChatLog.js    | 40 ++++++++++++++++++++++++++++-----
 6 files changed, 102 insertions(+), 22 deletions(-)

diff --git a/src/App.css b/src/App.css
index d97beb4e6..ec0331526 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,6 +26,7 @@
   display: inline-block;
 }
 
+
 #App header section {
   background-color: #e0ffff;
 }
@@ -38,6 +39,8 @@
   font-size:0.8em;
   padding-left: 1em;
   padding-right: 1em;
+  font-size: 1em;
+  font-weight: bold;
 }
 
 #App #heartWidget {
diff --git a/src/App.js b/src/App.js
index c10859093..512ac6891 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,54 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog.js';
+import { useState } from 'react';
+
 
 const App = () => {
+  const sender1 = chatMessages[0].sender;
+  const sender2 = chatMessages[1].sender;
+  const [chatEntries, setChatEntries] = useState(chatMessages);
+  const [likes, setLikes] = useState(0);
+  const increaseLikes = () =>{
+    setLikes(likes + 1);
+  };
+  const decreaseLikes = () =>{
+    setLikes(likes - 1);
+  };
+  const updateEntry = updatedEntry => {
+    const entries = chatEntries.map(entry => {
+      if (entry.id === updatedEntry.id) {
+        if (updatedEntry.liked) {
+          increaseLikes();
+        }
+        else {
+          decreaseLikes();
+        }
+        return updatedEntry;
+      } else {
+        return entry;
+      }
+    });
+    setChatEntries(entries)
+  }
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat between {sender1} and {sender2}</h1>
+        <section>
+        <p className='widget'>{likes} ❤️'s</p>
+        </section>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        {<ChatLog 
+          entries = {chatEntries}
+          onUpdateEntry = {updateEntry}
+        />}
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..d0e8d6539 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,5 @@ button {
 
 .chat-entry.remote .entry-bubble:hover::before {
   background-color: #a9f6f6;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 4d8775d37..2786388e3 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,16 +1,30 @@
-import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
+const ChatEntry = (props) => {
 
-const ChatEntry = ( props ) => {
+  const onUpdateButtonClick = () => {
+    const updatedEntry = {
+      id: props.id,
+      sender: props.sender,
+      timeStamp: props.timeStamp,
+      body: props.body,
+      liked: !props.isLiked
+    };
+    props.onUpdate(updatedEntry);
+};
+
+  const heart = props.isLiked ? '❤️' : '🤍';
+  const senderClass = props.sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+  
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">{ props.sender }</h2>
+    <div className={senderClass} > 
+      <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>
+        <p> {props.body} </p>
+        <p className="entry-time">{<TimeStamp time = {props.timeStamp}/> }</p>
+        <button className="liked" onClick={onUpdateButtonClick}>{heart}</button>
       </section>
     </div>
   );
@@ -20,9 +34,9 @@ ChatEntry.propTypes = {
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timestamp: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired
-
+  timeStamp: PropTypes.string.isRequired,
+  isLiked: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css
index 02100de18..a7043e1d1 100644
--- a/src/components/ChatLog.css
+++ b/src/components/ChatLog.css
@@ -3,4 +3,3 @@
   max-width: 50rem;
 }
 
-
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 0d7be1192..7964ac29a 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,9 +1,37 @@
-import React from "react";
-import './ChatEntry.js';
-import './ChatLog.css';
+import React from 'react';
+import ChatEntry from './ChatEntry.js';
+import PropTypes from 'prop-types';
 
-const ChatLog = () => {
+const ChatLog = (props) => {
+    const chatEntries = props.entries.map((entry) => (
+        <ChatEntry
+            id = {entry.id}
+            sender = {entry.sender} 
+            timeStamp = {entry.timeStamp}
+            body = {entry.body} 
+            isLiked = {entry.liked}
+            onUpdate = {props.onUpdateEntry}
+        />
+        
+    ));
 
+    return (
+        <section className="chat-log">         
+            {chatEntries}
+        </section>
+    );
+};
 
-    return();
-  }
\ No newline at end of file
+
+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
+    })),
+    onUpdate: PropTypes.func.isRequired
+};
+
+export default ChatLog;
\ No newline at end of file

From 489b3f89fc5b3479e78dc7d4b184e031b74f88a3 Mon Sep 17 00:00:00 2001
From: Lisa Utsett <lisabethutsett@gmail.com>
Date: Tue, 31 Jan 2023 11:00:24 -0500
Subject: [PATCH 3/8] finished waved 3

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

diff --git a/src/App.js b/src/App.js
index 512ac6891..a76b7476c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,20 +10,23 @@ const App = () => {
   const sender2 = chatMessages[1].sender;
   const [chatEntries, setChatEntries] = useState(chatMessages);
   const [likes, setLikes] = useState(0);
-  const increaseLikes = () =>{
+
+  const incLikes = () =>{
     setLikes(likes + 1);
   };
-  const decreaseLikes = () =>{
+
+  const decLikes = () =>{
     setLikes(likes - 1);
   };
+
   const updateEntry = updatedEntry => {
     const entries = chatEntries.map(entry => {
       if (entry.id === updatedEntry.id) {
         if (updatedEntry.liked) {
-          increaseLikes();
+          incLikes();
         }
         else {
-          decreaseLikes();
+          decLikes();
         }
         return updatedEntry;
       } else {
@@ -38,13 +41,14 @@ const App = () => {
       <header>
         <h1>Chat between {sender1} and {sender2}</h1>
         <section>
-        <p className='widget'>{likes} ❤️'s</p>
+        <p className='widget'>{likes} ❤️s</p>
         </section>
       </header>
       <main>
         {<ChatLog 
           entries = {chatEntries}
           onUpdateEntry = {updateEntry}
+          sender1 = {sender1} // local sender
         />}
       </main>
     </div>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 2786388e3..319853665 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -10,21 +10,22 @@ const ChatEntry = (props) => {
       sender: props.sender,
       timeStamp: props.timeStamp,
       body: props.body,
-      liked: !props.isLiked
+      liked: !props.isLiked,
+      sender1: props.localSender
     };
     props.onUpdate(updatedEntry);
 };
 
   const heart = props.isLiked ? '❤️' : '🤍';
-  const senderClass = props.sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+  const senderClass = props.sender === props.localSender ? 'chat-entry local' : 'chat-entry remote';
   
   return (
     <div className={senderClass} > 
       <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="liked" onClick={onUpdateButtonClick}>{heart}</button>
+        <p className="entry-time">{<TimeStamp time={props.timeStamp}/> }</p>
+        <button className="like" onClick={onUpdateButtonClick}>{heart}</button>
       </section>
     </div>
   );
@@ -36,7 +37,8 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   isLiked: PropTypes.bool.isRequired,
-  onUpdate: PropTypes.func.isRequired
+  onUpdate: PropTypes.func.isRequired,
+  localSender: PropTypes.string.isRequired
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 7964ac29a..0a86d4a79 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -11,6 +11,7 @@ const ChatLog = (props) => {
             body = {entry.body} 
             isLiked = {entry.liked}
             onUpdate = {props.onUpdateEntry}
+            localSender = {props.sender1}
         />
         
     ));
@@ -22,7 +23,6 @@ const ChatLog = (props) => {
     );
 };
 
-
 ChatLog.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.number.isRequired,
@@ -31,7 +31,8 @@ ChatLog.propTypes = {
         timeStamp: PropTypes.string.isRequired,
         liked: PropTypes.bool.isRequired
     })),
-    onUpdate: PropTypes.func.isRequired
+    onUpdate: PropTypes.func.isRequired,
+    sender1: PropTypes.func.isRequired
 };
 
 export default ChatLog;
\ No newline at end of file

From a9d932ee2ea83350c04382540fbb4074f1e9f5d7 Mon Sep 17 00:00:00 2001
From: Lisa Utsett <lisabethutsett@gmail.com>
Date: Tue, 31 Jan 2023 18:13:57 -0500
Subject: [PATCH 4/8] commented out .isRequired

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 319853665..d6b857252 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -31,7 +31,7 @@ const ChatEntry = (props) => {
   );
 };
 
-ChatEntry.propTypes = {
+/* ChatEntry.propTypes = {
   id: PropTypes.number.isRequired,
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
@@ -39,6 +39,6 @@ ChatEntry.propTypes = {
   isLiked: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   localSender: PropTypes.string.isRequired
-};
+}; */
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 0a86d4a79..1b4e7945c 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -23,7 +23,7 @@ const ChatLog = (props) => {
     );
 };
 
-ChatLog.propTypes = {
+/* ChatLog.propTypes = {
     entries: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.number.isRequired,
         sender: PropTypes.string.isRequired,
@@ -34,5 +34,5 @@ ChatLog.propTypes = {
     onUpdate: PropTypes.func.isRequired,
     sender1: PropTypes.func.isRequired
 };
-
+ */
 export default ChatLog;
\ No newline at end of file

From 06332679b0bf8e642a8d1798a1759d6a25b78f39 Mon Sep 17 00:00:00 2001
From: Lisa <70290488+lisabethu88@users.noreply.github.com>
Date: Tue, 31 Jan 2023 20:34:34 -0500
Subject: [PATCH 5/8] Update package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 5bbba246d..3f1ba51c7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "react-chatlog",
   "version": "0.1.0",
+  "homepage": "https://gitname.github.io/react-chatlog",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",

From 46f4025c0442f3b8af9fca422eaa90a0a74eb0e6 Mon Sep 17 00:00:00 2001
From: Lisa <70290488+lisabethu88@users.noreply.github.com>
Date: Tue, 31 Jan 2023 20:40:58 -0500
Subject: [PATCH 6/8] Update package.json

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 3f1ba51c7..0ab2889b7 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "react-scripts": "5.0.0"
   },
   "scripts": {
+    "predeploy": "yarn run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

From e95f70211253bb06b095e3722731cd55f7b1463f Mon Sep 17 00:00:00 2001
From: Lisa <70290488+lisabethu88@users.noreply.github.com>
Date: Tue, 31 Jan 2023 20:42:23 -0500
Subject: [PATCH 7/8] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0ab2889b7..e2637bd93 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "react-scripts": "5.0.0"
   },
   "scripts": {
-    "predeploy": "yarn run build",
+    "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",

From 9c7a3523625aab6bb1f988789e6b1158ac2b083f Mon Sep 17 00:00:00 2001
From: Lisa <70290488+lisabethu88@users.noreply.github.com>
Date: Tue, 31 Jan 2023 20:48:49 -0500
Subject: [PATCH 8/8] Update package.json

---
 package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/package.json b/package.json
index e2637bd93..5bbba246d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,6 @@
 {
   "name": "react-chatlog",
   "version": "0.1.0",
-  "homepage": "https://gitname.github.io/react-chatlog",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
@@ -13,8 +12,6 @@
     "react-scripts": "5.0.0"
   },
   "scripts": {
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",