Snow Leopards - Anika SW

src/App.css

@@ -49,6 +49,10 @@
   display: inline-block
 }
 
+li {
+    list-style-type: none;
+}
+
 .red {
   color: #b22222
 }

src/App.js

@@ -1,19 +1,62 @@
-import React from 'react';
-import './App.css';
+import React, { useEffect, useState } from 'react';
+import ChatLog from './components/ChatLog';
 import chatMessages from './data/messages.json';
+import './App.css';
 
 const App = () => {
+
+  const [chatEntryData, setChatEntryData] = useState([
+    {
+    id: 0,
+    sender: '',
+    body: '',
+    timeStamp: '',
+    liked: false
+    }
+  ]);
+
+  useEffect(() => {
+    setChatEntryData(chatMessages);
+  }, []);
+
+  const [likesCount, setLikesCount] = useState(0);
+
+  const updateChatEntryData = updatedEntry => {
+    const updatedEntries = chatEntryData.map(entry => {
+      if (entry.id === updatedEntry.id) {
+        if (updatedEntry.liked === true) {
+          setLikesCount((likesCount) => likesCount + 1);
+          return updatedEntry;
+        } else {
+          setLikesCount((likesCount) => likesCount - 1);
+          return updatedEntry;
+        }
+      } else {
+        return entry;
+      }});
+      setChatEntryData(updatedEntries);
+    };
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Rockin' React Chat Log!</h1>
+        <h2>{likesCount} ❤️</h2>
       </header>
       <main>
-        {/* Wave 01: Render one ChatEntry component
-        Wave 02: Render ChatLog component */}
+        <div className="messageContainer">
+          <div>
+            <ul>
+              <ChatLog
+                entries={chatEntryData}
+                onUpdateLikes={updateChatEntryData}
+              ></ChatLog>
+            </ul>
+          </div>
+        </div>
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;

src/App.test.js

@@ -14,7 +14,7 @@ describe('Wave 03: clicking like button and rendering App', () => {
     fireEvent.click(buttons[10])
 
     // Assert
-    const countScreen = screen.getByText(/3 ❤️s/)
+    const countScreen = screen.getByText(/3 ❤️/)
     expect(countScreen).not.toBeNull()
   })
 

src/components/ChatEntry.js

@@ -1,22 +1,46 @@
-import React from 'react';
+import React, { useState } from 'react';
+import TimeStamp from './TimeStamp';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
 const ChatEntry = (props) => {
+
+  const [isMessageLiked, setIsMessageLiked] = useState(false)
+
+
+  const toggleLikeButton = (event) => {
+    const updatedChatEntry = {
+      id: props.id,
+      sender: props.sender,
+      body: props.body,
+      timeStamp: props.timeStamp,
+      liked: !props.liked
+    }
+    setIsMessageLiked(!isMessageLiked);
+    props.onHandleLikes(updatedChatEntry);
+    };
+
   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><TimeStamp time={props.timeStamp}></TimeStamp></p>
+        <button className="like" onClick={toggleLikeButton}>
+        {props.liked ? '❤️' : '🤍'}
+        </button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number,
+  sender: PropTypes.string,
+  body: PropTypes.string,
+  timeStamp: PropTypes.string,
+  liked: PropTypes.bool,
+  onHandleLikes: PropTypes.func
 };
 
-export default ChatEntry;
+export default ChatEntry;

src/components/ChatLog.css

@@ -2,3 +2,7 @@
   margin: auto;
   max-width: 50rem;
 }
+
+
+
+

src/components/ChatLog.js

@@ -0,0 +1,39 @@
+import ChatEntry from '../components/ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = (props) => {
+
+  const fullChatLog = props.entries.map((entry, index) => {
+    return (
+      <li key={index}>
+        <ChatEntry
+          id={entry.id}
+          sender={entry.sender}
+          body={entry.body}
+          timeStamp={entry.timeStamp}
+          liked={entry.liked}
+          onHandleLikes={props.onUpdateLikes}
+        ></ChatEntry>
+      </li> 
+      )
+    });
+
+  return (
+    <div className="fullChatLog">
+      {fullChatLog}
+    </div>
+  )
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    sender: PropTypes.string,
+    body: PropTypes.string,
+    timeStamp: PropTypes.string,
+    liked: PropTypes.bool
+  })),
+  onUpdateLikes: PropTypes.func
+};
+
+export default ChatLog;

src/components/TimeStamp.js

@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import PropTypes from 'prop-types';
 
 const TimeStamp = (props) => {
   const time = DateTime.fromISO(props.time);
@@ -8,4 +9,8 @@ const TimeStamp = (props) => {
   return <span title={absolute}>{relative}</span>;
 };
 
-export default TimeStamp;
+TimeStamp.propTypes = {
+  time: PropTypes.string
+}
+
+export default TimeStamp;

src/data/messages.json

@@ -159,33 +159,33 @@
     "body":"so you are a robot",
     "timeStamp":"2018-05-29T23:13:31+00:00",
     "liked": false
-  },
-  {
+},
+{
     "id": 24,
     "sender":"Estragon",
     "body":"NO, I am a human, you are a robot.",
     "timeStamp":"2018-05-29T23:14:28+00:00",
     "liked": false
-  },
-  {
+},
+{
     "id": 25,
     "sender":"Vladimir",
     "body":"but you just said that you are robots",
     "timeStamp":"2018-05-29T23:15:47+00:00",
     "liked": false
-  },
-  {
+},
+{
     "id": 26,
     "sender":"Estragon",
     "body":"No, I said you are a person, I am a robot.",
     "timeStamp":"2018-05-29T23:16:53+00:00",
     "liked": false
-  },
-  {
+},
+{
     "id": 27,
     "sender":"Vladimir",
     "body":"then you are lying",
     "timeStamp":"2018-05-29T23:17:34+00:00",
     "liked": false
-  }
+}
 ]