diff --git a/src/App.js b/src/App.js index c10859093..661f8c6ce 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,38 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog.js'; const App = () => { + const [chatData, setChatData] = useState(chatMessages); + + const updateChatData = (id) => { + setChatData((chatData) => + chatData.map((entry) => { + if (entry.id === id) { + return { ...entry, liked: !entry.liked }; + } else { + return entry; + } + }) + ); + }; + + const likeCounts = chatData.reduce((a, obj) => (obj.liked ? a + 1 : a), 0); + return (

Application title

+

{`${likeCounts} ❤️'s`}

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + { + + }
); diff --git a/src/App.test.js b/src/App.test.js index ca75c71dd..e0daa4fd4 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.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 b92f0b7b2..51d19a520 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,53 @@ -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -const ChatEntry = (props) => { +//chatMessages.reduce((a, obj) => { +//return a + obj.liked; +//}, 0), + +const timeDifference = (posted) => { + const difference = new Date( + new Date().getTime() - new Date('2018-05-18T22:12:03Z').getTime() + ); + if (difference.getFullYear() - 1970) { + return `${difference.getFullYear() - 1970} years ago`; + } + return difference.getMonth() - 1 + ? `${difference.getMonth() - 1} months ago` + : `${difference.getDate() - 1} days ago`; +}; + +const ChatEntry = ({ id, sender, body, timeStamp, liked, updateChatData }) => { + const [isLiked, setLikes] = useState(liked); + const likedOrNot = isLiked ? '❤️' : '🤍'; return (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

{timeDifference(timeStamp)}

+
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + updateChatData: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js index b69270c03..4a9a2b09f 100644 --- a/src/components/ChatEntry.test.js +++ b/src/components/ChatEntry.test.js @@ -1,9 +1,9 @@ -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..cefbac375 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,41 @@ +import React from 'react'; +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + +const mapChats = (entries, updateChatData) => { + return entries.map((entry) => { + return ( + + ); + }); +}; + +const ChatLog = ({ entries, updateChatData }) => { + return ( +
{mapChats(entries, updateChatData)}
+ ); +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + timeStamp: PropTypes.string.isRequired, + }) + ), + updateChatData: PropTypes.func.isRequired, +}; + +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(); }); diff --git a/src/components/likeCount.js b/src/components/likeCount.js new file mode 100644 index 000000000..384e0929c --- /dev/null +++ b/src/components/likeCount.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const likeCount = { + likes: 0, +}; + +export default likeCount;