From 95a698a9090ffabbebb546d005dc9a26e7ed857b Mon Sep 17 00:00:00 2001 From: kelly Date: Fri, 27 Jan 2023 10:13:17 -0800 Subject: [PATCH 01/12] Passes Wave 01 Tests --- src/App.js | 16 +++++++++++++--- src/components/ChatEntry.js | 8 +++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..c16ab3d58 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,9 @@ import React from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry.js'; +import messageData from './data/messages.json'; + +const entry = messageData[0] const App = () => { return ( @@ -9,8 +12,15 @@ 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..2f76e8563 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 messageData from '../data/messages.json'; +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}

+

{}

From 054f244a33e5ab716ea9e088662b571d6441d5fc Mon Sep 17 00:00:00 2001 From: kelly Date: Fri, 27 Jan 2023 10:27:04 -0800 Subject: [PATCH 02/12] Passes Wave 01 Tests - updated App.js --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index c16ab3d58..44f6d44a5 100644 --- a/src/App.js +++ b/src/App.js @@ -17,7 +17,7 @@ const App = () => { } From 45900e37e916779223f4b61146e5e4761baf76b2 Mon Sep 17 00:00:00 2001 From: kelly Date: Fri, 27 Jan 2023 19:00:52 -0800 Subject: [PATCH 03/12] Passes Wave 02 Tests --- src/App.js | 8 ++------ src/components/ChatEntry.js | 6 +++++- src/components/ChatLog.js | 30 ++++++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 44f6d44a5..79b088cd3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,8 @@ import React from 'react'; import './App.css'; -import ChatEntry from './components/ChatEntry.js'; +import ChatLog from './components/ChatLog.js'; import messageData from './data/messages.json'; -const entry = messageData[0] const App = () => { return ( @@ -14,10 +13,7 @@ const App = () => {
{ - }
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 2f76e8563..0d450f6ac 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,7 +1,6 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import messageData from '../data/messages.json'; import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { @@ -19,6 +18,11 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes + id: PropTypes.number, + 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 new file mode 100644 index 000000000..82d579b80 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,30 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry.js'; + +const ChatLog = (props) => { + const entries = props.entries.map((entry, index) => { + return ( + ); + }); + return( +
+ {entries} +
+ ); + +}; + +ChatLog.propTypes = { + //Fill with correct proptypes + entries: PropTypes.array.isRequired, +}; + +export default ChatLog; From 7ec84bef11b273c46305bac4a71f7c2da259bf32 Mon Sep 17 00:00:00 2001 From: kelly Date: Sun, 29 Jan 2023 07:15:37 -0800 Subject: [PATCH 04/12] Passes Wave 03 Tests --- src/App.js | 46 ++++++++++++++++++++++++++++-- src/components/ChatEntry.js | 20 +++++++++++-- src/components/ChatEntry.test.js | 16 +++++------ src/components/ChatLog.js | 1 + src/components/ChatLog.test.js | 48 ++++++++++++++++---------------- src/components/HeartInfo.js | 19 +++++++++++++ 6 files changed, 114 insertions(+), 36 deletions(-) create mode 100644 src/components/HeartInfo.js diff --git a/src/App.js b/src/App.js index 79b088cd3..58cdb0456 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,59 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import ChatLog from './components/ChatLog.js'; +import HeartInfo from './components/HeartInfo.js'; import messageData from './data/messages.json'; const App = () => { + + const [chatEntryData, setChatEntryData] = useState(messageData); + const [likesCount, setLikesCount] = useState(0); + + const updateChatEntryData = updatedChatEntry => { + const entries = chatEntryData.map(entry => { + if (entry.id === updatedChatEntry.id) { + return updatedChatEntry; + } else { + return entry; + } + }); + const updatedLikesCount = () => { + let newLikesCount = 0; + for (const entry of entries) { + if (entry.liked === true) { + newLikesCount += 1; + } + } + return newLikesCount; + } + + setChatEntryData(entries); + + setLikesCount(updatedLikesCount); + + }; + return (

Application title

+
+ { + } +
+
{ - }
@@ -22,4 +62,6 @@ const App = () => { ); }; + + export default App; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 0d450f6ac..c0dd35e01 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,13 +4,28 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { + + const onLikeButtonClick = () => { + const updatedChatEntry = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + + props.onUpdate(updatedChatEntry); + }; + + const heartColor = props.liked ? '❤️' : '🤍'; + return (

{props.sender}

{props.body}

{}

- +
); @@ -22,7 +37,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool + liked: PropTypes.bool, + onUpdate: 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 index 82d579b80..89b190417 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -12,6 +12,7 @@ const ChatLog = (props) => { body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} + onUpdate={props.onUpdateChatEntry} />); }); return( 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/HeartInfo.js b/src/components/HeartInfo.js new file mode 100644 index 000000000..094caf7b1 --- /dev/null +++ b/src/components/HeartInfo.js @@ -0,0 +1,19 @@ +import React from 'react'; +import '../App.css'; +import PropTypes from 'prop-types'; + +const HeartInfo = (props) => { + return ( +
+ + {props.likesCount} ❤️s + +
+ ); +}; + +HeartInfo.propTypes = { + likeCount: PropTypes.number +}; + +export default HeartInfo; \ No newline at end of file From bcc4d75538e3cfcbc344aa1d5dcaa54b4bd6f4a5 Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 15:46:02 -0800 Subject: [PATCH 05/12] Cleaned up files --- src/App.js | 6 +----- src/components/ChatEntry.js | 2 -- src/components/ChatLog.js | 1 - 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 58cdb0456..207eaa527 100644 --- a/src/App.js +++ b/src/App.js @@ -29,7 +29,6 @@ const App = () => { } setChatEntryData(entries); - setLikesCount(updatedLikesCount); }; @@ -40,8 +39,8 @@ const App = () => {

Application title

{ }
@@ -53,7 +52,6 @@ const App = () => { } @@ -62,6 +60,4 @@ const App = () => { ); }; - - export default App; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index c0dd35e01..6450e86b2 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -13,7 +13,6 @@ const ChatEntry = (props) => { timeStamp: props.timeStamp, liked: !props.liked, }; - props.onUpdate(updatedChatEntry); }; @@ -32,7 +31,6 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes id: PropTypes.number, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 89b190417..fe40bf1e6 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -24,7 +24,6 @@ const ChatLog = (props) => { }; ChatLog.propTypes = { - //Fill with correct proptypes entries: PropTypes.array.isRequired, }; From 52e473e418696786abfd7ed783fc9c869cdac001 Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 16:29:59 -0800 Subject: [PATCH 06/12] Updated PropTypes and changed application title --- src/App.js | 2 +- src/components/ChatLog.js | 10 +++++++++- src/components/HeartInfo.js | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 207eaa527..02de758d9 100644 --- a/src/App.js +++ b/src/App.js @@ -36,7 +36,7 @@ const App = () => { return (
-

Application title

+

Chat between Vladimir and Estragon

{ { }; ChatLog.propTypes = { - entries: PropTypes.array.isRequired, + entries: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.number, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, + })), + onUpdate: PropTypes.func.isRequired }; + export default ChatLog; diff --git a/src/components/HeartInfo.js b/src/components/HeartInfo.js index 094caf7b1..2cdd352ae 100644 --- a/src/components/HeartInfo.js +++ b/src/components/HeartInfo.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; const HeartInfo = (props) => { return (
- + {props.likesCount} ❤️s
From 3ba2ac9e1476ef42862c5892d7a77f22a959e388 Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 16:38:32 -0800 Subject: [PATCH 07/12] Updated PropTypes --- src/components/ChatLog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index d57602e3a..10b98cfd3 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -31,7 +31,7 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, })), - onUpdate: PropTypes.func.isRequired + onUpdateChatEntry: PropTypes.func.isRequired }; From c6afce953d49bb1cfe1d2c16a199751a1a86cec8 Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 17:12:54 -0800 Subject: [PATCH 08/12] Updated PropTypes --- src/components/ChatLog.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 10b98cfd3..8175c114d 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -6,7 +6,8 @@ import ChatEntry from './ChatEntry.js'; const ChatLog = (props) => { const entries = props.entries.map((entry, index) => { return ( - Date: Wed, 1 Feb 2023 17:16:34 -0800 Subject: [PATCH 09/12] Updated onUpdate function and PropTypes --- src/components/ChatEntry.js | 4 ++-- src/components/ChatLog.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6450e86b2..b28f854d6 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -13,7 +13,7 @@ const ChatEntry = (props) => { timeStamp: props.timeStamp, liked: !props.liked, }; - props.onUpdate(updatedChatEntry); + props.onUpdateChatEntry(updatedChatEntry); }; const heartColor = props.liked ? '❤️' : '🤍'; @@ -36,7 +36,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - onUpdate: PropTypes.func.isRequired + onUpdateChatEntry: PropTypes.func.isRequired }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 8175c114d..a294e8ab7 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -13,7 +13,7 @@ const ChatLog = (props) => { body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} - onUpdate={props.onUpdateChatEntry} + onUpdateChatEntry={props.onUpdateChatEntry} />); }); return( @@ -31,8 +31,8 @@ ChatLog.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - })), - onUpdate: PropTypes.func.isRequired + })).isRequired, + onUpdateChatEntry: PropTypes.func.isRequired }; From 3e950aa150adc1966bbd5d7ce5e3ca1ca8372481 Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 17:27:08 -0800 Subject: [PATCH 10/12] Renamed onUpdate --- src/App.js | 4 ++-- src/components/ChatEntry.js | 4 ++-- src/components/ChatLog.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 02de758d9..4ae190530 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,7 @@ const App = () => {
{ }
@@ -51,7 +51,7 @@ const App = () => { { }
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b28f854d6..6450e86b2 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -13,7 +13,7 @@ const ChatEntry = (props) => { timeStamp: props.timeStamp, liked: !props.liked, }; - props.onUpdateChatEntry(updatedChatEntry); + props.onUpdate(updatedChatEntry); }; const heartColor = props.liked ? '❤️' : '🤍'; @@ -36,7 +36,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - onUpdateChatEntry: PropTypes.func.isRequired + onUpdate: PropTypes.func.isRequired }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a294e8ab7..0bcfcee42 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -13,7 +13,7 @@ const ChatLog = (props) => { body={entry.body} timeStamp={entry.timeStamp} liked={entry.liked} - onUpdateChatEntry={props.onUpdateChatEntry} + onUpdate={props.onUpdate} />); }); return( @@ -32,7 +32,7 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, })).isRequired, - onUpdateChatEntry: PropTypes.func.isRequired + onUpdate: PropTypes.func.isRequired }; From 308ce2dc7fc74f27f12aa9240ab5765cbf052597 Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 17:44:10 -0800 Subject: [PATCH 11/12] Renamed onUpdate props --- src/App.js | 4 ++-- src/components/ChatLog.js | 8 ++++---- src/components/HeartInfo.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 4ae190530..2b76981d5 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,7 @@ const App = () => {
{ }
@@ -51,7 +51,7 @@ const App = () => { { } diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 0bcfcee42..3b0821ae5 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,16 +4,16 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry.js'; const ChatLog = (props) => { - const entries = props.entries.map((entry, index) => { + const entries = props.entries.map((entry) => { return ( ); }); return( @@ -32,7 +32,7 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, })).isRequired, - onUpdate: PropTypes.func.isRequired + onUpdateEntry: PropTypes.func.isRequired }; diff --git a/src/components/HeartInfo.js b/src/components/HeartInfo.js index 2cdd352ae..974057938 100644 --- a/src/components/HeartInfo.js +++ b/src/components/HeartInfo.js @@ -13,7 +13,7 @@ const HeartInfo = (props) => { }; HeartInfo.propTypes = { - likeCount: PropTypes.number + likesCount: PropTypes.number }; export default HeartInfo; \ No newline at end of file From 93256ca3e1b756348b79d8d71f030b365df9db9f Mon Sep 17 00:00:00 2001 From: kelly Date: Wed, 1 Feb 2023 17:57:15 -0800 Subject: [PATCH 12/12] Changed propTypes. --- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 25 +++++++++++++------------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6450e86b2..d6d6d5d08 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -36,7 +36,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - onUpdate: PropTypes.func.isRequired + onUpdate: PropTypes.func }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 3b0821ae5..37828c596 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,17 +4,18 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry.js'; const ChatLog = (props) => { - const entries = props.entries.map((entry) => { + const entries = props.entries.map((entry, index) => { return ( - ); + + ); }); return(
@@ -31,8 +32,8 @@ ChatLog.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, - })).isRequired, - onUpdateEntry: PropTypes.func.isRequired + })), + onUpdateEntry: PropTypes.func };