From d42ffd46058670df06463e77b916df5a38a7d59e Mon Sep 17 00:00:00 2001
From: camilla <pasadenastringtheory@gmail.com>
Date: Sun, 26 Jun 2022 18:17:29 -0700
Subject: [PATCH 1/6] Modifies all files, implements components

---
 src/App.css                  | 23 ++++++++++++++
 src/App.js                   | 58 +++++++++++++++++++++++++++++++----
 src/App.test.js              |  8 ++---
 src/components/ChatEntry.css |  2 +-
 src/components/ChatEntry.js  | 59 ++++++++++++++++++++++++++++++++----
 5 files changed, 133 insertions(+), 17 deletions(-)

diff --git a/src/App.css b/src/App.css
index d97beb4e6..b96eedbfd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,7 @@
   background-color: #87cefa;
 }
 
+
 #App header {
   background-color: #222;
   color: #fff;
@@ -13,6 +14,20 @@
   align-items: center;
 }
 
+/* #App span {
+  background-color: violet;
+  color: #fff;
+  padding-bottom: 0.5rem;
+  position: fixed;
+  width: 100%;
+  height: 120px;
+  z-index: 100;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+} */
+
 #App main {
   padding-left: 2em;
   padding-right: 2em;
@@ -30,6 +45,14 @@
   background-color: #e0ffff;
 }
 
+#App .header {
+  font-size: 1.2em;
+  text-align: center;
+  font-weight: bold;
+  font-family: sans-serif;
+  height: 20px;
+}
+
 #App .widget {
   display: inline-block;
   line-height: 0.5em;
