From 82a44a2b97393151c2f37edc3525e1d4230b2639 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 13:56:26 -0800 Subject: [PATCH 01/10] update the ChatEntry and App components --- src/App.js | 2 ++ src/components/ChatEntry.js | 20 ++++++++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..37e0e5898 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import React from 'react'; import './App.css'; +import ChatEntry from './components/ChatEntry'; import chatMessages from './data/messages.json'; const App = () => { @@ -9,6 +10,7 @@ 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..3cc370ef4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,24 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + // const chatData = [ + // { + // id: 1, + // sender: 'Vladimir', + // body: 'why are you arguing with me', + // timeStamp: '2018-05-29T22:49:06+00:00', + // liked: false, + // }, + // ]; return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

{props.TimeStamp}

@@ -16,7 +26,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 1c8886d467925f023b4d4fb0f554394f00b0b6ae Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 15:20:38 -0800 Subject: [PATCH 02/10] Added chatLog component and updated App component --- src/App.js | 3 ++- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 37e0e5898..d616fec75 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from 'react'; import './App.css'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { @@ -10,7 +11,7 @@ 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 3cc370ef4..ca13fec6c 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -18,7 +18,7 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

-

{props.TimeStamp}

+

{props.timeStamp}

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..0f84e498e --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + return ( + <> + + + ); +}; + +// ChatLog.propTypes = { +// chatData: PropTypes.arrayOf( +// PropTypes.shape({ +// sender: PropTypes.string.isRequired, +// id: PropTypes.number.isRequired, +// body: PropTypes.string.isRequired, +// timeStamp: PropTypes.string.isRequired, +// }) +// ), +// }; + +export default ChatLog; From 41d16cca6e012c1a4f9d7f6828d8ab54aa03212a Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 15:43:52 -0800 Subject: [PATCH 03/10] added className in chatLog component --- src/components/ChatLog.css | 1 + src/components/ChatLog.js | 16 +++------------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css index 378848d1f..dd8e96386 100644 --- a/src/components/ChatLog.css +++ b/src/components/ChatLog.css @@ -1,4 +1,5 @@ .chat-log { margin: auto; max-width: 50rem; + /* background-color: [orchid]; */ } diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 0f84e498e..b6794e049 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,10 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; +import './ChatLog.css'; const ChatLog = (props) => { return ( - <> +
- +
); }; -// ChatLog.propTypes = { -// chatData: PropTypes.arrayOf( -// PropTypes.shape({ -// sender: PropTypes.string.isRequired, -// id: PropTypes.number.isRequired, -// body: PropTypes.string.isRequired, -// timeStamp: PropTypes.string.isRequired, -// }) -// ), -// }; - export default ChatLog; From ca9e96679ba324f7720c0f20f2cbd1c0fd0ac045 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 16:23:13 -0800 Subject: [PATCH 04/10] added piece of state to chatEntry component --- src/components/ChatEntry.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index ca13fec6c..e55083096 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,8 +2,14 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; +import { useState } from 'react'; const ChatEntry = (props) => { + const [likesCount, setLikesCount] = useState(0); + const increaseLikes = () => { + setLikesCount(likesCount + 1); + }; + // const chatData = [ // { // id: 1, @@ -17,9 +23,13 @@ const ChatEntry = (props) => {

{props.sender}

-

{props.body}

+

+ {props.body} {likesCount} +

{props.timeStamp}

