diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..4b5be39fd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,32 @@ import './App.css'; +import chatMessages from './data/messages.json' +import ChatLog from './components/ChatLog'; +import { useState } from 'react'; const App = () => { + const [entries, setEntries] = useState(chatMessages); + + const toggleLike = (id) => { + const updatedEntries = entries.map((entry) => { + if(entry.id === id) { + return { ...entry, liked: !entry.liked }; + } + return entry; + }); + setEntries(updatedEntries); + }; + + const totalLikes = entries.filter((entry) => entry.liked).length; + return (
-

Application title

+

{totalLikes} ❤️s

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
+ +
); diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 15c56f96b..67f540755 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,20 +1,32 @@ import './ChatEntry.css'; +import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + +const ChatEntry = ({ id, sender, body, timeStamp, isLocal, liked, onLikeToggle }) => { + const entryClass = isLocal ? 'chat-entry local' : 'chat-entry remote'; -const ChatEntry = () => { return ( -
-

Replace with name of sender

+
+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+
); }; ChatEntry.propTypes = { - // Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + isLocal: PropTypes.bool.isRequired, + liked: PropTypes.bool.isRequired, + onLikeToggle: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..cfd0e8e28 --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,45 @@ +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const LOCAL_SENDER = 'Vladimir'; + +const ChatLog = ({ entries, onLikeToggle }) => { + const getChatListJSX = (entries) => { + return entries.map((entry) => { + return ( + + ); + }); + }; + + return ( +
+ {getChatListJSX(entries)} +
+ ); +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + }) + ).isRequired, + onLikeToggle: PropTypes.func.isRequired, +}; + +export default ChatLog; \ No newline at end of file