From 57d2f2f7c5590218688bb769bda3163098f85862 Mon Sep 17 00:00:00 2001 From: Christelle Nkera Date: Mon, 16 Dec 2024 11:58:13 -0500 Subject: [PATCH 1/4] Added ChatLog to components --- src/App.jsx | 7 +++---- src/components/ChatEntry.jsx | 18 +++++++++++++----- src/components/ChatLog.jsx | 26 ++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 src/components/ChatLog.jsx diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..c64595d1b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,6 @@ import './App.css'; +import ChatLog from './components/ChatLog'; +import messages from './data/messages.json'; const App = () => { return ( @@ -6,10 +8,7 @@ const App = () => {

Application title

-
- {/* 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..ec8e2d61e 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,12 +1,16 @@ import './ChatEntry.css'; +import TimeStamp from './TimeStamp'; +import PropTypes from 'prop-types'; -const ChatEntry = () => { +const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ +

@@ -14,7 +18,11 @@ const ChatEntry = () => { }; ChatEntry.propTypes = { - // Fill with correct proptypes + sender: PropTypes.string, + id: PropTypes.number, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..ee5afd9da --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,26 @@ +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + +const ChatLog = (props) =>{ + const chatEntries = props.entries.map((entry)=>{ + return( + + ); + }); + + return( +
+ {chatEntries} +
+ ); +}; + +ChatLog.propTypes ={ + sender: PropTypes.string, + id: PropTypes.number, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, +}; + +export default ChatLog; \ No newline at end of file From c4663cdad0f1a401caa81baba471c6b68a9b3518 Mon Sep 17 00:00:00 2001 From: Christelle Nkera Date: Mon, 16 Dec 2024 11:59:07 -0500 Subject: [PATCH 2/4] Changed title --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index c64595d1b..bc869a0d7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,7 +6,7 @@ const App = () => { return (
-

Application title

+

Vladmir and Estragon

From 42397dc9fa0ee0fea6764269f8601be9a5432379 Mon Sep 17 00:00:00 2001 From: Christelle Nkera Date: Mon, 6 Jan 2025 10:19:05 -0500 Subject: [PATCH 3/4] likes updated --- src/App.jsx | 20 ++++++++++++++++-- src/App.test.jsx | 1 + src/components/ChatEntry.jsx | 25 ++++++++++++++--------- src/components/ChatLog.jsx | 39 ++++++++++++++++++++++-------------- 4 files changed, 59 insertions(+), 26 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index bc869a0d7..6009539b7 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,16 +1,32 @@ import './App.css'; import ChatLog from './components/ChatLog'; +import { useState } from 'react'; import messages from './data/messages.json'; const App = () => { + const [chatMessages, setChatMessages] = useState(messages); + + const toggleLike = (id) => { + const updatedMessages = chatMessages.map((message) => { + if (message.id === id) { + message.liked = !message.liked; + } + return message; + }); + setChatMessages(updatedMessages); + }; + + const totalLikes = chatMessages.filter((message) => message.liked).length; + return (

Vladmir and Estragon

+

{totalLikes} ❤️s

- +
); }; -export default App; +export default App; \ No newline at end of file diff --git a/src/App.test.jsx b/src/App.test.jsx index af8d72a12..6db367c7d 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -29,6 +29,7 @@ describe('Wave 03: clicking like button and rendering App', () => { // click the first button fireEvent.click(firstButton); expect(firstButton.innerHTML).toEqual('❤️'); + // expect(buttons[0].innerHTML).toEqual('🤍'); // check that all other buttons haven't changed for (let i = 1; i < buttons.length; i++) { diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index ec8e2d61e..ce121ab26 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -3,26 +3,33 @@ import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { + const handleLikeClick = () => { + props.onLike(props.id); // Notify the parent component (App) to toggle like state + }; + return (
-

{props.sender}

+

{props.sender}

{props.body}

- +

- +
); }; ChatEntry.propTypes = { - sender: PropTypes.string, - id: PropTypes.number, - body: PropTypes.string, - timeStamp: PropTypes.string, - liked: PropTypes.bool, + sender: PropTypes.string, + id: PropTypes.number, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, + onLike: PropTypes.func, // Ensure the `onLike` prop is passed }; -export default ChatEntry; +export default ChatEntry; \ No newline at end of file diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index ee5afd9da..217936a67 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -1,26 +1,35 @@ import ChatEntry from './ChatEntry'; import PropTypes from 'prop-types'; -const ChatLog = (props) =>{ - const chatEntries = props.entries.map((entry)=>{ - return( - +const ChatLog = (props) => { + const chatEntries = props.entries.map((entry) => { + return ( + ); }); - return( -
- {chatEntries} -
- ); + return
{chatEntries}
; }; -ChatLog.propTypes ={ - sender: PropTypes.string, - id: PropTypes.number, - body: PropTypes.string, - timeStamp: PropTypes.string, - liked: PropTypes.bool, +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + sender: PropTypes.string, + id: PropTypes.number, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, + }) + ).isRequired, + onLike: PropTypes.func.isRequired, }; export default ChatLog; \ No newline at end of file From 4571f65f8c8149bc913063596d0fc5bfb4886296 Mon Sep 17 00:00:00 2001 From: Christelle Nkera Date: Mon, 6 Jan 2025 10:37:52 -0500 Subject: [PATCH 4/4] Fixed message return --- src/App.jsx | 6 ++++-- src/App.test.jsx | 1 - 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 6009539b7..62a6c626a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,9 +9,11 @@ const App = () => { const toggleLike = (id) => { const updatedMessages = chatMessages.map((message) => { if (message.id === id) { - message.liked = !message.liked; + // message.liked = !message.liked; + return {...message, liked:!message.liked}; + } else { + return message; } - return message; }); setChatMessages(updatedMessages); }; diff --git a/src/App.test.jsx b/src/App.test.jsx index 6db367c7d..af8d72a12 100644 --- a/src/App.test.jsx +++ b/src/App.test.jsx @@ -29,7 +29,6 @@ describe('Wave 03: clicking like button and rendering App', () => { // click the first button fireEvent.click(firstButton); expect(firstButton.innerHTML).toEqual('❤️'); - // expect(buttons[0].innerHTML).toEqual('🤍'); // check that all other buttons haven't changed for (let i = 1; i < buttons.length; i++) {