Submission pull request

src/App.css

@@ -1,3 +1,4 @@
+/* src/App.css */
 #App {
  background-color: #87cefa;
 }

src/App.js

@@ -1,19 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatLog from './components/ChatLog';
 
 const App = () => {
+
+ const [totalLikes, setTotalLikes] = useState(0);
+
+ const handleLikeChange = (isLiked) => {
+ // Increment or decrement based on the liked status
+ setTotalLikes(prevTotalLikes => isLiked ? prevTotalLikes + 1 : prevTotalLikes - 1);
+ }
+
  return (
  <div id="App">
  <header>
- <h1>Application title</h1>
+ <h1>Chat Log</h1>
+ <p>{totalLikes} ❤️s</p> {/* Moved the total likes display to the top */}
  </header>
+
  <main>
- {/* Wave 01: Render one ChatEntry component
- Wave 02: Render ChatLog component */}
+ <ChatLog 
+ entries={chatMessages}
+ onLike={handleLikeChange}
+ />
  </main>
+
  </div>
  );
-};
+}
 
 export default App;

src/components/ChatEntry.css

@@ -1,3 +1,4 @@
+/* src/components/ChatEntry.css */
 button {
  background: none;
  color: inherit;

src/components/ChatEntry.js

@@ -1,22 +1,41 @@
-import React from 'react';
-import './ChatEntry.css';
+
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+import './ChatEntry.css';
 
 const ChatEntry = (props) => {
+ const [liked, setLiked] = useState(props.liked);
+
+ const toggleLiked = () => {
+ const newLikedStatus = !liked;
+ setLiked(newLikedStatus);
+
+ // Safeguard the invocation of onLike
+ if (props.onLike) {
+ props.onLike(newLikedStatus);
+ }
+ };
+
  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 className="chat-entry">
+ <h3>{props.sender}</h3>
+ <p>{props.body}</p>
+ <TimeStamp time={props.timeStamp} />
+ <button className="like" onClick={toggleLiked}>
+ {liked ? '❤️' : '🤍'}
+ </button>
  </div>
  );
 };
 
 ChatEntry.propTypes = {
- //Fill with correct proptypes
+ sender: PropTypes.string.isRequired,
+ body: PropTypes.string.isRequired,
+ timeStamp: PropTypes.string.isRequired,
+ liked: PropTypes.bool.isRequired,
+ // Make onLike prop optional
+ onLike: PropTypes.func
 };
 
-export default ChatEntry;
+export default ChatEntry;

src/components/ChatLog.css

@@ -1,3 +1,4 @@
+/* src/components/ChatLog.css */
 .chat-log {
  margin: auto;
  max-width: 50rem;

src/components/ChatLog.js

@@ -0,0 +1,23 @@
+// src/components/ChatLog.js
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = (props) => {
+
+const chatEntries = props.entries.map(entry => (
+ <ChatEntry
+ key={entry.id} 
+ {...entry}
+ onLike={props.onLike}
+ />
+));
+
+return (
+ <div className="chat-log">
+ {chatEntries}
+ </div>
+);
+}
+
+export default ChatLog;

src/components/TimeStamp.js

@@ -1,3 +1,4 @@
+// src/components/TimeStamp.js
 import { DateTime } from 'luxon';
 import PropTypes from 'prop-types';