diff --git a/src/App.js b/src/App.js
index c10859093..2c8fed68a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,16 +1,62 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+
+// {
+//   "id": 1,
+//   "sender":"Vladimir",
+//   "body":"why are you arguing with me",
+//   "timeStamp":"2018-05-29T22:49:06+00:00",
+//   "liked": false
+// }
 
 const App = () => {
+  const [chatMessagesData, setChatMessagesData] = useState(chatMessages);
+  const users = [];
+  let likesCount = 0;
+  let user1 = '';
+  let user2 = '';
+
+  const updateChatData = (updatedMessage) => {
+    const messages = chatMessagesData.map((message) => {
+      if (message.id === updatedMessage.id) {
+        return updatedMessage;
+      } else {
+        return message;
+      }
+    });
+
+    setChatMessagesData(messages);
+  };
+
+  for (let i = 0; i < chatMessagesData.length; i++) {
+    let message = chatMessagesData[i];
+    if (users.indexOf(message['sender']) === -1) {
+      users.push(message['sender'])
+    }
+    if (message['liked']) {
+      likesCount++;
+    }
+  }
+
+  if (users.length === 2) {
+    user1 = users[0].toUpperCase();
+    user2 = users[1].toUpperCase();
+  }
+
   return (
     <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
+
+        <header>
+          <h1>CHAT BETWEEN {user1} AND {user2} </h1>
+          <p className="header">{likesCount} 💙s</p>
+        </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <ChatLog
+          entries={chatMessagesData}
+          onUpdateChatData={updateChatData}>
+        </ChatLog>
       </main>
     </div>
   );
diff --git a/src/App.test.js b/src/App.test.js
index ca75c71dd..d1ad7148b 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -14,7 +14,7 @@ describe('Wave 03: clicking like button and rendering App', () => {
     fireEvent.click(buttons[10])
 
     // Assert
-    const countScreen = screen.getByText(/3 ❤️s/)
+    const countScreen = screen.getByText(/3 💙s/)
     expect(countScreen).not.toBeNull()
   })
 
@@ -29,7 +29,7 @@ describe('Wave 03: clicking like button and rendering App', () => {
 
     // click the first button
     fireEvent.click(firstButton)
-    expect(firstButton.innerHTML).toEqual('❤️')
+    expect(firstButton.innerHTML).toEqual('💙')
 
     // check that all other buttons haven't changed
     for (let i = 1; i < buttons.length; i++) {
@@ -40,13 +40,13 @@ describe('Wave 03: clicking like button and rendering App', () => {
     fireEvent.click(firstButton)
     expect(firstButton.innerHTML).toEqual('🤍')
     fireEvent.click(firstButton)
-    expect(firstButton.innerHTML).toEqual('❤️')
+    expect(firstButton.innerHTML).toEqual('💙')
     fireEvent.click(firstButton)
     expect(firstButton.innerHTML).toEqual('🤍')
 
     // click the last button a couple times
     fireEvent.click(lastButton)
-    expect(lastButton.innerHTML).toEqual('❤️')
+    expect(lastButton.innerHTML).toEqual('💙')
     fireEvent.click(lastButton)
     expect(lastButton.innerHTML).toEqual('🤍')
   })
diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css
index 05c3baa44..ece5ad733 100644
--- a/src/components/ChatEntry.css
+++ b/src/components/ChatEntry.css
@@ -97,4 +97,4 @@ 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 b92f0b7b2..b9a33bee1 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,21 +2,68 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
+// {
+//   "id": 1,
+//   "sender":"Vladimir",
+//   "body":"why are you arguing with me",
+//   "timeStamp":"2018-05-29T22:49:06+00:00",
+//   "liked": false
+// }
+
+
+function getDifferenceInYears(timeStamp) {
+  // key={timeStamp}
+  const today = new Date();
+  const year = today.getFullYear();
+
+  const pastDay = new Date(timeStamp);
+  const pastYear = pastDay.getFullYear();
+
+  const difference = year - pastYear;
+  return difference;
+}
+
 const ChatEntry = (props) => {
+  // console.log(props)
+  const timeInYears = getDifferenceInYears(props.timeStamp) + ' years ago';
+
+  const onLikeButtonClick = () => {
+    const updatedMessage = {
+        id: props.id,
+        sender: props.sender,
+        body: props.body,
+        timeStamp: props.timeStamp,
+        liked: !props.liked
+    };
+
+    // Invoke the function passed in through the prop named "onUpdate"
+    // This function is referenced by the name "updateStudentData" in App
+    props.onUpdateChatData(updatedMessage);
+  };
+
+  // className stuff here
+  // const likeButton = props.liked ? 'presentblue' : 'absentviolet';
+
   return (
-    <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+    // <div className="chat-entry local">
+    <div className={props.sender==='Vladimir'?'chat-entry local':'chat-entry remote'}>
+      <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>
-        <button className="like">🤍</button>
+        <p>{props.body}</p>
+        <p className="entry-time">{timeInYears}</p>
+        <button onClick={onLikeButtonClick} className="like">{!props['liked']?'🤍':'💙'}</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  liked: PropTypes.bool,
+  onUpdateChatData: PropTypes.func
 };
 
 export default ChatEntry;

From 98817e704219ef7e0aa7add8009c82052cfd8989 Mon Sep 17 00:00:00 2001
From: camilla <pasadenastringtheory@gmail.com>
Date: Sun, 26 Jun 2022 18:18:40 -0700
Subject: [PATCH 2/6] Adds ChatLog component

---
 src/components/ChatLog.js | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 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..3a29440b3
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = (props) => {
+  const messageComponents = props.entries.map((message) => {
+    // console.log(message.body)
+    return (
+      <ChatEntry
+        key={message['id']}
+        id={message['id']}
+        sender={message['sender']}
+        body={message['body']}
+        timeStamp={message['timeStamp']}
+        liked={message['liked']}
+        onUpdateChatData={props.onUpdateChatData}>
+      </ChatEntry>
+    );
+  });
+
+  return (
+    <div>{messageComponents}</div>
+  );
+
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    sender: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    timeStamp: PropTypes.string.isRequired,
+    liked: PropTypes.bool
+  })).isRequired,
+  onUpdateChatData: PropTypes.func
+};
+
+export default ChatLog;
\ No newline at end of file

From 776afb58c5b2cea8afafb2e39c38a6019ff6dae5 Mon Sep 17 00:00:00 2001
From: camilla <pasadenastringtheory@gmail.com>
Date: Sun, 26 Jun 2022 18:19:55 -0700
Subject: [PATCH 3/6] Cleans up comments

---
 src/components/ChatEntry.js | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b9a33bee1..425ccdd69 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,17 +2,7 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
-// {
-//   "id": 1,
-//   "sender":"Vladimir",
-//   "body":"why are you arguing with me",
-//   "timeStamp":"2018-05-29T22:49:06+00:00",
-//   "liked": false
-// }
-
-
 function getDifferenceInYears(timeStamp) {
-  // key={timeStamp}
   const today = new Date();
   const year = today.getFullYear();
 
@@ -24,7 +14,6 @@ function getDifferenceInYears(timeStamp) {
 }
 
 const ChatEntry = (props) => {
-  // console.log(props)
   const timeInYears = getDifferenceInYears(props.timeStamp) + ' years ago';
 
   const onLikeButtonClick = () => {
@@ -36,16 +25,10 @@ const ChatEntry = (props) => {
         liked: !props.liked
     };
 
-    // Invoke the function passed in through the prop named "onUpdate"
-    // This function is referenced by the name "updateStudentData" in App
     props.onUpdateChatData(updatedMessage);
   };
 
-  // className stuff here
-  // const likeButton = props.liked ? 'presentblue' : 'absentviolet';
-
   return (
-    // <div className="chat-entry local">
     <div className={props.sender==='Vladimir'?'chat-entry local':'chat-entry remote'}>
       <h2 className="entry-name">{props.sender}</h2>
       <section className="entry-bubble">

From a555afc7bc4d8e32e7e8b3a6b14067a50bf917e5 Mon Sep 17 00:00:00 2001
From: camilla <pasadenastringtheory@gmail.com>
Date: Sun, 26 Jun 2022 18:21:19 -0700
Subject: [PATCH 4/6] Changes emoji for testing

---
 src/App.test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.test.js b/src/App.test.js
index d1ad7148b..48d446b99 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -26,7 +26,6 @@ describe('Wave 03: clicking like button and rendering App', () => {
     const lastButton = buttons[buttons.length - 1]
 
     // Act-Assert
-
     // click the first button
     fireEvent.click(firstButton)
     expect(firstButton.innerHTML).toEqual('💙')

From b7a8cec348f0096dabd9fca263975077081dcefa Mon Sep 17 00:00:00 2001
From: camilla <pasadenastringtheory@gmail.com>
Date: Sun, 26 Jun 2022 18:24:10 -0700
Subject: [PATCH 5/6] Removes debugging comments, minor changes

---
 src/App.js                | 8 --------
 src/components/ChatLog.js | 2 --
 2 files changed, 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 2c8fed68a..5ce50b96e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,14 +3,6 @@ import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
 
-// {
-//   "id": 1,
-//   "sender":"Vladimir",
-//   "body":"why are you arguing with me",
-//   "timeStamp":"2018-05-29T22:49:06+00:00",
-//   "liked": false
-// }
-
 const App = () => {
   const [chatMessagesData, setChatMessagesData] = useState(chatMessages);
   const users = [];
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 3a29440b3..27caaecb1 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 
 const ChatLog = (props) => {
   const messageComponents = props.entries.map((message) => {
-    // console.log(message.body)
     return (
       <ChatEntry
         key={message['id']}
@@ -22,7 +21,6 @@ const ChatLog = (props) => {
   return (
     <div>{messageComponents}</div>
   );
-
 };
 
 ChatLog.propTypes = {

From f774c6dbdf59d9620d6b5d5aa7a443a2c00e5150 Mon Sep 17 00:00:00 2001
From: camilla <pasadenastringtheory@gmail.com>
Date: Sun, 26 Jun 2022 18:46:34 -0700
Subject: [PATCH 6/6] Changes key to the unique value of timeStamp, to get rid
 of the test warnings (id not being included in the tests)

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

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 27caaecb1..870d26ae0 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -7,7 +7,7 @@ const ChatLog = (props) => {
   const messageComponents = props.entries.map((message) => {
     return (
       <ChatEntry
-        key={message['id']}
+        key={message['timeStamp']}
         id={message['id']}
         sender={message['sender']}
         body={message['body']}