From 0a9a268daf693562ec9278742976cafabfede23f Mon Sep 17 00:00:00 2001 From: "echo '# Set PATH, MANPATH, etc., for Homebrew.' /Users/daliaali/.zprofile" Date: Thu, 26 Jan 2023 14:18:30 -0800 Subject: [PATCH 1/3] implemented wave 1 --- src/App.js | 16 ++++++++++++++++ src/components/ChatEntry.js | 11 +++++++---- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..64c0bebf0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,16 @@ import React from 'react'; import './App.css'; +import ChatEntry from './components/ChatEntry'; import chatMessages from './data/messages.json'; +const chatMessage = { + id: 1, + sender: 'Vladimir', + body: 'why are you arguing with me', + timeStamp: '2018-05-29T22:49:06+00:00', + liked: false, +}; + const App = () => { return (
@@ -9,6 +18,13 @@ const App = () => {

Application title

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

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{body}

+

+ +

From c0c809dfa21f79eaa37bb767d1828e6a5c5125ce Mon Sep 17 00:00:00 2001 From: "echo '# Set PATH, MANPATH, etc., for Homebrew.' /Users/daliaali/.zprofile" Date: Mon, 30 Jan 2023 12:51:58 -0800 Subject: [PATCH 2/3] implemented wave 2 and added the state of liked in ChatEntry to handle the event of onClick to toggle between like and unlike --- src/App.js | 22 ++++++++++++---------- src/components/ChatEntry.js | 18 ++++++++++++++---- src/components/ChatLog.js | 21 +++++++++++++++++++++ 3 files changed, 47 insertions(+), 14 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 64c0bebf0..ffb03ddb7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,16 @@ import React from 'react'; import './App.css'; -import ChatEntry from './components/ChatEntry'; +// import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; -const chatMessage = { - id: 1, - sender: 'Vladimir', - body: 'why are you arguing with me', - timeStamp: '2018-05-29T22:49:06+00:00', - liked: false, -}; +// const chatMessage = { +// id: 1, +// sender: 'Vladimir', +// body: 'why are you arguing with me', +// timeStamp: '2018-05-29T22:49:06+00:00', +// liked: false, +// }; const App = () => { return ( @@ -18,13 +19,14 @@ const App = () => {

Application title

- + /> */} + {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8e7640688..4637449a4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,9 +1,15 @@ -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({ sender, body, timeStamp }) => { +const ChatEntry = ({ sender, body, timeStamp, liked }) => { + const LikedFromProp = liked ? true : false; + const [isLiked, setIsLiked] = useState(LikedFromProp); + console.log(isLiked); + const likeOrUnlikeMessage = () => setIsLiked(!isLiked); + const heartShape = isLiked ? '❤️' : '🤍'; + return (

{sender}

@@ -12,14 +18,18 @@ const ChatEntry = ({ sender, body, timeStamp }) => {

- +
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..e45b7b63f --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,21 @@ +import React from 'react'; +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; + +const chatLog = ({ entries }) => { + const chatEntries = entries.map((entry) => { + return ( + + ); + }); + + return
{chatEntries}
; +}; + +export default chatLog; From 9f89e920b37fdbed5e0d2b295c50e6bfaf5d0dc6 Mon Sep 17 00:00:00 2001 From: "echo '# Set PATH, MANPATH, etc., for Homebrew.' /Users/daliaali/.zprofile" Date: Tue, 31 Jan 2023 14:10:45 -0800 Subject: [PATCH 3/3] implemented wave 3 --- src/App.js | 52 +++++++++++++++++++++++-------------- src/components/ChatEntry.js | 33 ++++++++++++++++------- src/components/ChatLog.js | 18 ++++++++++++- 3 files changed, 74 insertions(+), 29 deletions(-) diff --git a/src/App.js b/src/App.js index ffb03ddb7..1be62ca7a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,32 +1,46 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; -// import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; -// const chatMessage = { -// id: 1, -// sender: 'Vladimir', -// body: 'why are you arguing with me', -// timeStamp: '2018-05-29T22:49:06+00:00', -// liked: false, -// }; - const App = () => { + const [chatEntries, setChatEntries] = useState(chatMessages); + + let initalNumLiked = 0; + for (const message of chatEntries) { + if (message.liked) { + initalNumLiked++; + } + } + + const [numLiked, setNumLiked] = useState(initalNumLiked); + + const updateHeartChatEntries = (updatedMessage) => { + const updatedChat = chatEntries.map((message) => { + if (message.id === updatedMessage.id) { + if (updatedMessage.liked) { + setNumLiked(numLiked + 1); + } else { + setNumLiked(numLiked - 1); + } + return updatedMessage; + } else { + return message; + } + }); + setChatEntries(updatedChat); + }; + return (
-

Application title

+

{numLiked} ❤️s

- {/* */} - + {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 4637449a4..f9173f504 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,17 +1,29 @@ -import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({ sender, body, timeStamp, liked }) => { - const LikedFromProp = liked ? true : false; - const [isLiked, setIsLiked] = useState(LikedFromProp); - console.log(isLiked); - const likeOrUnlikeMessage = () => setIsLiked(!isLiked); - const heartShape = isLiked ? '❤️' : '🤍'; +const ChatEntry = ({ + id, + sender, + body, + timeStamp, + liked, + onUpdateChatHeart, +}) => { + const likeOrUnlikeMessage = () => { + const updatedMessage = { + id: id, + sender: sender, + body: body, + timeStamp: timeStamp, + liked: !liked, + }; + onUpdateChatHeart(updatedMessage); + }; + const heartShape = liked ? '❤️' : '🤍'; return ( -
+

{sender}

{body}

@@ -27,9 +39,12 @@ const ChatEntry = ({ sender, body, timeStamp, liked }) => { }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.string, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onUpdateChatHeart: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e45b7b63f..3a195e83e 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,16 +1,19 @@ import React from 'react'; import './ChatLog.css'; import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; -const chatLog = ({ entries }) => { +const chatLog = ({ entries, onUpdateChatHeart }) => { const chatEntries = entries.map((entry) => { return ( ); }); @@ -19,3 +22,16 @@ const chatLog = ({ entries }) => { }; export default chatLog; + +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, + }) + ), + onUpdateChatHeart: PropTypes.func.isRequired, +};