From 8e4d5e0aeab8fa552f783d8866dfe5af92ebe245 Mon Sep 17 00:00:00 2001 From: Sujin Shin Date: Wed, 22 Jun 2022 15:25:10 -0400 Subject: [PATCH 1/3] wave 2 complete but figuring out the bugs in wave 3 --- project-docs/wave-02.md | 4 +++- src/App.js | 29 +++++++++++++++++++++++------ src/components/ChatEntry.js | 34 ++++++++++++++++++++++++++-------- src/components/ChatLog.js | 28 ++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/project-docs/wave-02.md b/project-docs/wave-02.md index 5a55fe505..ee9ceb791 100644 --- a/project-docs/wave-02.md +++ b/project-docs/wave-02.md @@ -2,7 +2,9 @@ **Learn Topics: React Components and Props required for this wave** -Implement a `ChatLog` component and update the `App` component to display an entire chat log. `ChatLog` should display a sequence of individual `ChatEntry` components. +--Implement a `ChatLog` component and +--update the `App` component to display an entire chat log. +--`ChatLog` should display a sequence of individual `ChatEntry` components. `ChatLog` takes one prop named `entries` (which is an array). diff --git a/src/App.js b/src/App.js index c10859093..9eda24efd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,33 @@ -import React from 'react'; +import React, {useState} from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; const App = () => { + const [messageData, setMessageData] = useState(chatMessages) + + const updateMessageData = (updatedMessage) => { + const messages = chatMessages.map((message) => { + if (message.id === updatedMessage.id) { + return updatedMessage; + } else { + return message; + } + }); + + setMessageData(messages) + } + return ( -
+
-

Application title

+

Chatlog

-
- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
+
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..05b7d4c58 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,40 @@ import React from 'react'; import './ChatEntry.css'; -import PropTypes from 'prop-types'; +// import PropTypes from 'prop-types'; + const ChatEntry = (props) => { + // const firstMessage = props.messages[0] + const onLikeButtonClick = () => { + const updatedMessage = { + id: props.id, + sender: props.name, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + } + props.onUpdate(updatedMessage) + } + // const button = document.getElementById('button'); + // const like = props.liked ? button.textContent = '🌻' : button.textContent = '🤍'; + return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

{props.timeStamp}

+
); }; -ChatEntry.propTypes = { - //Fill with correct proptypes -}; +// 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.js b/src/components/ChatLog.js new file mode 100644 index 000000000..a48c49558 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,28 @@ +import React from 'react'; +import './ChatLog.css'; +import './ChatEntry.css'; +// import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (entries) => { + const messageComponents = entries.messages.map((message,index) => { + return( +
+ +
+ ) + }); + + return( +
{messageComponents}
+ ); +}; + +export default ChatLog; \ No newline at end of file From e8938dd7c91079b930a44798e6e84f30eb62b191 Mon Sep 17 00:00:00 2001 From: Sujin Shin Date: Thu, 23 Jun 2022 12:25:19 -0400 Subject: [PATCH 2/3] finally got the like button to changeeee --- src/components/ChatEntry.js | 21 ++++++++++++++++++--- src/components/ChatLog.js | 3 ++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 05b7d4c58..6837f5a99 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -8,15 +8,30 @@ const ChatEntry = (props) => { const onLikeButtonClick = () => { const updatedMessage = { id: props.id, - sender: props.name, + sender: props.sender, body: props.body, timeStamp: props.timeStamp, liked: !props.liked, } props.onUpdate(updatedMessage) + console.log(!props.liked, 'I was clicked and am coming from the button') + const button = document.getElementById('button'); + if (!props.liked === true){ + button.textContent = '🌻' + } else { + button.textContent = '🤍' + } + } // const button = document.getElementById('button'); - // const like = props.liked ? button.textContent = '🌻' : button.textContent = '🤍'; + + // this is not right..... + // const emojiChange = props.liked ? button.textContent = '🌻' : button.textContent = '🤍'; + // experimenting + // const emojiChange = props.liked ? 'green' : 'red'; + + // this is acting weird + // console.log(props.liked, 'I was clicked and am coming from chat entry') return (
@@ -24,7 +39,7 @@ const ChatEntry = (props) => {

{props.body}

{props.timeStamp}

- +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a48c49558..77403eb0c 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,10 +4,11 @@ import './ChatEntry.css'; // import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; +// changed for entries to props to see if this was the bug const ChatLog = (entries) => { const messageComponents = entries.messages.map((message,index) => { return( -
+
Date: Fri, 24 Jun 2022 11:30:21 -0400 Subject: [PATCH 3/3] fixed my heart toggling --- project-docs/wave-03.md | 1 + src/App.js | 2 +- src/components/ChatEntry.js | 75 ++++++++++++++++++++++++++----------- src/components/ChatLog.js | 10 +++-- 4 files changed, 62 insertions(+), 26 deletions(-) diff --git a/project-docs/wave-03.md b/project-docs/wave-03.md index 22e175a61..625512768 100644 --- a/project-docs/wave-03.md +++ b/project-docs/wave-03.md @@ -5,6 +5,7 @@ In this wave we will update the components to manage a **like** feature. - Add behavior to heart button in `ChatEntry` so that when it is clicked it toggles from an empty heart (🤍) to a filled heart (❤️) and from a filled heart (❤️) to an empty heart (🤍). + - Manage the click event and state of the chat entries such that when the like status of a chat message changes by clicking the heart button, it is tracked by the `App` and the `App` reports the number of total messages that have been liked. - Example: If the user has liked three messages, `3 ❤️s` will appear at the top of the screen. diff --git a/src/App.js b/src/App.js index 9eda24efd..16fbd1d9d 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ const App = () => { const [messageData, setMessageData] = useState(chatMessages) const updateMessageData = (updatedMessage) => { - const messages = chatMessages.map((message) => { + const messages = messageData.map((message) => { if (message.id === updatedMessage.id) { return updatedMessage; } else { diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6837f5a99..e59861605 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,43 +3,76 @@ import './ChatEntry.css'; // import PropTypes from 'prop-types'; -const ChatEntry = (props) => { +const ChatEntry = ({ + id, + sender, + body, + timeStamp, + liked, + onUpdate +}) => { + + + // console.log({ + // id, + // sender, + // body, + // timeStamp, + // liked, + // onUpdate + // }) // const firstMessage = props.messages[0] const onLikeButtonClick = () => { const updatedMessage = { - id: props.id, - sender: props.sender, - body: props.body, - timeStamp: props.timeStamp, - liked: !props.liked, - } - props.onUpdate(updatedMessage) - console.log(!props.liked, 'I was clicked and am coming from the button') - const button = document.getElementById('button'); - if (!props.liked === true){ - button.textContent = '🌻' - } else { - button.textContent = '🤍' + id: id, + sender: sender, + body: body, + timeStamp: timeStamp, + liked: !liked, } + onUpdate(updatedMessage) - } // const button = document.getElementById('button'); + // if (!props.liked === true){ + // button.textContent = '🌻' + // } else { + // button.textContent = '🤍' + // } + + // const emojiChange = () => { + // if (!props.liked === true){ + // button.textContent = '🌻' + // } else { + // button.textContent = '🤍' + // } + // } + + } + + // not right + // const button = document.getElementById('button'); // this is not right..... // const emojiChange = props.liked ? button.textContent = '🌻' : button.textContent = '🤍'; // experimenting // const emojiChange = props.liked ? 'green' : 'red'; - // this is acting weird - // console.log(props.liked, 'I was clicked and am coming from chat entry') + + let icon = '' + + if (liked === true){ + icon = '🌻' + } else { + icon = '🤍' + } return (
-

{props.sender}

+

{sender}

-

{props.body}

-

{props.timeStamp}

- +

{body}

+

{timeStamp}

+
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 77403eb0c..c55031cd6 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,9 +4,11 @@ import './ChatEntry.css'; // import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; -// changed for entries to props to see if this was the bug -const ChatLog = (entries) => { - const messageComponents = entries.messages.map((message,index) => { +const ChatLog = ({messages, onUpdateMessage}) => { + // console.log(messages) + + + const messageComponents = messages.map((message,index) => { return(
{ body={message.body} timeStamp={message.timeStamp} liked={message.liked} - onUpdate={entries.onUpdateMessage} + onUpdate={onUpdateMessage} >
)