From d12667b134e87dd8b2abedb8cf75742043b937f3 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Thu, 22 Jun 2023 20:50:33 -0400
Subject: [PATCH 01/15] imports ChatEntry and inserts one ChatEntry instance

---
 src/App.js | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index c10859093..87cf248e3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,30 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
+
+// {
+//     "id": 1,
+//     "sender":"Vladimir",
+//     "body":"why are you arguing with me",
+//     "timeStamp":"2018-05-29T22:49:06+00:00",
+//     "liked": false
+//   },
 
 const App = () => {
-  return (
-    <div id="App">
-      <header>
-        <h1>Application title</h1>
-      </header>
-      <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
-      </main>
-    </div>
-  );
+	return (
+		<div id="App">
+			<header>
+				<h1>Application title</h1>
+			</header>
+			<main>
+				{/* Wave 01: Render one ChatEntry component */}
+				<ChatEntry></ChatEntry>
+
+				{/* Wave 02: Render ChatLog component */}
+			</main>
+		</div>
+	);
 };
 
 export default App;

From 1424b24fd4acb38964f66e422e9513bcd730eac4 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 12:02:00 -0400
Subject: [PATCH 02/15] passes in props: sender, body, timeStamp into instance
 of ChatEntry

---
 src/App.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 87cf248e3..03ff31159 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,7 +19,11 @@ const App = () => {
 			</header>
 			<main>
 				{/* Wave 01: Render one ChatEntry component */}
-				<ChatEntry></ChatEntry>
+				<ChatEntry
+					sender="Vladimir"
+					body="Why are you arguing with me"
+					timeStamp="2018-05-29T22:49:06+00:00"
+				></ChatEntry>
 
 				{/* Wave 02: Render ChatLog component */}
 			</main>

From e90d7fc9f922f249edf35642492cd27f7e495e67 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 12:03:51 -0400
Subject: [PATCH 03/15] accesses necessary props

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index b92f0b7b2..bdf521bab 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -1,22 +1,28 @@
 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>
-      <section className="entry-bubble">
-        <p>Replace with body of ChatEntry</p>
-        <p className="entry-time">Replace with TimeStamp component</p>
-        <button className="like">🤍</button>
-      </section>
-    </div>
-  );
+	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>{props.body}</p>
+				{/* <p className="entry-time">Replace with TimeStamp component</p> */}
+				<p className="entry-time">
+					<TimeStamp time={props.timeStamp}></TimeStamp>
+				</p>
+				<button className="like">🤍</button>
+			</section>
+		</div>
+	);
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+	//Fill with correct proptypes
 };
 
 export default ChatEntry;

From 85068186ac6e41e8b4abee416c7d8964ec89a726 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 12:25:02 -0400
Subject: [PATCH 04/15] adds imports

---
 src/components/ChatLog.js | 2 ++
 1 file changed, 2 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..96df8e9fe
--- /dev/null
+++ b/src/components/ChatLog.js
@@ -0,0 +1,2 @@
+import React from 'react';
+import ChatEntry from './ChatEntry';

From 8a6f975410df577005c77214a521bc8f82e0086e Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 22:42:54 -0400
Subject: [PATCH 05/15] renders ChatLog component

---
 src/App.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 03ff31159..adad06d1c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
 
 // {
 //     "id": 1,
