From 1fb48112aaecf3e776682e9209a3c0d715723409 Mon Sep 17 00:00:00 2001 From: Collette Date: Thu, 26 Jun 2025 09:54:32 -0500 Subject: [PATCH 1/5] Update chat entry componet and pass props in app --- src/App.jsx | 11 ++++++++++- src/components/ChatEntry.jsx | 14 +++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..ad09bd250 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,23 @@ import './App.css'; +import ChatEntry from './components/ChatEntry'; +import messagesData from './data/messages.json'; const App = () => { + const firstMessage = messagesData[0]; + return (
-

Application title

+

Chat Log

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

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{body}

+

@@ -14,7 +16,9 @@ const ChatEntry = () => { }; ChatEntry.propTypes = { - // Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; From 9a8f1d7a114f570f34a368f9728fe0a08256e36f Mon Sep 17 00:00:00 2001 From: collette777 <167787078+collette777@users.noreply.github.com> Date: Thu, 10 Jul 2025 20:20:27 -0500 Subject: [PATCH 2/5] Add ChatLog component to display chat message list --- src/App.jsx | 10 ++-------- src/components/ChatLog.jsx | 24 ++++++++++++++++++++++++ 2 files changed, 26 insertions(+), 8 deletions(-) create mode 100644 src/components/ChatLog.jsx diff --git a/src/App.jsx b/src/App.jsx index ad09bd250..603d85099 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,8 @@ import './App.css'; -import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; import messagesData from './data/messages.json'; const App = () => { - const firstMessage = messagesData[0]; - return (
@@ -13,11 +11,7 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - +
); diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..1d7a9ee94 --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,24 @@ +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + +const ChatLog = ({ entries }) => { + return ( +
+ {entries.map((entry) => ( + + ))} +
+ ); +}; + +ChatLog.propTypes = { + entries: PropTypes.array.isRequired, +}; + +export default ChatLog; \ No newline at end of file From a41e7738ca86babe0233aaff88127ec7708060aa Mon Sep 17 00:00:00 2001 From: collette777 <167787078+collette777@users.noreply.github.com> Date: Fri, 11 Jul 2025 18:12:04 -0500 Subject: [PATCH 3/5] Add likes and like count --- src/App.jsx | 20 +++++++++++++++++--- src/components/ChatEntry.jsx | 8 ++++++-- src/components/ChatLog.jsx | 5 ++++- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 603d85099..88637c79b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,31 @@ import './App.css'; import ChatLog from './components/ChatLog'; import messagesData from './data/messages.json'; +import { useState } from 'react'; const App = () => { + const [entries, setEntries] = useState(messagesData); + + const calcTotalLikes = () => { + return entries.filter(entry => entry.liked).length; + }; + + const toggleLike = (id) => { + setEntries(entries.map(entry => + entry.id === id ? { ...entry, liked: !entry.liked } : entry + )); + }; + + const totalLikes = calcTotalLikes(); + return (

Chat Log

+

{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 f30fe76f9..d2e4c3284 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -2,14 +2,16 @@ import './ChatEntry.css'; import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; -const ChatEntry = ({ sender, body, timeStamp }) => { +const ChatEntry = ({ sender, body, timeStamp, liked, onLike }) => { return (

{sender}

{body}

- +
); @@ -19,6 +21,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onLike: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index 1d7a9ee94..5c6607e0e 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -2,7 +2,7 @@ import './ChatLog.css'; import ChatEntry from './ChatEntry'; import PropTypes from 'prop-types'; -const ChatLog = ({ entries }) => { +const ChatLog = ({ entries, onLike }) => { return (
{entries.map((entry) => ( @@ -11,6 +11,8 @@ const ChatLog = ({ entries }) => { sender={entry.sender} body={entry.body} timeStamp={entry.timeStamp} + liked={entry.liked} + onLike={() => onLike(entry.id)} /> ))}
@@ -19,6 +21,7 @@ const ChatLog = ({ entries }) => { ChatLog.propTypes = { entries: PropTypes.array.isRequired, + onLike: PropTypes.func.isRequired, }; export default ChatLog; \ No newline at end of file From d937c1aa102ed4de087e63d121f8c407d7a84d55 Mon Sep 17 00:00:00 2001 From: collette777 <167787078+collette777@users.noreply.github.com> Date: Fri, 11 Jul 2025 18:12:58 -0500 Subject: [PATCH 4/5] fix whitespace linting --- src/App.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.jsx b/src/App.jsx index 88637c79b..3348d83e6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,7 +11,7 @@ const App = () => { }; const toggleLike = (id) => { - setEntries(entries.map(entry => + setEntries(entries.map(entry => entry.id === id ? { ...entry, liked: !entry.liked } : entry )); }; From 038eac1d4174e93e1ad2373c751e0953cecfc821 Mon Sep 17 00:00:00 2001 From: collette777 <167787078+collette777@users.noreply.github.com> Date: Fri, 11 Jul 2025 18:33:40 -0500 Subject: [PATCH 5/5] Update ui to show alternating chat --- src/App.jsx | 2 +- src/components/ChatEntry.jsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3348d83e6..e053dbb5c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,7 +21,7 @@ const App = () => { return (
-

Chat Log

+

Chat between Vladimir and Estragon

{totalLikes} ❤️s

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index d2e4c3284..e269bd979 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -3,8 +3,10 @@ import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; const ChatEntry = ({ sender, body, timeStamp, liked, onLike }) => { + const isLocal = sender === 'Estragon'; + return ( -
+

{sender}

{body}