From e0a5fb712d0dcf3d1a22c28c68fb6437da479ab5 Mon Sep 17 00:00:00 2001 From: Cindy Vides Date: Fri, 23 Jun 2023 07:29:10 -0700 Subject: [PATCH 1/2] Waves completed --- src/App.js | 16 ++++++++++++---- src/components/ChatEntry.js | 32 +++++++++++++++++++++++++------- src/components/ChatLog.js | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 11 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..e8d7bda97 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,27 @@ -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 [totalLikes, setTotalLikes] = useState(0); + + const handleLikeCount = (id, liked) => { + setTotalLikes((prevLikes) => (liked ? prevLikes + 1 : prevLikes - 1)); + }; + return (
-

Application title

+

Vladimir and Estragon

+

{totalLikes} {totalLikes === 1 ? '❤️' : '❤️s'}

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); }; export default App; + diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..1342ec124 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,40 @@ -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + +const ChatEntry = ({ id, sender, body, timeStamp, onLikeChange }) => { + const [liked, setLiked] = useState(false); + + const handleLike = () => { + const newLiked = !liked; + setLiked(newLiked); + onLikeChange(id, newLiked); + }; -const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+ +

+
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.string.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + onLikeChange: PropTypes.func.isRequired, }; export default ChatEntry; + diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..fd25d3521 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; + +const ChatLog = ({ entries, onLikeChange }) => { + return ( +
+ {entries.map((entry) => ( + + ))} +
+ ); +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + }) + ).isRequired, + onLikeChange: PropTypes.func.isRequired, +}; + +export default ChatLog; + From a8d60e77e979d530bf01d042f1e99214a8121eb8 Mon Sep 17 00:00:00 2001 From: Cindy Vides Date: Thu, 29 Jun 2023 22:04:23 -0700 Subject: [PATCH 2/2] added Liked prop to ChatEntry and ChatLog, created new State, updated handleLikeCount --- src/App.js | 22 +++++++++++++++++++--- src/components/ChatEntry.js | 11 +++++------ src/components/ChatLog.js | 4 +++- 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index e8d7bda97..083c73ccd 100644 --- a/src/App.js +++ b/src/App.js @@ -5,11 +5,27 @@ import ChatLog from './components/ChatLog'; const App = () => { const [totalLikes, setTotalLikes] = useState(0); + const [messages, setMessages] = useState(chatMessages); - const handleLikeCount = (id, liked) => { - setTotalLikes((prevLikes) => (liked ? prevLikes + 1 : prevLikes - 1)); + const handleLikeCount = (id) => { + const copyMessages = [...messages]; + let newLiked; + for (let i = 0; i < copyMessages.length; i++){ + if (copyMessages[i].id === id){ + const oneMessage = {...copyMessages[i]} + oneMessage.liked = ! oneMessage.liked; + copyMessages[i] = oneMessage; + newLiked = oneMessage.liked; + } + } + + + setMessages(copyMessages); + setTotalLikes((prevLikes) => (newLiked ? prevLikes + 1 : prevLikes - 1)); }; + + return (
@@ -17,7 +33,7 @@ const App = () => {

{totalLikes} {totalLikes === 1 ? '❤️' : '❤️s'}

- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 1342ec124..460b0f5c2 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,13 +3,11 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({ id, sender, body, timeStamp, onLikeChange }) => { - const [liked, setLiked] = useState(false); +const ChatEntry = ({ id, sender, body, timeStamp, onLikeChange, liked }) => { const handleLike = () => { - const newLiked = !liked; - setLiked(newLiked); - onLikeChange(id, newLiked); + + onLikeChange(id); }; return ( @@ -29,11 +27,12 @@ const ChatEntry = ({ id, sender, body, timeStamp, onLikeChange }) => { }; ChatEntry.propTypes = { - id: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, onLikeChange: PropTypes.func.isRequired, + liked: PropTypes.bool.isRequired }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index fd25d3521..4a367bd26 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -14,6 +14,7 @@ const ChatLog = ({ entries, onLikeChange }) => { body={entry.body} timeStamp={entry.timeStamp} onLikeChange={onLikeChange} + liked={entry.liked} /> ))} @@ -23,10 +24,11 @@ const ChatLog = ({ entries, onLikeChange }) => { ChatLog.propTypes = { entries: PropTypes.arrayOf( PropTypes.shape({ - id: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired }) ).isRequired, onLikeChange: PropTypes.func.isRequired,