diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..8bcfa7109 100644 --- a/src/components/ChatEntry.js +++ b/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 (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+ +

); }; ChatEntry.propTypes = { - //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; + + diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..024e20f20 --- /dev/null +++ b/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 ( + + ); + }); + return
{chatEntries}
; +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired + }) + ) +}; + +export default ChatLog; \ No newline at end of file