Ocelots - Megan Maple

src/App.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import './App.css';
 import chatMessages from './data/messages.json';
+import ChatEntry from './components/ChatEntry';
 
 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>
+      <main>{<ChatEntry></ChatEntry>}</main>
     </div>
   );
 };

src/components/ChatEntry.js

@@ -2,21 +2,36 @@ import React from 'react';
 import './ChatEntry.css';
 import PropTypes from 'prop-types';
 
-const ChatEntry = (props) => {
+const time_difference = (posted) => {
+  const difference = new Date(
+    new Date().getTime() - new Date('2018-05-18T22:12:03Z').getTime()
+  );
+  if (difference.getFullYear() - 1970) {
+    return `${difference.getFullYear() - 1970} years ago`;
+  }
+  return difference.getMonth() - 1
+    ? `${difference.getMonth() - 1} months ago`
+    : `${difference.getDate() - 1} days ago`;
+};
+
+const ChatEntry = ({ id, sender, body, timeStamp }) => {
   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>
+        <p>{body}</p>
+        <p className="entry-time">{time_difference(timeStamp)}</p>
         <button className="like">🤍</button>
       </section>
     </div>
   );
 };
 
 ChatEntry.propTypes = {
-  //Fill with correct proptypes
+  id: PropTypes.number,
+  sender: PropTypes.string.isRequired,
+  body: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
 };
 
 export default ChatEntry;