From 34634f29b46b2010c54e156e2f978caf65e1c244 Mon Sep 17 00:00:00 2001 From: galinaramaniuk Date: Thu, 22 Dec 2022 03:02:20 +0300 Subject: [PATCH 1/4] ChatEnty component is implemented. Tests passed' --- .vscode/settings.json | 3 +++ src/App.js | 6 ++++++ src/components/ChatEntry.js | 12 +++++++++--- src/components/ChatLog.js | 5 +++++ 4 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/components/ChatLog.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index c10859093..992a24f64 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 = () => { @@ -11,6 +12,11 @@ const App = () => {
{/* 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..1767b7149 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) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ +

@@ -17,6 +20,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..55a866b4c --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,5 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; + +const ChatLog = (props) => {}; From 67b66104ac665fcac664bb67e1e55419d9cb676f Mon Sep 17 00:00:00 2001 From: galinaramaniuk Date: Thu, 22 Dec 2022 20:19:13 +0300 Subject: [PATCH 2/4] Added ChatLog component. Tests passed for Wave2 --- src/App.js | 10 +++++++--- src/components/ChatEntry.js | 2 ++ src/components/ChatLog.js | 32 +++++++++++++++++++++++++++++++- 3 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 992a24f64..66a5a7ec0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,12 @@ 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'; +import { useState } from 'react'; const App = () => { + const [messageData, setMessageData] = useState(chatMessages); return (
@@ -12,11 +15,12 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - + /> */} +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 1767b7149..ebef08b6f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -20,9 +20,11 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 55a866b4c..bf94eb857 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,5 +1,35 @@ import React from 'react'; import './ChatLog.css'; import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; -const ChatLog = (props) => {}; +const ChatLog = (props) => { + return ( + + ); +}; + +ChatLog.propTypes = { + //Fill with correct 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, + }) + ), +}; + +export default ChatLog; From edc52fc6aabc2ba05de480ac322561749317392a Mon Sep 17 00:00:00 2001 From: galinaramaniuk Date: Thu, 22 Dec 2022 22:56:29 +0300 Subject: [PATCH 3/4] Heart button is clickable --- src/App.js | 30 ++++++++++++++++++++---------- src/components/ChatEntry.js | 6 ++++-- src/components/ChatLog.js | 3 ++- 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 66a5a7ec0..1614d39c1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,36 @@ 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'; const App = () => { - const [messageData, setMessageData] = useState(chatMessages); + const [chatData, setChatData] = useState(chatMessages); + + const toggleLikeButton = (id) => { + setChatData((chatData) => + chatData.map((chat) => { + if (chat.id === id) { + return { ...chat, liked: !chat.liked }; + } else { + return chat; + } + }) + ); + }; + + // const calcTotalLikes = ( chatData ) => { + // return + // } + return (

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 ebef08b6f..bfe9c563a 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + const heartIcon = props.liked ? '❤️' : '🤍'; return (

{props.sender}

@@ -12,14 +13,15 @@ const ChatEntry = (props) => {

- +
); }; ChatEntry.propTypes = { - //Fill with correct proptypes id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index bf94eb857..4794689e3 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -13,6 +13,7 @@ const ChatLog = (props) => { body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} + onToggleLiked={props.onToggleLiked} /> ))} @@ -20,7 +21,6 @@ const ChatLog = (props) => { }; ChatLog.propTypes = { - //Fill with correct proptypes entries: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.number.isRequired, @@ -30,6 +30,7 @@ ChatLog.propTypes = { liked: PropTypes.bool.isRequired, }) ), + onToggleLiked: PropTypes.func.isRequired, }; export default ChatLog; From c2af9437ab3fa0c582528ae859388b79fc325526 Mon Sep 17 00:00:00 2001 From: galinaramaniuk Date: Fri, 23 Dec 2022 01:47:18 +0300 Subject: [PATCH 4/4] Likes are counted and displayed --- src/App.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 1614d39c1..7946d03d1 100644 --- a/src/App.js +++ b/src/App.js @@ -19,15 +19,19 @@ const App = () => { ); }; - // const calcTotalLikes = ( chatData ) => { - // return - // } + const calcTotalLikes = (chatData) => { + return chatData.reduce((total, current) => { + return total + current.liked; + }, 0); + }; + + const displayTotalLiked = calcTotalLikes(chatData); return (

Application title

- {/*

*/} +

{displayTotalLiked} ❤️s