Ada C22 Phoenix Class Madina Dzhetegenova

project-docs/wave-01.md

@@ -2,7 +2,10 @@
 
 **Learn Topics: React Components and Props required for this wave**
 
-Update the `ChatEntry` and `App` components to display a single chat message bubble with the message text and relative timestamp, plus the sender's name above it.  
+Update the `ChatEntry` and `App` components to display a 
+single chat message bubble with the message text and 
+relative timestamp, plus 
+the sender's name above it.  
 
 A good way to test this code as you write it would be to take the first chat message from the [JSON data file](../src/data/messages.json) and use it as the data for the `ChatEntry` component.
 

src/App.jsx

@@ -1,14 +1,30 @@
 import './App.css';
+import ChatLog from './components/ChatLog';
+import chatData from './data/messages.json';
+import { useState } from 'react';
 
 const App = () => {
+  const [entries, setEntries] = useState(chatData);
+  const toggleLike = (id) => {
+    const updatedEntries = entries.map((entry) => {
+      if (entry.id === id) {
+        return { ...entry, liked: !entry.liked };
+      } else {
+        return entry;
+      }
+    });
+    setEntries(updatedEntries);
+  };
+  const likeCount = entries.reduce((total, entry) => {
+    return entry.liked ? total + 1 : total;
+  }, 0);
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>{likeCount} ❤️s</h1>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+      <ChatLog entries={entries} onLikeToggle={toggleLike} />
       </main>
     </div>
   );

src/components/ChatEntry.jsx

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

src/components/ChatLog.jsx

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