From 270651de3471d8f3cb8eea8029ac38e2baf2e40a Mon Sep 17 00:00:00 2001 From: Anh Huynh Date: Mon, 26 Jun 2023 02:28:20 -0700 Subject: [PATCH 1/7] Modified App.js and ChatEntry.js files and passed Wave 1 --- src/App.js | 12 ++++++++++-- src/components/ChatEntry.js | 11 +++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..c655b083e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,24 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +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', + } + 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..d957b8b3f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,15 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

@@ -16,7 +17,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; From a39e16c8a1ccb94e5f56cc706c12dcef2964801f Mon Sep 17 00:00:00 2001 From: Anh Huynh Date: Mon, 26 Jun 2023 04:57:29 -0700 Subject: [PATCH 2/7] Modified App.js ChatEntry.js and ChatLog.js files and passed Wave 2 --- src/App.js | 18 ++++++++++-------- src/components/ChatEntry.js | 7 +++++++ src/components/ChatLog.js | 38 +++++++++++++++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 8 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c655b083e..4000656cb 100644 --- a/src/App.js +++ b/src/App.js @@ -2,14 +2,16 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; const App = () => { - const chatData = - { - 'sender':'Vladimir', - 'body':'why are you arguing with me', - 'timeStamp':'2018-05-29T22:49:06+00:00', - } + const chatData = chatMessages + // console.log(chatData) + // { + // 'sender':'Vladimir', + // 'body':'why are you arguing with me', + // 'timeStamp':'2018-05-29T22:49:06+00:00', + // } return (
@@ -17,8 +19,8 @@ const App = () => {

Application title

- - {/* Wave 02: Render ChatLog component */} + {/* */} +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index d957b8b3f..8fd7da27b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,12 +2,18 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; +import { useState } from 'react'; const ChatEntry = (props) => { + const [isLiked, setIsLiked] = useState(false); + + + return (

{props.sender}

+

{props.id}

{props.body}

@@ -17,6 +23,7 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..c0d35c2a8 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,38 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + const chatEntryComponents = props.entries.map((entry, index) => { + return ( +
  • + + +
    • + ); + }); + + return ( +
    +
      {chatEntryComponents}
    +
    + ); +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + }) + ), +}; + +export default ChatLog; \ No newline at end of file From f418fae339218728d73d6b04b02c352821f2cbd7 Mon Sep 17 00:00:00 2001 From: Anh Huynh Date: Fri, 30 Jun 2023 21:13:19 -0700 Subject: [PATCH 3/7] Modified ChatEntry.js ChatLog.js and App.js files and passed all Wave 3 --- project-docs/wave-03.md | 2 +- src/App.js | 36 ++++++++++++++++++++++++++++++++---- src/components/ChatEntry.css | 2 +- src/components/ChatEntry.js | 23 ++++++++++++++++++++--- src/components/ChatLog.js | 14 +++++++++----- 5 files changed, 63 insertions(+), 14 deletions(-) diff --git a/project-docs/wave-03.md b/project-docs/wave-03.md index 22e175a61..c37267179 100644 --- a/project-docs/wave-03.md +++ b/project-docs/wave-03.md @@ -20,6 +20,6 @@ In this wave we will update the components to manage a **like** feature. ## Tests The tests for this component are integration tests. They don't make assumptions about the implementation details of like feature. The tests verify the following functionality: -- When the user click on a 🤍 button it changes to a ❤️, and when the user clicks on a ❤️ it changes to a 🤍. This test also verifies that clicking on one `ChatEntry`'s like button (🤍) doesn't change other `ChatEntry`'s buttons. +- When the user clicks on a 🤍 button it changes to a ❤️, and when the user clicks on a ❤️ it changes to a 🤍. This test also verifies that clicking on one `ChatEntry`'s like button (🤍) doesn't change other `ChatEntry`'s buttons. - The correct number of filled hearts is displayed at the top of the screen. - If you make a design decision to use a different emoji, you will need to change the tests accordingly. diff --git a/src/App.js b/src/App.js index 4000656cb..47f017e79 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,54 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; +// import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; +import { useState } from 'react'; + const App = () => { - const chatData = chatMessages + const [chatData, setChatData] = useState(chatMessages) // console.log(chatData) // { // 'sender':'Vladimir', // 'body':'why are you arguing with me', // 'timeStamp':'2018-05-29T22:49:06+00:00', // } + + const updateChatData = updatedChatEntry => { + const updatedChatEntries = chatData.map(chatEntry => { + if (chatEntry.id === updatedChatEntry.id) { + return updatedChatEntry; + } else { + return chatEntry; + } + }); + + setChatData(updatedChatEntries) + } + + const likeCounts = () => { + let likeCount = 0; + for (let entry of chatData) { + if (entry.liked === true) { + likeCount += 1 + } + } + return likeCount + }; return (
    -

    Application title

    +

    Anh's Chat Log

    +

    Total Number of Likes: {likeCounts()} ❤️

    {/* */} - +
    ); diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..ece5ad733 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -97,4 +97,4 @@ button { .chat-entry.remote .entry-bubble:hover::before { background-color: #a9f6f6; -} \ No newline at end of file +} diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8fd7da27b..34ab7d3a7 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,12 +2,27 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -import { useState } from 'react'; +// import { useState } from 'react'; const ChatEntry = (props) => { - const [isLiked, setIsLiked] = useState(false); + // const [isLiked, setIsLiked] = useState(false); + // const toggleLike = () => { + // setIsLiked(!isLiked); + // }; + const onLikeButtonClick = () => { + const updatedChatEntry = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked + }; + props.onUpdate(updatedChatEntry); + }; + + const like = props.liked ? '❤️' : '🤍'; return (
    @@ -16,7 +31,7 @@ const ChatEntry = (props) => {

    {props.id}

    {props.body}

    - +
    ); @@ -27,6 +42,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, + onUpdate: PropTypes.func.isRequired }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index c0d35c2a8..73309e794 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,21 +4,23 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; const ChatLog = (props) => { - const chatEntryComponents = props.entries.map((entry, index) => { + const chatEntryComponents = props.entries.map((entry) => { return ( -
  • +
  • - + timeStamp={entry.timeStamp} + liked={entry.liked} + onUpdate={props.onUpdateChatData} + >
    • ); }); return ( -
    +
      {chatEntryComponents}
    ); @@ -31,8 +33,10 @@ ChatLog.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, }) ), + onUpdateChatData: PropTypes.func.isRequired }; export default ChatLog; \ No newline at end of file From fbf76215bb8c8fe3f97e962819e41be136645f7b Mon Sep 17 00:00:00 2001 From: Anh Huynh Date: Fri, 30 Jun 2023 21:16:20 -0700 Subject: [PATCH 4/7] Added letter s next to heart emoji for Total Number of Likes to pass one of the tests in Wave 3 --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 47f017e79..e60b4c513 100644 --- a/src/App.js +++ b/src/App.js @@ -41,7 +41,7 @@ const App = () => {

    Anh's Chat Log

    -

    Total Number of Likes: {likeCounts()} ❤️

    +

    Total Number of Likes: {likeCounts()} ❤️s

    {/* */} From ec516a7f9a79f88f9acdb3db48866062cd072225 Mon Sep 17 00:00:00 2001 From: Anh Huynh Date: Fri, 30 Jun 2023 21:31:23 -0700 Subject: [PATCH 5/7] Changed title of the website in h1 of return statement in App.js file --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index e60b4c513..53a5df9af 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,7 @@ const App = () => { return (
    -

    Anh's Chat Log

    +

    Chat between Vladimir and Estragon

    Total Number of Likes: {likeCounts()} ❤️s

    From c27534f3d6e1dd6ccfdec826b28dab30382ec518 Mon Sep 17 00:00:00 2001 From: Anh Huynh Date: Fri, 30 Jun 2023 22:22:04 -0700 Subject: [PATCH 6/7] Made minor syntactical changes --- src/App.js | 11 +++++------ src/components/ChatLog.js | 4 ++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 53a5df9af..3a8e416dd 100644 --- a/src/App.js +++ b/src/App.js @@ -8,15 +8,14 @@ import { useState } from 'react'; const App = () => { const [chatData, setChatData] = useState(chatMessages) - // console.log(chatData) // { // 'sender':'Vladimir', // 'body':'why are you arguing with me', // 'timeStamp':'2018-05-29T22:49:06+00:00', // } - const updateChatData = updatedChatEntry => { - const updatedChatEntries = chatData.map(chatEntry => { + const updateChatData = (updatedChatEntry) => { + const updatedChatEntries = chatData.map((chatEntry) => { if (chatEntry.id === updatedChatEntry.id) { return updatedChatEntry; } else { @@ -24,8 +23,8 @@ const App = () => { } }); - setChatData(updatedChatEntries) - } + setChatData(updatedChatEntries); + }; const likeCounts = () => { let likeCount = 0; @@ -34,7 +33,7 @@ const App = () => { likeCount += 1 } } - return likeCount + return likeCount; }; return ( diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 73309e794..f8435db92 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,9 +4,9 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; const ChatLog = (props) => { - const chatEntryComponents = props.entries.map((entry) => { + const chatEntryComponents = props.entries.map((entry, index) => { return ( -
  • +
  • Date: Fri, 30 Jun 2023 22:55:21 -0700 Subject: [PATCH 7/7] Made syntactical changes --- src/App.js | 8 ++++---- src/components/ChatEntry.js | 4 ++-- src/components/ChatLog.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 3a8e416dd..8a105790d 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ import { useState } from 'react'; const App = () => { - const [chatData, setChatData] = useState(chatMessages) + const [chatData, setChatData] = useState(chatMessages); // { // 'sender':'Vladimir', // 'body':'why are you arguing with me', @@ -30,7 +30,7 @@ const App = () => { let likeCount = 0; for (let entry of chatData) { if (entry.liked === true) { - likeCount += 1 + likeCount += 1; } } return likeCount; @@ -45,8 +45,8 @@ const App = () => {
    {/* */}
    • diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 34ab7d3a7..7a9e04787 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,7 +17,7 @@ const ChatEntry = (props) => { sender: props.sender, body: props.body, timeStamp: props.timeStamp, - liked: !props.liked + liked: !props.liked, }; props.onUpdate(updatedChatEntry); }; @@ -43,7 +43,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - onUpdate: PropTypes.func.isRequired + onUpdate: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index f8435db92..04978eb36 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -36,7 +36,7 @@ ChatLog.propTypes = { liked: PropTypes.bool, }) ), - onUpdateChatData: PropTypes.func.isRequired + onUpdateChatData: PropTypes.func.isRequired, }; export default ChatLog; \ No newline at end of file