Lmora tigers Chatlog

src/components/ChatEntry.js

@@ -1,22 +1,28 @@
 import React from 'react';
 import './ChatEntry.css';
+import TimeStamp from './TimeStamp';
 import PropTypes from 'prop-types';
 
-const ChatEntry = (props) => {
+const ChatEntry = ({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>
-        <button className="like">🤍</button>
+        <p>{body}</p>
+        <p className="entry-time">
+          <TimeStamp time={timeStamp}></TimeStamp>
+        </p>
       </section>
     </div>
   );
 };
 
 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,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ChatEntry from './ChatEntry';
+import './ChatLog.css';
+
+const ChatLog = ({entries}) => {
+  const chatEntries = entries.map((entry) => {
+    return (
+      <ChatEntry
+        sender={entry.sender}
+        body={entry.body}
+        timeStamp={entry.timeStamp}
+      ></ChatEntry>
+    );
+  });
+  return <div className="chat-log">{chatEntries}</div>;
+};
+
+ChatLog.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      sender: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired
+    })
+  )
+};
+
+export default ChatLog;