@@ -15,17 +16,13 @@ const App = () => {
 	return (
 		<div id="App">
 			<header>
-				<h1>Application title</h1>
+				<h1>Allie's Chat App</h1>
 			</header>
 			<main>
 				{/* Wave 01: Render one ChatEntry component */}
-				<ChatEntry
-					sender="Vladimir"
-					body="Why are you arguing with me"
-					timeStamp="2018-05-29T22:49:06+00:00"
-				></ChatEntry>
 
 				{/* Wave 02: Render ChatLog component */}
+				<ChatLog></ChatLog>
 			</main>
 		</div>
 	);

From 314d80ed32b87569ba45f234cdc3c185031ae1eb Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 22:43:19 -0400
Subject: [PATCH 06/15] adds props:sender, body, timeStamp

---
 src/components/ChatLog.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 96df8e9fe..15818a5fa 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,2 +1,26 @@
 import React from 'react';
 import ChatEntry from './ChatEntry';
+
+const ChatLog = () => {
+	return (
+		<section>
+			<ChatEntry
+				sender={'Joe Biden'}
+				body={"Get out by 8am.  I'll count the silverware"}
+				timeStamp={'2018-05-18T22:12:03Z'}
+			></ChatEntry>
+			<ChatEntry
+				sender={'Vladimir'}
+				body={'why are you arguing with me'}
+				timeStamp={'2018-05-29T22:49:06+00:00'}
+			></ChatEntry>
+			<ChatEntry
+				sender={'Estragon'}
+				body={'Because you are wrong.'}
+				timeStamp={'2018-05-29T22:50:22+00:00'}
+			></ChatEntry>
+		</section>
+	);
+};
+
+export default ChatLog;

From 753de657a4406f08602b90eaa4d0f60a93033f0b Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 23:21:38 -0400
Subject: [PATCH 07/15] iterates over chatMessages data

---
 src/components/ChatLog.js | 63 ++++++++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 15818a5fa..0648b1972 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,25 +2,54 @@ import React from 'react';
 import ChatEntry from './ChatEntry';
 
 const ChatLog = () => {
-	return (
-		<section>
-			<ChatEntry
-				sender={'Joe Biden'}
-				body={"Get out by 8am.  I'll count the silverware"}
-				timeStamp={'2018-05-18T22:12:03Z'}
-			></ChatEntry>
-			<ChatEntry
-				sender={'Vladimir'}
-				body={'why are you arguing with me'}
-				timeStamp={'2018-05-29T22:49:06+00:00'}
-			></ChatEntry>
+	const chatMessages = [
+		{
+			id: 1,
+			sender: 'Vladimir',
+			body: 'why are you arguing with me',
+			timeStamp: '2018-05-29T22:49:06+00:00',
+			liked: false,
+		},
+		{
+			id: 2,
+			sender: 'Estragon',
+			body: 'Because you are wrong.',
+			timeStamp: '2018-05-29T22:49:33+00:00',
+			liked: false,
+		},
+		{
+			id: 3,
+			sender: 'Vladimir',
+			body: 'because I am what',
+			timeStamp: '2018-05-29T22:50:22+00:00',
+			liked: false,
+		},
+		{
+			id: 4,
+			sender: 'Estragon',
+			body: 'A robot.',
+			timeStamp: '2018-05-29T22:52:21+00:00',
+			liked: false,
+		},
+		{
+			id: 5,
+			sender: 'Vladimir',
+			body: 'Notabot',
+			timeStamp: '2019-07-23T22:52:21+00:00',
+			liked: false,
+		},
+	];
+
+	const chatComponents = chatMessages.map((message) => {
+		return (
 			<ChatEntry
-				sender={'Estragon'}
-				body={'Because you are wrong.'}
-				timeStamp={'2018-05-29T22:50:22+00:00'}
+				sender={message.sender}
+				body={message.body}
+				timeStamp={message.timeStamp}
 			></ChatEntry>
-		</section>
-	);
+		);
+	});
+	return chatComponents;
 };
 
 export default ChatLog;

From 800cb23a799f0251a4fe145e70d0c5b1c0a785a5 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 23:23:56 -0400
Subject: [PATCH 08/15] refactors to use data from messages.json

---
 src/components/ChatLog.js | 39 +--------------------------------------
 1 file changed, 1 insertion(+), 38 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 0648b1972..b6e1a6957 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,45 +1,8 @@
 import React from 'react';
 import ChatEntry from './ChatEntry';
+import chatMessages from '../data/messages.json';
 
 const ChatLog = () => {
-	const chatMessages = [
-		{
-			id: 1,
-			sender: 'Vladimir',
-			body: 'why are you arguing with me',
-			timeStamp: '2018-05-29T22:49:06+00:00',
-			liked: false,
-		},
-		{
-			id: 2,
-			sender: 'Estragon',
-			body: 'Because you are wrong.',
-			timeStamp: '2018-05-29T22:49:33+00:00',
-			liked: false,
-		},
-		{
-			id: 3,
-			sender: 'Vladimir',
-			body: 'because I am what',
-			timeStamp: '2018-05-29T22:50:22+00:00',
-			liked: false,
-		},
-		{
-			id: 4,
-			sender: 'Estragon',
-			body: 'A robot.',
-			timeStamp: '2018-05-29T22:52:21+00:00',
-			liked: false,
-		},
-		{
-			id: 5,
-			sender: 'Vladimir',
-			body: 'Notabot',
-			timeStamp: '2019-07-23T22:52:21+00:00',
-			liked: false,
-		},
-	];
-
 	const chatComponents = chatMessages.map((message) => {
 		return (
 			<ChatEntry

From 24c7311d03aa36988d6eade41ce60b03934c9da9 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Fri, 23 Jun 2023 23:52:54 -0400
Subject: [PATCH 09/15] adds key:index

---
 src/components/ChatLog.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index b6e1a6957..8d081477e 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -2,14 +2,18 @@ import React from 'react';
 import ChatEntry from './ChatEntry';
 import chatMessages from '../data/messages.json';
 
-const ChatLog = () => {
-	const chatComponents = chatMessages.map((message) => {
+const ChatLog = (props) => {
+	const entries = props.entries;
+
+	const chatComponents = chatMessages.map((message, index) => {
 		return (
-			<ChatEntry
-				sender={message.sender}
-				body={message.body}
-				timeStamp={message.timeStamp}
-			></ChatEntry>
+			<div className="chat-log" key={index}>
+				<ChatEntry
+					sender={message.sender}
+					body={message.body}
+					timeStamp={message.timeStamp}
+				></ChatEntry>
+			</div>
 		);
 	});
 	return chatComponents;

From c8a0b9f541130a1bda59fa0d64232201d1187b96 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Sat, 24 Jun 2023 00:52:40 -0400
Subject: [PATCH 10/15] adds prop:entries

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

diff --git a/src/App.js b/src/App.js
index adad06d1c..ee9c7b052 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,28 +1,20 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
-import ChatEntry from './components/ChatEntry';
 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 = () => {
 	return (
 		<div id="App">
 			<header>
 				<h1>Allie's Chat App</h1>
 			</header>
+
 			<main>
 				{/* Wave 01: Render one ChatEntry component */}
 
 				{/* Wave 02: Render ChatLog component */}
-				<ChatLog></ChatLog>
+				<ChatLog entries={chatMessages}></ChatLog>
 			</main>
 		</div>
 	);

From bb0abe40783c403c3afdc64f33f97cde3cfbc9af Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Sat, 24 Jun 2023 00:54:17 -0400
Subject: [PATCH 11/15] accesses prop:entries

---
 src/components/ChatLog.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index 8d081477e..b4b0c50f0 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import ChatEntry from './ChatEntry';
-import chatMessages from '../data/messages.json';
 
 const ChatLog = (props) => {
 	const entries = props.entries;
 
-	const chatComponents = chatMessages.map((message, index) => {
+	const chatComponents = entries.map((message, index) => {
 		return (
 			<div className="chat-log" key={index}>
 				<ChatEntry
+					id={message.id}
 					sender={message.sender}
 					body={message.body}
 					timeStamp={message.timeStamp}
+					liked={message.liked}
 				></ChatEntry>
 			</div>
 		);

From 92c20068afa63ca4f10ec842190980bf07b37974 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Mon, 26 Jun 2023 18:17:20 -0400
Subject: [PATCH 12/15] adds propTypes

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

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index bdf521bab..aaa8d51e1 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -23,6 +23,9 @@ const ChatEntry = (props) => {
 
 ChatEntry.propTypes = {
 	//Fill with correct proptypes
+	sender: PropTypes.string,
+	body: PropTypes.string,
+	timeStamp: PropTypes.string,
 };
 
 export default ChatEntry;

From 6b24159e0abe4deb21ed7a7ce2f26bc1eea7a77e Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Wed, 28 Jun 2023 15:30:09 -0400
Subject: [PATCH 13/15] adds heart counter and updated entries

---
 src/App.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index ee9c7b052..9f7c79724 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,19 +2,49 @@ import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
 import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 const App = () => {
+	// const [likesCount, setLikesCount] = useState(0);
+	const [entries, setEntries] = useState(chatMessages);
+
+	const sumHearts = () => {
+		let total = 0;
+
+		entries.forEach((entry) => {
+			if (entry.liked) {
+				total++;
+			}
+		});
+		return total;
+	};
+
+	const switchHeart = (updatedEntry) => {
+		const updatedEntries = entries.map((entry) => {
+			if (entry.id === updatedEntry.id) {
+				// entry.liked = !entry.liked;
+
+				return { ...entry, liked: !entry.liked };
+			}
+			return entry;
+		});
+		setEntries(updatedEntries);
+	};
+
 	return (
 		<div id="App">
 			<header>
 				<h1>Allie's Chat App</h1>
+				<section className="black" id="heartWidget">
+					{sumHearts()} ❤️s
+				</section>
 			</header>
 
 			<main>
 				{/* Wave 01: Render one ChatEntry component */}
 
 				{/* Wave 02: Render ChatLog component */}
-				<ChatLog entries={chatMessages}></ChatLog>
+				<ChatLog entries={entries} onUpdateHeart={switchHeart}></ChatLog>
 			</main>
 		</div>
 	);

From 44a6144d1ed9e1e74367d6778fcd7b140381ef6c Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Wed, 28 Jun 2023 15:31:00 -0400
Subject: [PATCH 14/15] accesses prop: onUpdate and updates propTypes

---
 src/components/ChatLog.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js
index b4b0c50f0..8f1d6e7c2 100644
--- a/src/components/ChatLog.js
+++ b/src/components/ChatLog.js
@@ -1,18 +1,20 @@
 import React from 'react';
 import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
 
 const ChatLog = (props) => {
 	const entries = props.entries;
 
 	const chatComponents = entries.map((message, index) => {
 		return (
-			<div className="chat-log" key={index}>
+			<div className="chat-log" key={message.id}>
 				<ChatEntry
 					id={message.id}
 					sender={message.sender}
 					body={message.body}
 					timeStamp={message.timeStamp}
 					liked={message.liked}
+					onUpdate={props.onUpdateHeart}
 				></ChatEntry>
 			</div>
 		);
@@ -20,4 +22,17 @@ const ChatLog = (props) => {
 	return chatComponents;
 };
 
+ChatLog.propTypes = {
+	entries: PropTypes.arrayOf(
+		PropTypes.shape({
+			id: PropTypes.number,
+			sender: PropTypes.string,
+			body: PropTypes.string,
+			timeStamp: PropTypes.string,
+			liked: PropTypes.bool,
+		})
+	),
+	onUpdateHeart: PropTypes.func,
+};
+
 export default ChatLog;

From bf0af01d4dd403c8184073bcbe6d76d8d0c96e13 Mon Sep 17 00:00:00 2001
From: Allie Soliz <solizale@gmail.com>
Date: Wed, 28 Jun 2023 15:31:25 -0400
Subject: [PATCH 15/15] updates entry state

---
 src/components/ChatEntry.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js
index aaa8d51e1..7f58ead61 100644
--- a/src/components/ChatEntry.js
+++ b/src/components/ChatEntry.js
@@ -2,8 +2,25 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 import TimeStamp from './TimeStamp';
+import { useState } from 'react';
 
 const ChatEntry = (props) => {
+	const [likePost, setLikePost] = useState(props.liked);
+
+	const toggleLike = () => {
+		const updatedEntry = {
+			id: props.id,
+			sender: props.sender,
+			body: props.body,
+			timeStamp: props.timeStamp,
+			liked: !props.liked,
+		};
+		setLikePost(!likePost);
+		props.onUpdate(updatedEntry);
+	};
+
+	const heartState = props.liked ? '❤️' : '🤍';
+
 	return (
 		<div className="chat-entry local">
 			{/* <h2 className="entry-name">Replace with name of sender</h2> */}
@@ -15,7 +32,9 @@ const ChatEntry = (props) => {
 				<p className="entry-time">
 					<TimeStamp time={props.timeStamp}></TimeStamp>
 				</p>
-				<button className="like">🤍</button>
+				<button onClick={toggleLike} className="like">
+					{heartState}
+				</button>
 			</section>
 		</div>
 	);
@@ -23,9 +42,11 @@ const ChatEntry = (props) => {
 
 ChatEntry.propTypes = {
 	//Fill with correct proptypes
+	id: PropTypes.number,
 	sender: PropTypes.string,
 	body: PropTypes.string,
 	timeStamp: PropTypes.string,
+	liked: PropTypes.bool,
 };
 
 export default ChatEntry;