From 209345cd5bd76a61e5b2fafc71e0db2f7d9a89bf Mon Sep 17 00:00:00 2001 From: Jamie H Date: Tue, 28 Jun 2022 00:01:17 -0400 Subject: [PATCH 1/2] Added state tracking for hearts --- src/App.js | 29 +++++++++++++++-- src/App.test.js | 60 ++++++++++++++++++------------------ src/components/ChatEntry.js | 23 +++++++++++--- src/components/ChatLog.js | 35 +++++++++++++++++++++ src/components/HeartCount.js | 6 ++++ 5 files changed, 115 insertions(+), 38 deletions(-) create mode 100644 src/components/ChatLog.js create mode 100644 src/components/HeartCount.js diff --git a/src/App.js b/src/App.js index c1085909..22b6da74 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,39 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog.js'; +import HeartCount from './components/HeartCount.js'; const App = () => { + const [heart, setHeart] = useState(chatMessages); + + const toggleHeart = (id) => { + // count = 0; + console.log({ id }); + const newHeartCount = heart.map((message) => { + if (message.id === id) { + message.liked = !message.liked; + } + return message; + }); + setHeart(newHeartCount); + }; + return (

Application title

+

{HeartCount(heart)}

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + { + /* Wave 01: Render one ChatEntry component + Wave 02: Render ChatLog component */ + + }
); diff --git a/src/App.test.js b/src/App.test.js index ca75c71d..1009f0c0 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,53 +1,53 @@ -import React from 'react' -import App from './App' -import { render, screen, fireEvent } from '@testing-library/react' +import React from 'react'; +import App from './App'; +import { render, screen, fireEvent } from '@testing-library/react'; describe('Wave 03: clicking like button and rendering App', () => { test('that the correct number of likes is printed at the top', () => { // Arrange - const { container } = render() - let buttons = container.querySelectorAll('button.like') + const { container } = render(); + let buttons = container.querySelectorAll('button.like'); // Act - fireEvent.click(buttons[0]) - fireEvent.click(buttons[1]) - fireEvent.click(buttons[10]) + fireEvent.click(buttons[0]); + fireEvent.click(buttons[1]); + fireEvent.click(buttons[10]); // Assert - const countScreen = screen.getByText(/3 ❤️s/) - expect(countScreen).not.toBeNull() - }) + const countScreen = screen.getByText(/3 ❤️s/); + expect(countScreen).not.toBeNull(); + }); test('clicking button toggles heart and does not affect other buttons', () => { // Arrange - const { container } = render() - const buttons = container.querySelectorAll('button.like') - const firstButton = buttons[0] - const lastButton = buttons[buttons.length - 1] + const { container } = render(); + const buttons = container.querySelectorAll('button.like'); + const firstButton = buttons[1]; + const lastButton = buttons[buttons.length - 1]; // Act-Assert // click the first button - fireEvent.click(firstButton) - expect(firstButton.innerHTML).toEqual('❤️') + fireEvent.click(firstButton); + expect(firstButton.innerHTML).toEqual('❤️'); // check that all other buttons haven't changed for (let i = 1; i < buttons.length; i++) { - expect(buttons[i].innerHTML).toEqual('🤍') + expect(buttons[i].innerHTML).toEqual('🤍'); } // click the first button a few more times - fireEvent.click(firstButton) - expect(firstButton.innerHTML).toEqual('🤍') - fireEvent.click(firstButton) - expect(firstButton.innerHTML).toEqual('❤️') - fireEvent.click(firstButton) - expect(firstButton.innerHTML).toEqual('🤍') + fireEvent.click(firstButton); + expect(firstButton.innerHTML).toEqual('🤍'); + fireEvent.click(firstButton); + expect(firstButton.innerHTML).toEqual('❤️'); + fireEvent.click(firstButton); + expect(firstButton.innerHTML).toEqual('🤍'); // click the last button a couple times - fireEvent.click(lastButton) - expect(lastButton.innerHTML).toEqual('❤️') - fireEvent.click(lastButton) - expect(lastButton.innerHTML).toEqual('🤍') - }) -}) + fireEvent.click(lastButton); + expect(lastButton.innerHTML).toEqual('❤️'); + fireEvent.click(lastButton); + expect(lastButton.innerHTML).toEqual('🤍'); + }); +}); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b..a4a7dea5 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,35 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

+ +

+
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, + toggleHeartCallback: PropTypes.func, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 00000000..2b22844a --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,35 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry.js'; + +const ChatLog = (props) => { + const chitChats = props.entries.map((message, index) => { + return ( + + ); + }); + return
{chitChats}
; +}; + +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, + toggleHeartCallback: PropTypes.func, +}; +export default ChatLog; diff --git a/src/components/HeartCount.js b/src/components/HeartCount.js new file mode 100644 index 00000000..373a5464 --- /dev/null +++ b/src/components/HeartCount.js @@ -0,0 +1,6 @@ +const HeartCount = (messages) => { + let count = 0; + messages.forEach((m) => (m.liked ? count++ : m)); + return
{count} ❤️s
; +}; +export default HeartCount; From cfd5b89ba0369fe84512b3e1c26e91127ae2b055 Mon Sep 17 00:00:00 2001 From: Jamie H Date: Tue, 28 Jun 2022 11:58:17 -0400 Subject: [PATCH 2/2] updated prop pass from message to state --- src/App.js | 7 ++----- src/App.test.js | 2 +- src/components/ChatEntry.js | 14 ++++++++------ 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 22b6da74..a4624b09 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,7 @@ const App = () => { console.log({ id }); const newHeartCount = heart.map((message) => { if (message.id === id) { - message.liked = !message.liked; + return { ...message, liked: !message.liked }; } return message; }); @@ -29,10 +29,7 @@ const App = () => { { /* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */ - + } diff --git a/src/App.test.js b/src/App.test.js index 1009f0c0..87814890 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -22,7 +22,7 @@ describe('Wave 03: clicking like button and rendering App', () => { // Arrange const { container } = render(); const buttons = container.querySelectorAll('button.like'); - const firstButton = buttons[1]; + const firstButton = buttons[0]; const lastButton = buttons[buttons.length - 1]; // Act-Assert diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index a4a7dea5..7e5b2c4a 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,6 +4,11 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { + const heartType = props.liked ? '❤️' : '🤍'; + const handleToggleHeart = () => { + props.toggleHeartCallback(props.id); + }; + return (

{props.sender}

@@ -12,11 +17,8 @@ const ChatEntry = (props) => {

-
@@ -29,7 +31,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - toggleHeartCallback: PropTypes.func, + toggleHeartCallback: PropTypes.func.isRequired, }; export default ChatEntry;