chatlog, am I talking to myself?

src/App.css

@@ -1,5 +1,5 @@
 #App {
- background-color: #87cefa;
+ background: #87cefa;
 }
 
 #App header {
@@ -26,8 +26,10 @@
  display: inline-block;
 }
 
+
 #App header section {
  background-color: #e0ffff;
+ color: black;
 }
 
 #App .widget {

src/App.js

@@ -1,16 +1,40 @@
 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 [messages, setMessages] = useState(chatMessages);
+
+ const toggleLike = (id) => {
+ setMessages(
+ messages.map((message) => 
+ message.id === id ? { ...message, liked: !message.liked } : message
+ )
+ );
+ };
+
+ const countLikes = () => {
+ let heartCount = 0;
+ for (let message of messages) {
+ if (message.liked) {
+ heartCount += 1;
+ }
+ }return heartCount;
+ };
+
+
  return (
  <div id="App">
  <header>
- <h1>Application title</h1>
+ <h1>Waiting for Chat GDT</h1>
+ <section> 
+ <h2>{countLikes()} ❤️s</h2>
+ </section>
  </header>
  <main>
- {/* Wave 01: Render one ChatEntry component
- Wave 02: Render ChatLog component */}
+ <ChatLog entries ={messages} toggleLike={toggleLike}/>
  </main>
  </div>
  );

src/components/ChatEntry.css

@@ -26,6 +26,7 @@ button {
  width: fit-content;
 }
 
+
 .chat-entry .entry-bubble:hover {
  background-color: #fefea2;
 }

src/components/ChatEntry.js

@@ -1,22 +1,41 @@
 import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
 
-const ChatEntry = (props) => {
+const ChatEntry = ({id, sender, body, timeStamp, liked, toggleLike}) => {
+ const handleLikeClick = () => {
+ 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">
- <h2 className="entry-name">Replace with name of sender</h2>
+ <div className= {localOrRemote(sender)}>
+ <h2 className="entry-name">{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>{body}</p>
+ <p className="entry-time"> 
+ <TimeStamp time ={timeStamp}/>
+ </p>
+ <button className="like" onClick={handleLikeClick}>{liked ? '❤️' : '🤍'}</button>
  </section>
  </div>
  );
 };
 
 ChatEntry.propTypes = {
- //Fill with correct proptypes
+ id: PropTypes.number.isRequired,
+ body: PropTypes.string.isRequired,
+ sender: PropTypes.string.isRequired,
+ timeStamp: PropTypes.string.isRequired,
+ liked: PropTypes.bool,
+ toggleLike: PropTypes.func,
 };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,42 @@
+import './ChatEntry.css'
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+
+const Chatlog = ({entries, toggleLike}) => {
+ 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}
+ toggleLike={toggleLike}
+ />
+ );
+ });
+}
+ 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,
+ liked: PropTypes.bool,
+ })
+ ).isRequired,
+ toggleLike: PropTypes.func,
+};
+
+export default Chatlog;