From 79a6f47c855e67cffa443f964f0ca7e2df2d299f Mon Sep 17 00:00:00 2001 From: Madina-j Date: Sun, 15 Dec 2024 11:46:14 -0800 Subject: [PATCH 1/3] Wave 1 --- project-docs/wave-01.md | 5 ++++- src/App.jsx | 16 ++++++++++++++-- src/components/ChatEntry.jsx | 14 +++++++++----- src/components/ChatLog.jsx | 0 4 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 src/components/ChatLog.jsx diff --git a/project-docs/wave-01.md b/project-docs/wave-01.md index cf05e2651..f80827cff 100644 --- a/project-docs/wave-01.md +++ b/project-docs/wave-01.md @@ -2,7 +2,10 @@ **Learn Topics: React Components and Props required for this wave** -Update the `ChatEntry` and `App` components to display a single chat message bubble with the message text and relative timestamp, plus the sender's name above it. +Update the `ChatEntry` and `App` components to display a +single chat message bubble with the message text and +relative timestamp, plus +the sender's name above it. A good way to test this code as you write it would be to take the first chat message from the [JSON data file](../src/data/messages.json) and use it as the data for the `ChatEntry` component. diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..5afcb27d8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,26 @@ import './App.css'; +import ChatEntry from './components/ChatEntry'; const App = () => { + const chatData = [ + { + sender:'Vladimir', + body:'why are you arguing with me', + timeStamp:'2018-05-29T22:49:06+00:00' + }, + { + sender:'Estragon', + body:'Because you are wrong.', + timeStamp:'2018-05-29T22:49:33+00:00' + }]; + const firstMessage = chatData[0]; return (

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..66613bad4 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 = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.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; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..e69de29bb From 1b159560245d432c7ce3f0d11d2932aa28b5e192 Mon Sep 17 00:00:00 2001 From: Madina-j Date: Sun, 15 Dec 2024 12:21:46 -0800 Subject: [PATCH 2/3] Wave2 --- src/App.jsx | 17 +++-------------- src/components/ChatEntry.jsx | 4 +++- src/components/ChatLog.jsx | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 15 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 5afcb27d8..71b92af34 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,26 +1,15 @@ import './App.css'; -import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; +import chatData from './data/messages.json'; const App = () => { - const chatData = [ - { - sender:'Vladimir', - body:'why are you arguing with me', - timeStamp:'2018-05-29T22:49:06+00:00' - }, - { - sender:'Estragon', - body:'Because you are wrong.', - timeStamp:'2018-05-29T22:49:33+00:00' - }]; - const firstMessage = chatData[0]; return (

Application title

- +
); diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 66613bad4..a5ec681aa 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -16,9 +16,11 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index e69de29bb..a72125a5c 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -0,0 +1,34 @@ +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; + +const ChatLog = (props) => { + const chatComponents = props.entries.map((entry) => { + return ( + + ); + }); + + return
{chatComponents}
; +}; + +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, +}; + +export default ChatLog; \ No newline at end of file From 5e468ed7b7c7e8148a1ae38542a65141b77d65e4 Mon Sep 17 00:00:00 2001 From: Madina-j Date: Sun, 15 Dec 2024 14:40:01 -0800 Subject: [PATCH 3/3] Wave 3 --- src/App.jsx | 19 +++++++++++++++++-- src/components/ChatEntry.jsx | 10 ++++++++-- src/components/ChatLog.jsx | 6 ++++-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 71b92af34..28f99cbf3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,15 +1,30 @@ import './App.css'; import ChatLog from './components/ChatLog'; import chatData from './data/messages.json'; +import { useState } from 'react'; const App = () => { + const [entries, setEntries] = useState(chatData); + const toggleLike = (id) => { + const updatedEntries = entries.map((entry) => { + if (entry.id === id) { + return { ...entry, liked: !entry.liked }; + } else { + return entry; + } + }); + setEntries(updatedEntries); + }; + const likeCount = entries.reduce((total, entry) => { + return entry.liked ? total + 1 : total; + }, 0); return (
-

Application title

+

{likeCount} ❤️s

- +
); diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index a5ec681aa..ac1e86db5 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,15 +1,20 @@ import './ChatEntry.css'; import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; +// import { useState } from 'react'; const ChatEntry = (props) => { + const heart = props.liked ? '❤️' : '🤍'; + const handleLikeClick = () => { + props.onLikeToggle(props.id); + }; return (

{props.sender}

{props.body}

- +
); @@ -20,7 +25,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool + liked: PropTypes.bool, + onLikeToggle: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index a72125a5c..c45b1f286 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -2,8 +2,8 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -const ChatLog = (props) => { - const chatComponents = props.entries.map((entry) => { +const ChatLog = ({entries, onLikeToggle}) => { + const chatComponents = entries.map((entry) => { return ( { body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} + onLikeToggle={onLikeToggle} /> ); }); @@ -29,6 +30,7 @@ ChatLog.propTypes = { liked: PropTypes.bool, }) ).isRequired, + onLikeToggle: PropTypes.func.isRequired }; export default ChatLog; \ No newline at end of file