diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..bbb4989c6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,42 @@ import './App.css'; +import ChatLog from './components/ChatLog'; +import chatLogDataFromFile from '../src/data/messages.json'; +import { useState } from 'react'; const App = () => { + const [likesCount, setLikesCount] = useState(0); + + const [chatLogData, setChatLogData] = useState(chatLogDataFromFile); + + const toggleChatEntryLiked = (chatEntryId) => { + const chatLogDataAfterToggle = chatLogData.map(chatEntry => { + if (chatEntry.id === chatEntryId) { + if (chatEntry.liked) { + setLikesCount(likesCount - 1); + } else { + setLikesCount(likesCount + 1); + } + return { ...chatEntry, liked: !chatEntry.liked }; + } else { + return chatEntry; + } + }); + + setChatLogData(chatLogDataAfterToggle); + }; + return (
-

Application title

+

+ Chat between Vladimir and Estragon +
+
+ {likesCount} ❤️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..ce00a5aac 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,20 +1,35 @@ import './ChatEntry.css'; +import TimeStamp from './TimeStamp.jsx'; +import PropTypes from 'prop-types'; +import { useState } from 'react'; + +const ChatEntry = (props) => { + const [isLiked, setIsLiked] = useState(props.liked); + + const likeButtonClicked = () => { + setIsLiked(!props.liked); + props.onToggleLiked(props.id); + }; -const ChatEntry = () => { return ( -
-

Replace with name of sender

+
+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

+
); }; ChatEntry.propTypes = { - // Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onToggleLiked: PropTypes.func }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..1a1d762d5 --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,35 @@ +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + +const ChatLog = (props) => { + const chatEntryComponents = props.entries.map(chatEntry => { + return ( + + ); + }); + + return <>{chatEntryComponents}; +}; + +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 + }) + ), + onToggleChatEntryLiked: PropTypes.func +}; + +export default ChatLog;