Kunzite - Allie S.

src/App.js

@@ -1,19 +1,53 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
 
 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>
-  );
+	// 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={entries} onUpdateHeart={switchHeart}></ChatLog>
+			</main>
+		</div>
+	);
 };
 
 export default App;

src/components/ChatEntry.js

@@ -1,22 +1,52 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+import { useState } from 'react';
 
 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>
-  );
+	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> */}
+			<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 onClick={toggleLike} className="like">
+					{heartState}
+				</button>
+			</section>
+		</div>
+	);
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+	//Fill with correct proptypes
+	id: PropTypes.number,
+	sender: PropTypes.string,
+	body: PropTypes.string,
+	timeStamp: PropTypes.string,
+	liked: PropTypes.bool,
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,38 @@
+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={message.id}>
+				<ChatEntry
+					id={message.id}
+					sender={message.sender}
+					body={message.body}
+					timeStamp={message.timeStamp}
+					liked={message.liked}
+					onUpdate={props.onUpdateHeart}
+				></ChatEntry>
+			</div>
+		);
+	});
+	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;