From 7eccb9d00d86914eb13f265fc76c2366799c4a3b Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Tue, 20 Jun 2023 19:10:08 -0700
Subject: [PATCH 1/8]  wave 1 one chat entry in app

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

diff --git a/src/App.js b/src/App.js
index c10859093..ebd1e4c14 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
 
 const App = () => {
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Waiting for Chat Godot</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatEntry chatData ={chatMessages[0]}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..63e75d2ca 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 = ({chatData}) => {
+  console.log(chatData)
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <h2 className="entry-name">{chatData.sender}</h2>
       <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
+        <p>{chatData.body}</p>
+        <p className="entry-time">{chatData.timeStamp}</p>
         <button className="like">🤍</button>
       </section>
     </div>
@@ -16,7 +17,9 @@ const ChatEntry = (props) => {
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  time: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  sender: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
new file mode 100644
index 000000000..538169d52
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,10 @@
+// import ChatEntry from './ChatEntry';
+// import PropTypes from 'prop-types';
+// import './ChatEntry.css'
+
+// const Chatlog = (props) => {
+//     return (
+//     <ChatEntry/>
+
+//     );
+// };
\ No newline at end of file

From d838f7b9e0a47e1546b7e0e1d582aec6cdd1ed09 Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Tue, 20 Jun 2023 19:49:23 -0700
Subject: [PATCH 2/8] wave 2 complete chat log container

---
 src/App.js                  |  4 ++--
 src/components/ChatEntry.js | 15 +++++++------
 src/components/ChatLog.js   | 45 ++++++++++++++++++++++++++++++-------
 3 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/App.js b/src/App.js
index ebd1e4c14..784c9be57 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
-import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
   return (
@@ -10,7 +10,7 @@ const App = () => {
         <h1>Waiting for Chat Godot</h1>
       </header>
       <main>
-        <ChatEntry chatData ={chatMessages[0]}/>
+        <ChatLog entries ={chatMessages}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 63e75d2ca..0d0f5ec58 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,24 +2,25 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
-const ChatEntry = ({chatData}) => {
-  console.log(chatData)
+const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">{chatData.sender}</h2>
+      <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
-        <p>{chatData.body}</p>
-        <p className="entry-time">{chatData.timeStamp}</p>
-        <button className="like">🤍</button>
+        <p>{body}</p>
+        <p className="entry-time">{timeStamp}</p>
+        <button className="like">{liked}🤍</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  time: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
   body: PropTypes.string.isRequired,
   sender: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 538169d52..e6554892f 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,10 +1,39 @@
-// import ChatEntry from './ChatEntry';
-// import PropTypes from 'prop-types';
-// import './ChatEntry.css'
+import './ChatEntry.css'
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
 
-// const Chatlog = (props) => {
-//     return (
-//     <ChatEntry/>
 
-//     );
-// };
\ No newline at end of file
+const Chatlog = ({entries}) => {
+    const  getEntries = () => {
+        return entries.map((entry, index) => {
+        return (
+            <ChatEntry 
+            key={index}
+            id={entry.id}
+            sender={entry.sender} 
+            body={entry.body}
+            timeStamp={entry.timeStamp}
+            liked={entry.liked}
+            />
+        );
+    });
+}
+    return <main>
+        <section className= 'chat-log'>
+            {getEntries()}
+        </section>
+        </main>
+};
+
+Chatlog.propTypes = {
+    entries: PropTypes.arrayOf (
+        PropTypes.shape (
+            {   
+                sender: PropTypes.string.isRequired,
+                body: PropTypes.string.isRequired,
+                timeStamp: PropTypes.string.isRequired,
+            })
+    )
+};
+
+export default Chatlog;
\ No newline at end of file

From 5a7428bd26c1b6c3b10caad5b6a680e997f4b071 Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Tue, 20 Jun 2023 21:01:25 -0700
Subject: [PATCH 3/8] implement time stamp

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

diff --git a/src/App.css b/src/App.css
index d97beb4e6..9106f110b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,8 +26,10 @@
   display: inline-block;
 }
 
+
 #App header section {
   background-color: #e0ffff;
+  color: black;
 }
 
 #App .widget {
diff --git a/src/App.js b/src/App.js
index 784c9be57..42aa2991a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,10 +4,14 @@ import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
 const App = () => {
+  // const [isLiked, setIsLiked] = useState(liked);
   return (
     <div id="App">
       <header>
-        <h1>Waiting for Chat Godot</h1>
+        <h1>Waiting for Chat GDT</h1>
+        <section> 
+          <h2>1 ❤️s</h2>
+        </section>
       </header>
       <main>
         <ChatLog entries ={chatMessages}/>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 0d0f5ec58..f81e65de7 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,15 +1,19 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
-        <p className="entry-time">{timeStamp}</p>
-        <button className="like">{liked}🤍</button>
+        <p className="entry-time">    
+        <TimeStamp time ={timeStamp}/>
+        </p>
+        <button> 🤍 </button>
       </section>
     </div>
   );
@@ -20,7 +24,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   sender: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired,
+  liked: PropTypes.bool,
 };
 
 export default ChatEntry;

From 1388d73aa21c938c83aee9c4db3c70c9377cc84d Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Tue, 20 Jun 2023 21:03:30 -0700
Subject: [PATCH 4/8] timestamp in chat entry

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index 0d0f5ec58..f81e65de7 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,15 +1,19 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
 const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
+
   return (
     <div className="chat-entry local">
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
-        <p className="entry-time">{timeStamp}</p>
-        <button className="like">{liked}🤍</button>
+        <p className="entry-time">    
+        <TimeStamp time ={timeStamp}/>
+        </p>
+        <button> 🤍 </button>
       </section>
     </div>
   );
@@ -20,7 +24,7 @@ ChatEntry.propTypes = {
   body: PropTypes.string.isRequired,
   sender: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
-  liked: PropTypes.bool.isRequired,
+  liked: PropTypes.bool,
 };
 
 export default ChatEntry;

From 29ab1621eaaae0986c982f876ee9da1ae9d73688 Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Wed, 21 Jun 2023 07:26:39 -0700
Subject: [PATCH 5/8] heart toggle

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

diff --git a/src/App.js b/src/App.js
index 42aa2991a..91c1906ba 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,24 @@
 import React from 'react';
+import { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
 const App = () => {
-  // const [isLiked, setIsLiked] = useState(liked);
+  const [messages, setMessages] = useState(chatMessages);
+
+  const toggleLike = (id) => {
+    setMessages(
+      messages.map((message) => 
+        message.id === id ? { ...message, liked: !message.liked } : message
+      )
+    );
+  };
+
+  // const countLikes = () => {
+    
+  // };
+
   return (
     <div id="App">
       <header>
@@ -14,7 +28,7 @@ const App = () => {
         </section>
       </header>
       <main>
-        <ChatLog entries ={chatMessages}/>
+        <ChatLog entries ={messages} toggleLike={toggleLike}/>
       </main>
     </div>
   );
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index f81e65de7..c9c3df6aa 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -3,7 +3,10 @@ import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
 
-const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
+const ChatEntry = ({id, sender, body, timeStamp, liked, toggleLike}) => {
+  const handleLikeClick = () => {
+    toggleLike(id);
+  };
 
   return (
     <div className="chat-entry local">
@@ -13,7 +16,7 @@ const ChatEntry = ({id, sender, body, timeStamp, liked}) => {
         <p className="entry-time">    
         <TimeStamp time ={timeStamp}/>
         </p>
-        <button> 🤍 </button>
+        <button className="like" onClick={handleLikeClick}>  {liked ? '❤️' : '🤍'} </button>
       </section>
     </div>
   );
@@ -25,6 +28,7 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool,
+  toggleLike: PropTypes.func.isRequired,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index e6554892f..bb17584f9 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -3,7 +3,7 @@ import ChatEntry from './ChatEntry';
 import PropTypes from 'prop-types';
 
 
-const Chatlog = ({entries}) => {
+const Chatlog = ({entries, toggleLike}) => {
     const  getEntries = () => {
         return entries.map((entry, index) => {
         return (
@@ -14,6 +14,7 @@ const Chatlog = ({entries}) => {
             body={entry.body}
             timeStamp={entry.timeStamp}
             liked={entry.liked}
+            toggleLike={toggleLike}
             />
         );
     });
@@ -32,8 +33,10 @@ Chatlog.propTypes = {
                 sender: PropTypes.string.isRequired,
                 body: PropTypes.string.isRequired,
                 timeStamp: PropTypes.string.isRequired,
+                liked: PropTypes.boo
             })
-    )
+    ).isRequired,
+    toggleLike: PropTypes.func.isRequired,
 };
 
 export default Chatlog;
\ No newline at end of file

From 0d4a7877a13fb4f1ad5f7b0e3775af3c16c5b2ab Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Thu, 22 Jun 2023 08:34:57 -0700
Subject: [PATCH 6/8] speech bubble strech goal

---
 src/App.css                  |  2 +-
 src/App.js                   | 14 ++++++++++----
 src/components/ChatEntry.css |  1 +
 src/components/ChatEntry.js  |  9 ++++++++-
 src/components/ChatLog.js    |  2 +-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9106f110b..ae0150c40 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 #App {
-  background-color: #87cefa;
+  background: #87cefa;
 }
 
 #App header {
diff --git a/src/App.js b/src/App.js
index 91c1906ba..cbde5278b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,16 +15,22 @@ const App = () => {
     );
   };
 
-  // const countLikes = () => {
-    
-  // };
+  const countLikes = () => {
+    let heartCount = 0;
+    for (let message of messages) {
+      if (message.liked) {
+        heartCount += 1;
+      }
+    }return heartCount;
+  };
+
 
   return (
     <div id="App">
       <header>
         <h1>Waiting for Chat GDT</h1>
         <section> 
-          <h2>1 ❤️s</h2>
+          <h2>{countLikes()} ❤️s</h2>
         </section>
       </header>
       <main>
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..744b38366 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -26,6 +26,7 @@ button {
   width: fit-content;
 }
 
+
 .chat-entry .entry-bubble:hover {
   background-color: #fefea2;
 }
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index c9c3df6aa..5d376d44f 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -8,8 +8,15 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, toggleLike}) => {
     toggleLike(id);
   };
 
+const localOrRemote = (sender) => {
+if (sender === 'Vladimir') {
+  return 'chat-entry local';
+} else if (sender === 'Estragon') {
+  return 'chat-entry remote';
+};
+};
   return (
-    <div className="chat-entry local">
+    <div className= {localOrRemote(sender)}>
       <h2 className="entry-name">{sender}</h2>
       <section className="entry-bubble">
         <p>{body}</p>
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index bb17584f9..9aecb5792 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -33,7 +33,7 @@ Chatlog.propTypes = {
                 sender: PropTypes.string.isRequired,
                 body: PropTypes.string.isRequired,
                 timeStamp: PropTypes.string.isRequired,
-                liked: PropTypes.boo
+                liked: PropTypes.bool,
             })
     ).isRequired,
     toggleLike: PropTypes.func.isRequired,

From 20f7492d85c4f0863679b5413f059f738e739b51 Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Fri, 23 Jun 2023 08:01:39 -0700
Subject: [PATCH 7/8] the horrifying void of space

---
 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 5d376d44f..3298d4338 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -23,7 +23,7 @@ if (sender === 'Vladimir') {
         <p className="entry-time">    
         <TimeStamp time ={timeStamp}/>
         </p>
-        <button className="like" onClick={handleLikeClick}>  {liked ? '❤️' : '🤍'} </button>
+        <button className="like" onClick={handleLikeClick}>{liked ? '❤️' : '🤍'}</button>
       </section>
     </div>
   );
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 9aecb5792..8629d2001 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -20,7 +20,7 @@ const Chatlog = ({entries, toggleLike}) => {
     });
 }
     return <main>
-        <section className= 'chat-log'>
+        <section className='chat-log'>
             {getEntries()}
         </section>
         </main>

From b61ef22db27e9ef7b079d72377a6be7fd5861752 Mon Sep 17 00:00:00 2001
From: Yael Peet <yaelpeet@gmail.com>
Date: Fri, 23 Jun 2023 08:08:01 -0700
Subject: [PATCH 8/8] loosey goosey prop types

---
 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 3298d4338..d43f82058 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -35,7 +35,7 @@ ChatEntry.propTypes = {
   sender: PropTypes.string.isRequired,
   timeStamp: PropTypes.string.isRequired,
   liked: PropTypes.bool,
-  toggleLike: PropTypes.func.isRequired,
+  toggleLike: PropTypes.func,
 };
 
 export default ChatEntry;
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 8629d2001..eeef27d1b 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -36,7 +36,7 @@ Chatlog.propTypes = {
                 liked: PropTypes.bool,
             })
     ).isRequired,
-    toggleLike: PropTypes.func.isRequired,
+    toggleLike: PropTypes.func,
 };
 
 export default Chatlog;
\ No newline at end of file