- +
); From a81777540f687604899d1fe57fe0cfed81e69b3f Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 17:35:54 -0800 Subject: [PATCH 05/10] delete previous use state function and add new piece of state for chatEntry component --- src/components/ChatEntry.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index e55083096..7873e104a 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,11 +5,19 @@ import TimeStamp from './TimeStamp'; import { useState } from 'react'; const ChatEntry = (props) => { - const [likesCount, setLikesCount] = useState(0); - const increaseLikes = () => { - setLikesCount(likesCount + 1); + // const [likesCount, setLikesCount] = useState(0); + // const increaseLikes = () => { + // setLikesCount(likesCount + 1); + // }; + + const [isLiked, setLiked] = useState(false); + + const heartMessage = () => { + setLiked(!isLiked); }; + const heartType = isLiked ? '❤️' : '🤍'; + // const chatData = [ // { // id: 1, @@ -23,12 +31,10 @@ const ChatEntry = (props) => {

{props.sender}

-

- {props.body} {likesCount} -

+

{props.body}

{props.timeStamp}

-
@@ -39,6 +45,7 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + likes: PropTypes.number.isRequired, }; export default ChatEntry; From 2693a95f721161997bcefac02a7cb69f7eb3552e Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 19:37:03 -0800 Subject: [PATCH 06/10] add event handler in chatEntry and update proptypes --- src/App.js | 27 +++++++++++++++++++++++---- src/components/ChatEntry.js | 26 +++++++++++++++++++------- src/components/ChatLog.js | 16 ++++++++++++++++ 3 files changed, 58 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index d616fec75..22e9374bf 100644 --- a/src/App.js +++ b/src/App.js @@ -3,15 +3,34 @@ import './App.css'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; +import { useState } from 'react'; const App = () => { + const [chatData, setChatData] = useState(chatMessages); + + const updateChatData = (updatedChat) => { + const chats = chatData.map((chat) => { + if (chat.id === updatedChat.id) { + return updatedChat; + } else { + return chat; + } + }); + setChatData(chats); + }; + // const [isLiked, setLiked] = useState(false); + + // const heartMessage = () => { + // setLiked(!isLiked); + // }; + + // const heartType = isLiked ? '❤️' : '🤍'; + return (
-
-

Application title

-
+
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 7873e104a..08b1520c4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,18 +5,28 @@ import TimeStamp from './TimeStamp'; import { useState } from 'react'; const ChatEntry = (props) => { + const onClickHeartButton = () => { + const updatedChat = { + id: props.id, + sender: props.sender, + body: props.body, + isLiked: !props.isLiked, + timeStamp: props.timeStamp, + }; + props.onUpdate(updatedChat); + }; // const [likesCount, setLikesCount] = useState(0); // const increaseLikes = () => { // setLikesCount(likesCount + 1); // }; - const [isLiked, setLiked] = useState(false); + // const [isLiked, setLiked] = useState(false); - const heartMessage = () => { - setLiked(!isLiked); - }; + // const heartMessage = () => { + // setLiked(!isLiked); + // }; - const heartType = isLiked ? '❤️' : '🤍'; + const heartType = props.isLiked ? '❤️' : '🤍'; // const chatData = [ // { @@ -33,7 +43,7 @@ const ChatEntry = (props) => {

{props.body}

{props.timeStamp}

-
@@ -42,10 +52,12 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - likes: PropTypes.number.isRequired, + isLiked: PropTypes.bool, + onUpdate: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index b6794e049..b965ab91f 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -9,9 +9,12 @@ const ChatLog = (props) => { @@ -19,4 +22,17 @@ const ChatLog = (props) => { ); }; +ChatLog.propTypes = { + chats: PropTypes.arrayOf( + PropTypes.shape({ + sender: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + isLiked: PropTypes.bool, + }) + ), + onUpdateChat: PropTypes.func.isRequired, +}; + export default ChatLog; From 37c9ba570d150aa3ad59852819ee029e835f0904 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 20:22:33 -0800 Subject: [PATCH 07/10] refactor getChatData in app component --- src/App.js | 22 +++++++++++----------- src/components/ChatEntry.js | 28 ++++++++++++++-------------- src/components/ChatLog.js | 7 ++++--- 3 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/App.js b/src/App.js index 22e9374bf..284228e74 100644 --- a/src/App.js +++ b/src/App.js @@ -8,17 +8,17 @@ import { useState } from 'react'; const App = () => { const [chatData, setChatData] = useState(chatMessages); - const updateChatData = (updatedChat) => { - const chats = chatData.map((chat) => { - if (chat.id === updatedChat.id) { - return updatedChat; - } else { - return chat; - } - }); - setChatData(chats); + const updateChatData = (id) => { + setChatData((chatData) => + chatData.map((chat) => { + if (chat.id === id) { + return { ...chat, liked: !chat.liked }; + } else { + return chat; + } + }) + ); }; - // const [isLiked, setLiked] = useState(false); // const heartMessage = () => { // setLiked(!isLiked); @@ -28,7 +28,7 @@ const App = () => { return (
-
Title
+
Number of Likes:
{/* Wave 01: Render one ChatEntry component diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 08b1520c4..9edacff8b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,16 +5,16 @@ import TimeStamp from './TimeStamp'; import { useState } from 'react'; const ChatEntry = (props) => { - const onClickHeartButton = () => { - const updatedChat = { - id: props.id, - sender: props.sender, - body: props.body, - isLiked: !props.isLiked, - timeStamp: props.timeStamp, - }; - props.onUpdate(updatedChat); - }; + // const onClickHeartButton = () => { + // const updatedChat = { + // id: props.id, + // sender: props.sender, + // body: props.body, + // isLiked: !props.isLiked, + // timeStamp: props.timeStamp, + // }; + // props.onUpdateChat(updatedChat); + // }; // const [likesCount, setLikesCount] = useState(0); // const increaseLikes = () => { // setLikesCount(likesCount + 1); @@ -26,7 +26,7 @@ const ChatEntry = (props) => { // setLiked(!isLiked); // }; - const heartType = props.isLiked ? '❤️' : '🤍'; + const heartType = props.liked ? '❤️' : '🤍'; // const chatData = [ // { @@ -43,7 +43,7 @@ const ChatEntry = (props) => {

{props.body}

{props.timeStamp}

-
@@ -56,8 +56,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - isLiked: PropTypes.bool, - onUpdate: PropTypes.func.isRequired, + liked: PropTypes.bool, + onUpdateChat: PropTypes.func, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index b965ab91f..c5c583f98 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -13,8 +13,9 @@ const ChatLog = (props) => { sender={chat.sender} body={chat.body} timeStamp={chat.timeStamp} - isLiked={chat.isLiked} - onUpdate={props.onUpdateChat} + liked={chat.liked} + onUpdateChat={props.onUpdateChat} + key={chat.id} /> ))} @@ -29,7 +30,7 @@ ChatLog.propTypes = { id: PropTypes.number.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - isLiked: PropTypes.bool, + liked: PropTypes.bool, }) ), onUpdateChat: PropTypes.func.isRequired, From 4a1420ddb8c50272714471807c54bc6a4793b598 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 21:05:19 -0800 Subject: [PATCH 08/10] implemented function to find the total number of likes/hearts --- src/App.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 284228e74..739311c59 100644 --- a/src/App.js +++ b/src/App.js @@ -20,6 +20,22 @@ const App = () => { ); }; + const findTotalHearts = (chatData) => { + let total = 0; + for (const element of chatData) { + if (element.liked === true) { + total += 1; + } + } + return total; + }; + + const allHearts = findTotalHearts(chatData); + + // let totalHearts = 0; + // chatData.forEach(chat => { + // if {chat["liked"] === 'true"'} + // const heartMessage = () => { // setLiked(!isLiked); // }; @@ -28,7 +44,7 @@ const App = () => { return (
-
Number of Likes:
+
Number of Likes:{allHearts}
{/* Wave 01: Render one ChatEntry component From 850fd044c5f915a000075e6c58cb46e5af22e668 Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 21:12:16 -0800 Subject: [PATCH 09/10] update app component header in order to pass test --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 739311c59..1b27e7a71 100644 --- a/src/App.js +++ b/src/App.js @@ -44,7 +44,7 @@ const App = () => { return (
-
Number of Likes:{allHearts}
+
{allHearts} ❤️s
{/* Wave 01: Render one ChatEntry component From 14cd5dc09d93abd154e838513c561abd226c3aca Mon Sep 17 00:00:00 2001 From: Jacqueline Hopkins <318jlh@gmail.com> Date: Fri, 23 Dec 2022 21:16:12 -0800 Subject: [PATCH 10/10] clean up code --- src/App.js | 13 ------------- src/components/ChatEntry.js | 32 -------------------------------- 2 files changed, 45 deletions(-) diff --git a/src/App.js b/src/App.js index 1b27e7a71..1b00563f5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,5 @@ import React from 'react'; import './App.css'; -import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; import { useState } from 'react'; @@ -32,23 +31,11 @@ const App = () => { const allHearts = findTotalHearts(chatData); - // let totalHearts = 0; - // chatData.forEach(chat => { - // if {chat["liked"] === 'true"'} - - // const heartMessage = () => { - // setLiked(!isLiked); - // }; - - // const heartType = isLiked ? '❤️' : '🤍'; - return (
{allHearts} ❤️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 9edacff8b..34d94eeb5 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,42 +1,10 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import TimeStamp from './TimeStamp'; -import { useState } from 'react'; const ChatEntry = (props) => { - // const onClickHeartButton = () => { - // const updatedChat = { - // id: props.id, - // sender: props.sender, - // body: props.body, - // isLiked: !props.isLiked, - // timeStamp: props.timeStamp, - // }; - // props.onUpdateChat(updatedChat); - // }; - // const [likesCount, setLikesCount] = useState(0); - // const increaseLikes = () => { - // setLikesCount(likesCount + 1); - // }; - - // const [isLiked, setLiked] = useState(false); - - // const heartMessage = () => { - // setLiked(!isLiked); - // }; - const heartType = props.liked ? '❤️' : '🤍'; - // const chatData = [ - // { - // id: 1, - // sender: 'Vladimir', - // body: 'why are you arguing with me', - // timeStamp: '2018-05-29T22:49:06+00:00', - // liked: false, - // }, - // ]; return (

{props.sender}