react chatlog proj

project-docs/wave-02.md

@@ -2,7 +2,9 @@
 
 **Learn Topics: React Components and Props required for this wave**
 
-Implement a `ChatLog` component and update the `App` component to display an entire chat log. `ChatLog` should display a sequence of individual `ChatEntry` components.
+--Implement a `ChatLog` component and 
+--update the `App` component to display an entire chat log. 
+--`ChatLog` should display a sequence of individual `ChatEntry` components.
 
 `ChatLog` takes one prop named `entries` (which is an array).
 

project-docs/wave-03.md

@@ -5,6 +5,7 @@
 In this wave we will update the components to manage a **like** feature. 
 
 - Add behavior to heart button in `ChatEntry` so that when it is clicked it toggles from an empty heart (🤍) to a filled heart (❤️) and from a filled heart (❤️) to an empty heart (🤍).
+
 - Manage the click event and state of the chat entries such that when the like status of a chat message changes by clicking the heart button, it is tracked by the `App` and the `App` reports the number of total messages that have been liked.
     - Example: If the user has liked three messages, `3 ❤️s` will appear at the top of the screen.
 

src/App.js

@@ -1,16 +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 [messageData, setMessageData] = useState(chatMessages)
+
+  const updateMessageData = (updatedMessage) => {
+    const messages = messageData.map((message) => {
+      if (message.id === updatedMessage.id) {
+        return updatedMessage;
+      } else {
+        return message;
+      }
+    });
+
+    setMessageData(messages)
+  }
+
   return (
-    <div id="App">
+    <div id="App" >
       <header>
-        <h1>Application title</h1>
+        <h1>Chatlog</h1>
       </header>
-      <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+      <main className="chat-log">
+        <ChatLog 
+          messages={messageData}
+          onUpdateMessage={updateMessageData}
+        ></ChatLog>
       </main>
     </div>
   );

src/components/ChatEntry.js

@@ -1,22 +1,88 @@
 import React from 'react';
 import './ChatEntry.css';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
+
+
+const ChatEntry = ({
+  id,
+  sender,
+  body,
+  timeStamp,
+  liked,
+  onUpdate
+}) => {
+
+
+  // console.log({
+  //   id,
+  //   sender,
+  //   body,
+  //   timeStamp,
+  //   liked,
+  //   onUpdate
+  // })
+  // const firstMessage = props.messages[0]
+  const onLikeButtonClick = () => {
+    const updatedMessage = {
+      id: id,
+      sender: sender,
+      body: body,
+      timeStamp: timeStamp,
+      liked: !liked,
+    }
+    onUpdate(updatedMessage)
+
+  // const button = document.getElementById('button');
+
+  // if (!props.liked === true){
+  //   button.textContent = '🌻'
+  // } else {
+  //   button.textContent = '🤍'
+  // }
+
+  // const emojiChange = () => {
+  //   if (!props.liked === true){
+  //     button.textContent = '🌻'
+  //   } else {
+  //     button.textContent = '🤍'
+  //   }
+  // }
+
+  }
+
+  // not right
+  // const button = document.getElementById('button');
+  // this is not right.....
+  // const emojiChange = props.liked ? button.textContent = '🌻' : button.textContent = '🤍';
+  // experimenting
+  // const emojiChange = props.liked ? 'green' : 'red';
+
+
+  let icon = ''
+
+  if (liked === true){
+    icon = '🌻'
+  } else {
+    icon = '🤍'
+  }
 
-const ChatEntry = (props) => {
   return (
     <div className="chat-entry local">
-      <h2 className="entry-name">Replace with name of sender</h2>
+      <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}</p>
+        <button className="emojiChange" onClick={onLikeButtonClick} id="button">{icon}</button>
       </section>
     </div>
   );
 };
 
-ChatEntry.propTypes = {
-  //Fill with correct proptypes
-};
+// ChatEntry.propTypes = {
+//   //Fill with correct proptypes
+//   sender: PropTypes.string.isRequired,
+//   body: PropTypes.string.isRequired,
+//   timeStamp: PropTypes.string.isRequired,
+// };
 
 export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import './ChatLog.css';
+import './ChatEntry.css';
+// import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+
+const ChatLog = ({messages, onUpdateMessage}) => {
+    // console.log(messages)
+
+
+    const messageComponents = messages.map((message,index) => {
+        return(
+            <div key={message.id}>
+                <ChatEntry 
+                    id={message.id}
+                    sender={message.sender} 
+                    body={message.body} 
+                    timeStamp={message.timeStamp}
+                    liked={message.liked}
+                    onUpdate={onUpdateMessage}
+                ></ChatEntry>
+            </div>
+        )
+    }); 
+
+    return(
+        <section>{messageComponents}</section>
+    );
+};
+
+export default ChatLog;