Seattle Otters - Joanna

src/App.js

@@ -1,16 +1,53 @@
 import React from 'react';
 import './App.css';
+import { useState } from 'react';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
+import ChatLog from './components/ChatLog';
+
+
 
 const App = () => {
+
+  const [entries, setEntries] = useState(chatMessages);
+  const toggleLiked = (id) => {
+    console.log('liking...');
+    const newEntries = entries.map((entry) => {
+      return entry.id === id
+      ? {
+          id: entry.id,
+          sender: entry.sender,
+          body: entry.body,
+          timeStamp: entry.timeStamp,
+          liked: !entry.liked,
+        }
+    : entry;
+  });
+setEntries(newEntries);
+};
+
+const countLikes = (entries) => {
+  let likes = 0;
+  for (const entry of entries) {
+    if (entry.liked) {
+      likes++;
+    }
+  }
+  return likes;
+};
+
   return (
     <div id="App">
       <header>
-        <h1>Application title</h1>
+        <h1>Fun React Chat</h1>
+        <p>{countLikes(entries)} ❤️s</p>
       </header>
       <main>
         {/* Wave 01: Render one ChatEntry component
         Wave 02: Render ChatLog component */}
+        {/* <ChatLog entries={chatMessages}></ChatLog> */}
+        <ChatLog entries={entries} likedCallback={toggleLiked}></ChatLog>
+
       </main>
     </div>
   );

src/components/ChatEntry.js

@@ -2,21 +2,58 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
+const convertMsToDays = (ms) => {
+  const days = ms / 1000 / 60 / 60 / 24;
+  return Math.round(days);
+};
+
+const timeStampMessage = (days) => {
+  let msgStamp = 'unable to get timestamp';
+  if (days < 1) {
+    msgStamp = 'Today';
+  } else if (days >= 1 && days < 365) {
+    msgStamp = 'Today';
+  } else if (days >= 365) {
+    const yrs = Math.floor(days / 365);
+    msgStamp = `${yrs} years ago`;
+  }
+  return msgStamp;
+}
+
 const ChatEntry = (props) => {
+  const msgTime = new Date(props.timeStamp);
+  const today = new Date();
+  const daysSinceMsg = convertMsToDays(today-msgTime);
+
+  const toggleLiked= props.likedCallback;
+
   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>
+        <p>{props.body}</p>
+        <p className="entry-time">
+          {daysSinceMsg < 1
+          ? msgTime.toLocaleTimeString([], {
+              hour: '2-digit',
+              minute: '2-digit',
+          })
+          : timeStampMessage(daysSinceMsg)}
+        </p>
         <button className="like">🤍</button>
+        <button className="like" onClick={() => toggleLiked(props.id)}>
+          {`${props.liked ? '❤️' : '🤍'}`}
+        </button>
       </section>
     </div>
   );
 };
-
-ChatEntry.propTypes = {
-  //Fill with correct proptypes
+
+  ChatEntry.propTypes = {
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+  likedCallback: PropTypes.func.isRequired,
 };
 
-export default ChatEntry;
+export default ChatEntry;

src/components/ChatLog.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import './ChatLog.css';
+import ChatEntry from './ChatEntry';
+import PropTypes from 'prop-types';
+
+const ChatLog = (props) => {
+    const entries = props.entries;
+    console.log(entries);
+
+    const entryLog = entries.map((entry) => {
+        return (
+            <ChatEntry
+            key={entry.id ? entry.id : `${entry.sender}_${entry.timeStamp}`}
+            id={entry.id}
+            sender={entry.sender}
+            body={entry.body}
+            timeStamp={entry.timeStamp}
+            liked={entry.liked}
+            likedCallback={props.likedCallback}
+            ></ChatEntry>
+        );
+    });
+    return <div className ="chat-log">{entryLog}</div>;
+};
+ChatLog.propTypes = {
+    entries: PropTypes.arrayOf(
+        PropTypes.shape({
+        sender: PropTypes.string.isRequired,
+        body: PropTypes.string.isRequired,
+        timeStamp: PropTypes.string.isRequired,
+        })
+    ),
+    likedCallback: PropTypes.func.isRequired,
+};
+
+export default ChatLog;
+
+
+