diff --git a/index.html b/index.html index 43200b5f..71d8f5f2 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -10,4 +10,4 @@
- + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 14a7f684..fb8f04dc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,42 @@ import './App.css'; +import chatdata from './data/messages.json'; +import { useState } from 'react'; +import ChatLog from './components/Chatlog'; +//import ChatEntry from './components/ChatEntry'; + const App = () => { + const [chatData, setChats] = useState(chatdata); + const toggleLike = (id) => { + setChats(chatData => + chatData.map(chat =>{ + if (chat.id === id) { + return{ ...chat, liked: !chat.liked }; + } else { + return chat; + } + } + ) + ); + }; + + const totalLikes = () => { + return chatData.reduce((count, chat) => { + return chat.liked ? count + 1 : count; + }, 0); + }; + + const local = chatData[0].sender; + const remote = chatData.find(chat => chat.sender !== local).sender; + return (
-

Application title

+

Chat Between {local} and {remote}

+

{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 fe05efa0..ca8cfe9c 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,21 +1,31 @@ import './ChatEntry.css'; +import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; -const ChatEntry = () => { +const ChatEntry = ({ id, sender, body, timeStamp, liked, toggleLike = () => {}, isLocal = false }) => { + const heart = liked ? '❤️' : '🤍'; return ( // Replace the outer tag name with a semantic element that fits our use case - -

Replace with name of sender

-
-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +
+

{sender}

+
+

{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, + toggleLike: PropTypes.func.isRequired, + isLocal: PropTypes.bool, + }; export default ChatEntry; diff --git a/src/components/ChatLog.test.jsx b/src/components/ChatLog.test.jsx index dfcfeda9..35dd4697 100644 --- a/src/components/ChatLog.test.jsx +++ b/src/components/ChatLog.test.jsx @@ -1,4 +1,4 @@ -import ChatLog from './ChatLog'; +import ChatLog from './Chatlog'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/src/components/Chatlog.jsx b/src/components/Chatlog.jsx new file mode 100644 index 00000000..2e0a71e7 --- /dev/null +++ b/src/components/Chatlog.jsx @@ -0,0 +1,42 @@ +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; + +const ChatLog = ({entries, toggleLike = () => {}, local}) => { + const chatlogFromData = entries.map(chatEntry => { + return( + + ); + }); + return( + + ); +}; +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, + + toggleLike: PropTypes.func.isRequired, + local: PropTypes.string.isRequired, +}; + +export default ChatLog; \ No newline at end of file