From c9375fc0ba499eedc1ac9e69c65a172c8a727d8c Mon Sep 17 00:00:00 2001 From: Jodi Denney Date: Mon, 20 Jun 2022 11:51:12 -0700 Subject: [PATCH 1/3] Passed Wave 1 and 2 --- src/App.js | 7 ++--- src/components/ChatEntry.js | 16 +++++++---- src/components/ChatEntry.test.js | 18 ++++++------ src/components/ChatLog.js | 27 ++++++++++++++++++ src/components/ChatLog.test.js | 48 ++++++++++++++++---------------- 5 files changed, 73 insertions(+), 43 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..c72c0d794 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,15 @@ -import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; const App = () => { return (
-

Application title

+

Chat between Vladimir and Estragon

- {/* 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..9a112464c 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 = (props) => { +const ChatEntry = (entry) => { return (
-

Replace with name of sender

+

{entry.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{entry.body}

+

+ +

@@ -16,7 +18,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/ChatEntry.test.js b/src/components/ChatEntry.test.js index b69270c03..69b65ecce 100644 --- a/src/components/ChatEntry.test.js +++ b/src/components/ChatEntry.test.js @@ -1,28 +1,28 @@ -import React from "react"; -import "@testing-library/jest-dom/extend-expect"; -import ChatEntry from "./ChatEntry"; -import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import ChatEntry from './ChatEntry'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; -describe("Wave 01: ChatEntry", () => { +describe('Wave 01: ChatEntry', () => { beforeEach(() => { render( ); }); - test("renders without crashing and shows the sender", () => { + test('renders without crashing and shows the sender', () => { expect(screen.getByText(/Joe Biden/)).toBeInTheDocument(); }); - test("that it will display the body", () => { + test('that it will display the body', () => { expect(screen.getByText(/Get out by 8am/)).toBeInTheDocument(); }); - test("that it will display the time", () => { + test('that it will display the time', () => { expect(screen.getByText(/\d+ years ago/)).toBeInTheDocument(); }); }); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..61330fbac --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,27 @@ +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + +const ChatLog = (props) => { + const chatComponents = props.entries.map((message) => { + return ( +
  • + +
    • + ); + }); + + return ; +}; + +// ChatLog.propTypes = { +// messages: PropTypes., +// }; + +export default ChatLog; diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc3..5bafee291 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -1,49 +1,49 @@ -import React from "react"; -import "@testing-library/jest-dom/extend-expect"; -import ChatLog from "./ChatLog"; -import { render, screen } from "@testing-library/react"; +import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import ChatLog from './ChatLog'; +import { render, screen } from '@testing-library/react'; const LOG = [ { - sender: "Vladimir", - body: "why are you arguing with me", - timeStamp: "2018-05-29T22:49:06+00:00", + sender: 'Vladimir', + body: 'why are you arguing with me', + timeStamp: '2018-05-29T22:49:06+00:00', }, { - sender: "Estragon", - body: "Because you are wrong.", - timeStamp: "2018-05-29T22:49:33+00:00", + sender: 'Estragon', + body: 'Because you are wrong.', + timeStamp: '2018-05-29T22:49:33+00:00', }, { - sender: "Vladimir", - body: "because I am what", - timeStamp: "2018-05-29T22:50:22+00:00", + sender: 'Vladimir', + body: 'because I am what', + timeStamp: '2018-05-29T22:50:22+00:00', }, { - sender: "Estragon", - body: "A robot.", - timeStamp: "2018-05-29T22:52:21+00:00", + sender: 'Estragon', + body: 'A robot.', + timeStamp: '2018-05-29T22:52:21+00:00', }, { - sender: "Vladimir", - body: "Notabot", - timeStamp: "2019-07-23T22:52:21+00:00", + sender: 'Vladimir', + body: 'Notabot', + timeStamp: '2019-07-23T22:52:21+00:00', }, ]; -describe("Wave 02: ChatLog", () => { +describe('Wave 02: ChatLog', () => { beforeEach(() => { render(); }); - test("renders without crashing and shows all the names", () => { + test('renders without crashing and shows all the names', () => { [ { - name: "Vladimir", + name: 'Vladimir', numChats: 3, }, { - name: "Estragon", + name: 'Estragon', numChats: 2, }, ].forEach((person) => { @@ -56,7 +56,7 @@ describe("Wave 02: ChatLog", () => { }); }); - test("renders an empty list without crashing", () => { + test('renders an empty list without crashing', () => { const element = render(); expect(element).not.toBeNull(); }); From 3f48e8a3d468d2b9ebe59bca41931a882366bb8a Mon Sep 17 00:00:00 2001 From: Jodi Denney Date: Mon, 20 Jun 2022 14:50:41 -0700 Subject: [PATCH 2/3] Added like button and like count. still failing one test --- src/App.js | 32 +++++++++++++++++++- src/App.test.js | 60 ++++++++++++++++++------------------- src/components/ChatEntry.js | 17 +++++++---- src/components/ChatLog.js | 4 ++- 4 files changed, 76 insertions(+), 37 deletions(-) diff --git a/src/App.js b/src/App.js index c72c0d794..c3c64e831 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,45 @@ import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; +import { useState } from 'react'; const App = () => { + const [entries, setEntries] = useState(chatMessages); + const [likes, setLikes] = useState(0); + + const toggleHeart = (id) => { + let currentLikes = 0; + for (const entry of entries) { + if (entry.id === id) { + entry.liked = !entry.liked; + } + if (entry.liked === true) { + currentLikes += 1; + } + } + const newEntries = [...entries]; + setEntries(newEntries); + setLikes(currentLikes); + }; + + // const countLikes = () => { + // let currentLikes = 0; + // for (const entry of entries) { + // if (entry.liked === true) { + // currentLikes += 1; + // } + // } + // setLikes(currentLikes); + // }; + return (

    Chat between Vladimir and Estragon

    +

    {likes} ❤️s

    - +
    ); diff --git a/src/App.test.js b/src/App.test.js index ca75c71dd..878148902 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[0]; + 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 9a112464c..89a5f752f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,25 +2,32 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = (entry) => { +const ChatEntry = (props) => { + const toggleHeart = () => { + props.toggleHeartCallback(props.id); + }; return (
    -

    {entry.sender}

    +

    {props.sender}

    -

    {entry.body}

    +

    {props.body}

    - +

    - +
    ); }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 61330fbac..f072cd521 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -12,6 +12,8 @@ const ChatLog = (props) => { sender={message.sender} body={message.body} timeStamp={message.timeStamp} + liked={message.liked} + toggleHeartCallback={props.toggleHeartCallback} /> ); @@ -21,7 +23,7 @@ const ChatLog = (props) => { }; // ChatLog.propTypes = { -// messages: PropTypes., +// entries: PropTypes.array.isRequired, // }; export default ChatLog; From 1be88acc9505fa1d2041c79654ec8223f910a376 Mon Sep 17 00:00:00 2001 From: Jodi Denney Date: Tue, 21 Jun 2022 11:05:35 -0700 Subject: [PATCH 3/3] Fixed shallow copy bug --- src/App.js | 25 ++++++++----------------- src/components/ChatLog.js | 9 ++++----- src/index.js | 1 - 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index c3c64e831..7a0865f06 100644 --- a/src/App.js +++ b/src/App.js @@ -9,29 +9,20 @@ const App = () => { const toggleHeart = (id) => { let currentLikes = 0; - for (const entry of entries) { - if (entry.id === id) { - entry.liked = !entry.liked; + const newEntries = entries.map((entry) => { + const newEntry = { ...entry }; + if (newEntry.id === id) { + newEntry.liked = !newEntry.liked; } - if (entry.liked === true) { + if (newEntry.liked === true) { currentLikes += 1; } - } - const newEntries = [...entries]; + return newEntry; + }); setEntries(newEntries); setLikes(currentLikes); }; - // const countLikes = () => { - // let currentLikes = 0; - // for (const entry of entries) { - // if (entry.liked === true) { - // currentLikes += 1; - // } - // } - // setLikes(currentLikes); - // }; - return (
    @@ -39,7 +30,7 @@ const App = () => {

    {likes} ❤️s

    - +
    ); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index f072cd521..4ad0df13a 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,9 +5,8 @@ import PropTypes from 'prop-types'; const ChatLog = (props) => { const chatComponents = props.entries.map((message) => { return ( -
  • +
  • { return
      {chatComponents}
    ; }; -// ChatLog.propTypes = { -// entries: PropTypes.array.isRequired, -// }; +ChatLog.propTypes = { + entries: PropTypes.array.isRequired, +}; export default ChatLog; diff --git a/src/index.js b/src/index.js index fae3e3500..68b3f6e9f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,3 @@ -import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App';