From b498064b41b41fa37652e3706a38a2ff177dc638 Mon Sep 17 00:00:00 2001 From: Melissa Date: Wed, 14 Dec 2022 17:17:10 -0800 Subject: [PATCH 1/3] Wave 1 and 2 working --- src/App.js | 11 +++++++++-- src/components/ChatEntry.js | 13 +++++++++---- src/components/ChatLog.js | 24 ++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..abaeccb01 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,23 @@ import React from 'react'; import './App.css'; +import ChatLog from './components/ChatLog'; +// import TimeStamp from './components/TimeStamp'; import chatMessages from './data/messages.json'; const App = () => { + // const name = 'Chat between Vladimir and Estragon' + + return (

Application title

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + {/* */} + + + { /*Wave 02: Render ChatLog component */}
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..7f6b81109 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,16 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + +const ChatEntry = ({id, sender,body, timeStamp,liked}) => { -const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{body}

+

@@ -17,6 +19,9 @@ const ChatEntry = (props) => { 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..bcd90dc03 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,24 @@ +import ChatEntry from './ChatEntry'; + +const ChatLog = ({entries}) => { + +const chatEntrycomponents = entries.map((chats) =>{ + + return ( +
  • + < ChatEntry sender={chats.sender} body={chats.body} timeStamp={chats.timeStamp}/> +
    • + ) +}); + +return ( + +); + + +}; + + +export default ChatLog; \ No newline at end of file From ca292818455e9abef0b3a1a4e4a7cd8de5eb8d0c Mon Sep 17 00:00:00 2001 From: Melissa Date: Thu, 22 Dec 2022 13:06:41 -0500 Subject: [PATCH 2/3] Wave 3 is completed --- src/App.js | 39 ++++++++++++++++++++++++++++++------- src/components/ChatEntry.js | 13 ++++++++----- src/components/ChatLog.css | 1 + src/components/ChatLog.js | 36 +++++++++++++++++++++++----------- 4 files changed, 66 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index abaeccb01..f57da6162 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,48 @@ import React from 'react'; +import { useState } from 'react'; import './App.css'; import ChatLog from './components/ChatLog'; -// import TimeStamp from './components/TimeStamp'; import chatMessages from './data/messages.json'; const App = () => { - // const name = 'Chat between Vladimir and Estragon' + const [chatData, setChatData]= useState(chatMessages) + + const updateLikes = (id) => { + console.log('updatelikes is being called'); + const newChatEntries = []; + + for (const chat of chatData) { + if (chat.id !== id) { + newChatEntries.push(chat); + } else { + const newChat = { + ...chat, + liked: !chat.liked, + }; + + newChatEntries.push(newChat); + + } + + setChatData(newChatEntries); + + } + }; + const countLikes = () => { + return chatData.reduce((accumulator, count) => { + return count.liked ? accumulator + 1 : accumulator; + }, 0); + }; return (
    -

    Application title

    +

    Instant Messenger

    +

    {countLikes()} ❤️s

    - {/* */} - - - { /*Wave 02: Render ChatLog component */} +
    ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 7f6b81109..710cdec12 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,25 +3,28 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({id, sender,body, timeStamp,liked}) => { - +const ChatEntry = ({id, sender,body, timeStamp,liked, updateLikes}) => { + const myHeart = liked ? '❤️': '🤍' ; return (

    {sender}

    {body}

    - +
    ); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id:PropTypes.number, sender:PropTypes.string.isRequired, body:PropTypes.string.isRequired, - timeStamp:PropTypes.string.isRequired + timeStamp:PropTypes.string.isRequired, + updateLikes:PropTypes.func }; export default ChatEntry; diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css index 378848d1f..a7043e1d1 100644 --- a/src/components/ChatLog.css +++ b/src/components/ChatLog.css @@ -2,3 +2,4 @@ margin: auto; max-width: 50rem; } + diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index bcd90dc03..04ad9a07f 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,24 +1,38 @@ import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; -const ChatLog = ({entries}) => { +const ChatLog = ({entries,updateLikes}) => { -const chatEntrycomponents = entries.map((chats) =>{ + const chatEntrycomponents = entries.map((chats) =>{ return (
  • - < ChatEntry sender={chats.sender} body={chats.body} timeStamp={chats.timeStamp}/> + < ChatEntry sender={chats.sender} body={chats.body} timeStamp={chats.timeStamp} liked={chats.liked} updateLikes={updateLikes}/>
    • ) }); -return ( - -); - - + return ( + + ); + + +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id:PropTypes.number, + sender:PropTypes.string.isRequired, + body:PropTypes.string.isRequired, + timeStamp:PropTypes.string.isRequired, + liked:PropTypes.bool.isRequired, + +}) + ), + updateLikes:PropTypes.func.isRequired, }; - export default ChatLog; \ No newline at end of file From b54bbcbe9d7acfbde66de89700b1e57a69c7ffcb Mon Sep 17 00:00:00 2001 From: Melissa Date: Thu, 22 Dec 2022 14:42:16 -0500 Subject: [PATCH 3/3] Wave 3 completed and passing the test --- src/App.js | 12 ++++++++---- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 2 +- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index f57da6162..bff25fe46 100644 --- a/src/App.js +++ b/src/App.js @@ -5,19 +5,23 @@ import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { - const [chatData, setChatData]= useState(chatMessages) + const chatCopy =[] + for (const message of chatMessages){ + chatCopy.push(message) + } + const [chatData, setChatData]= useState(chatCopy) - const updateLikes = (id) => { + const updateLikes = (id, updatedLike) => { console.log('updatelikes is being called'); const newChatEntries = []; - for (const chat of chatData) { if (chat.id !== id) { + newChatEntries.push(chat); } else { const newChat = { ...chat, - liked: !chat.liked, + liked: updatedLike }; newChatEntries.push(newChat); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 710cdec12..c7062137c 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -11,7 +11,7 @@ const ChatEntry = ({id, sender,body, timeStamp,liked, updateLikes}) => {

    {body}

    -
    diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 04ad9a07f..d90ad3de0 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -7,7 +7,7 @@ const ChatLog = ({entries,updateLikes}) => { return (
  • - < ChatEntry sender={chats.sender} body={chats.body} timeStamp={chats.timeStamp} liked={chats.liked} updateLikes={updateLikes}/> + < ChatEntry id = {chats.id} sender={chats.sender} body={chats.body} timeStamp={chats.timeStamp} liked={chats.liked} updateLikes={updateLikes}/>
    • ) });