C22 -Phoenix -- Beenish Ali

src/App.jsx

@@ -1,16 +1,48 @@
 import './App.css';
+import Data from './data/messages.json';
+import ChatLog from './components/ChatLog';
+import { useState } from 'react';
+
+
+function App () {
+  const [messageData, setMessageData] = useState(Data);
+
+  const senders = [...new Set(Data.map(message => message.sender))];
+
+  const handleLiked = (id) => {
+    setMessageData(messageData => messageData.map(message => {
+      if (message.id === id) {
+        return {...message, liked: !message.liked};
+      } else {
+        return message;
+      };
+    }));
+  };
+
+  const calcTotalLiked = (messageData) => {
+    let total = 0;
+    for (const message of messageData) {
+      if (message.liked) {
+        total += 1;
+      }
+    };
+    return total;
+  };
+
+  const totalLiked = calcTotalLiked(messageData);
 
-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>
+    <>
+      <div id="App">
+        <header>
+          <h1>Chat between {senders[0]} and {senders[1]}</h1>
+          <h2>{totalLiked} ❤️s</h2>
+        </header>
+        <main>
+          <ChatLog entries = {messageData} onLiked={handleLiked}/>
+        </main>
+      </div>
+    </>
   );
 };
 

src/components/ChatEntry.jsx

@@ -1,20 +1,43 @@
 import './ChatEntry.css';
+import PropTypes from 'prop-types';
+import TimeStamp from './TimeStamp';
+
+const ChatEntry = ({sender, body, timeStamp, id, liked, onLiked}) => {
+  const heart = liked ? '❤️' :'🤍' ;
+
+  const localOrRemote = sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote';
+
+  const onLikeClicked = () => {
+    onLiked(id);
+  };
 
-const ChatEntry = () => {
   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>
+    <>
+      <div className={localOrRemote}>
+        <h2 className="entry-name">{sender}</h2>
+        <section className="entry-bubble">
+          <p>{body}</p>
+          <p className="entry-time">
+            <TimeStamp time = {timeStamp} />
+          </p>
+          <button
+            className="like"
+            onClick={onLikeClicked}>
+            {heart}
+          </button>
+        </section>
+      </div>
+    </>
   );
 };
 
 ChatEntry.propTypes = {
-  // Fill with correct proptypes
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  liked: PropTypes.bool.isRequired,
+  onLiked: PropTypes.func,
 };
 
 export default ChatEntry;

src/components/ChatLog.jsx

@@ -0,0 +1,39 @@
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = ({entries, onLiked}) => {
+  const chatEntryComponents = entries.map((chatEntry) => {
+    return (
+      <ChatEntry
+        key={chatEntry.id}
+        sender={chatEntry.sender}
+        body={chatEntry.body}
+        timeStamp={chatEntry.timeStamp}
+        id={chatEntry.id}
+        liked={chatEntry.liked}
+        onLiked={onLiked}>
+      </ChatEntry>
+    );
+  });
+
+  return (
+    <div className='chat-log'>
+      {chatEntryComponents}
+    </div>
+  );
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired,
+      id: PropTypes.number.isRequired,
+      liked: PropTypes.bool.isRequired,
+    })).isRequired,
+  onLiked: PropTypes.func,
+};
+
+export default ChatLog;