From cecd8a71cbcd5549613a0d9f4284ca4ec5242094 Mon Sep 17 00:00:00 2001
From: Genesis Quinn <genesis@quinns.io>
Date: Tue, 11 Jul 2023 13:03:28 -0400
Subject: [PATCH 1/4] Sender, Message, Chat Bubble, and Heart displays on site

---
 src/App.js                  | 19 ++++++++++++++-----
 src/components/ChatEntry.js | 12 ++++++++----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index c10859093..b28b4efbd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,28 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import TimeStamp from './components/TimeStamp';
+import ChatEntry from './components/ChatEntry';
 
 const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Chat Log</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        {chatMessages.map((message)=> (
+        <ChatEntry 
+          id={message.id}
+          sender={message.sender}
+          body={message.body}
+          timestamp={TimeStamp}
+          liked = {false}
+          />
+        ))}
       </main>
-    </div>
+      </div>
   );
-};
+        };
 
 export default App;
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..57a620aa0 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,14 +1,16 @@
 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"> {props.timeStamp}</p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -16,7 +18,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 f96d7a30852cef9ae16d74625c915cc6cefd14e0 Mon Sep 17 00:00:00 2001
From: Genesis Quinn <genesis@quinns.io>
Date: Tue, 11 Jul 2023 16:58:24 -0400
Subject: [PATCH 2/4] timeStamp works

---
 src/App.js                  | 15 +++++----------
 src/components/ChatEntry.js |  6 +++---
 src/components/ChatLog.js   | 30 ++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ChatLog.js

diff --git a/src/App.js b/src/App.js
index b28b4efbd..45f3504a9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,26 +3,21 @@ import './App.css';
 import chatMessages from './data/messages.json';
 import TimeStamp from './components/TimeStamp';
 import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
+  
   return (
     <div id="App">
       <header>
         <h1>Chat Log</h1>
       </header>
       <main>
-        {chatMessages.map((message)=> (
-        <ChatEntry 
-          id={message.id}
-          sender={message.sender}
-          body={message.body}
-          timestamp={TimeStamp}
-          liked = {false}
-          />
-        ))}
+          <ChatLog entries={chatMessages} />
       </main>
+
       </div>
-  );
+      )
         };
 
 export default App;
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 57a620aa0..bf2cd15d0 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -10,8 +10,8 @@ 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>
-        <button className="like">🤍</button>
+        <p className="entry-time"> <TimeStamp time={props.timeStamp} /> </p>
+        <button className="like"> '🤍'</button>
       </section>
     </div>
   );
@@ -20,7 +20,7 @@ const ChatEntry = (props) => {
 ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
-  timeStamp: PropTypes.string.isRequired,
+  timestamp: PropTypes.element.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..c8592c145
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({ entries}) => {
+    return (
+        <div>
+            {entries.map((entry, id) => (
+            <ChatEntry
+            id={id}
+            sender={entry.sender}
+            body={entry.body}
+            timeStamp={entry.timeStamp}
+        />
+        ))}
+        </div>
+    );
+    };
+
+    ChatLog.propTypes = {
+    entries: PropTypes.arrayOf(
+        PropTypes.shape({
+        sender: PropTypes.string.isRequired,
+        body: PropTypes.string.isRequired,
+        TimeStamp: PropTypes.string.isRequired,
+        })
+    ).isRequired,
+    };
+
+export default ChatLog;
\ No newline at end of file

From 819a9c462f724c945dfd87764f4bae508c9ab76b Mon Sep 17 00:00:00 2001
From: Genesis Quinn <genesis@quinns.io>
Date: Wed, 12 Jul 2023 20:12:06 -0400
Subject: [PATCH 3/4] Wave 3 Complete Passes all tests

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

diff --git a/src/App.js b/src/App.js
index 45f3504a9..ded9a6851 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,16 +4,40 @@ import chatMessages from './data/messages.json';
 import TimeStamp from './components/TimeStamp';
 import ChatEntry from './components/ChatEntry';
 import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 const App = () => {
+  const [messages, setMessages] = useState(chatMessages);
+
+  const handleLike = (id) => {
+    const updatedMessages = messages.map((message) => {
+      if (message.id === id) {
+        return {
+          ...message,
+          liked: !message.liked,
+        };
+      }
+      return message;
+    });
   
+    setMessages(updatedMessages);
+  };
+  // const countLikes = () => {
+
+  // } can use ***reduce***/filter/for loop
+  const likedMessagesCount = messages.reduce(
+    (count, message) => (message.liked ? count + 1 : count),
+    0
+  );
+
   return (
     <div id="App">
       <header>
         <h1>Chat Log</h1>
+        <div className="liked-messages-count">{likedMessagesCount} {'❤️'}s</div>
       </header>
       <main>
-          <ChatLog entries={chatMessages} />
+          <ChatLog entries={messages} handleLike={handleLike}/>
       </main>
 
       </div>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index bf2cd15d0..ecd6ff91f 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -5,14 +5,20 @@ import TimeStamp from './TimeStamp';
 
 
 const ChatEntry = (props) => {
+
+  const handleClick = () => {
+    props.handleLike(props.id)
+  }
+
+
   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>
-      </section>
+        <button onClick={handleClick} className="like">{props.liked ? '❤️' : '🤍'}</button>
+      </section> 
     </div>
   );
 };
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index c8592c145..85d953b43 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,15 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ChatEntry from './ChatEntry';
 
-const ChatLog = ({ entries}) => {
+const ChatLog = ({ entries, handleLike }) => {
     return (
         <div>
-            {entries.map((entry, id) => (
+            {entries.map((entry) => (
             <ChatEntry
-            id={id}
+            id={entry.id}
             sender={entry.sender}
             body={entry.body}
             timeStamp={entry.timeStamp}
+            handleLike={handleLike}
+            liked={entry.liked}
+            key={entry.id}
         />
         ))}
         </div>

From 200b8029d2eb1450d60e5b99d71233b20c42d8fd Mon Sep 17 00:00:00 2001
From: Genesis Quinn <genesis@quinns.io>
Date: Wed, 12 Jul 2023 20:28:01 -0400
Subject: [PATCH 4/4] Optional Enhancement moved remote texts to right side

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

diff --git a/src/App.js b/src/App.js
index ded9a6851..d7bd4e42d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,9 +22,7 @@ const App = () => {
   
     setMessages(updatedMessages);
   };
-  // const countLikes = () => {
 
-  // } can use ***reduce***/filter/for loop
   const likedMessagesCount = messages.reduce(
     (count, message) => (message.liked ? count + 1 : count),
     0
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..bf30c6ee4 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -58,6 +58,10 @@ button {
   text-align: left;
 }
 
+.chat-entry.remote {
+  text-align: right;
+}
+
 .chat-entry.local .entry-time {
   text-align: right;
 }
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index ecd6ff91f..e415aa82a 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -4,19 +4,22 @@ import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
 
+
 const ChatEntry = (props) => {
 
   const handleClick = () => {
     props.handleLike(props.id)
-  }
+  };
+  
+  const chatEntryClass = props.sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
 
 
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">{props.sender} </h2>
-      <section className="entry-bubble">
+    <div className={chatEntryClass}>
+      <h2 className='entry-name'>{props.sender} </h2>
+      <section className='entry-bubble'>
         <p>{props.body}</p>
-        <p className="entry-time"> <TimeStamp time={props.timeStamp} /> </p>
+        <p className='entry-time'> <TimeStamp time={props.timeStamp} /> </p>
         <button onClick={handleClick} className="like">{props.liked ? '❤️' : '🤍'}</button>
       </section> 
     </div>