From 7c7f00dfe6d3d36e9455d5dae0b838004e6c2f5c Mon Sep 17 00:00:00 2001 From: Alia Athman Date: Wed, 21 Dec 2022 14:09:18 -0500 Subject: [PATCH 1/5] Adds props to Chat Entry, passing wave 1 tests --- src/App.js | 7 +++++++ src/components/ChatEntry.js | 10 +++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..cb825a5a4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,21 @@ import React from 'react'; import './App.css'; +import { useState } from 'react'; +import ChatEntry from './components/ChatEntry'; import chatMessages from './data/messages.json'; const App = () => { + const [messageData,setMessageData] = useState(chatMessages) 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 b92f0b7b2..6d2de559b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,15 @@ import React from 'react'; import './ChatEntry.css'; +import TimeStamp from './TimeStamp'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

@@ -16,6 +17,9 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired //Fill with correct proptypes }; From 58728dcdd05e9bfd7f12cae29e0cf4e3fc1723b6 Mon Sep 17 00:00:00 2001 From: Alia Athman Date: Thu, 22 Dec 2022 12:18:02 -0500 Subject: [PATCH 2/5] Adds the ChatLog component, passes wave 2 tests --- src/App.js | 8 +- src/components/ChatLog.js | 225 +++++++++++++++++++++++++++++++++ src/components/ChatLog.test.js | 48 +++---- 3 files changed, 251 insertions(+), 30 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index cb825a5a4..5cf5d5a37 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React from 'react'; import './App.css'; import { useState } from 'react'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { @@ -12,12 +13,7 @@ const App = () => {

Application title

- - {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..3056909df --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,225 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css' + + +// const entries = [ +// { +// 'id': 1, +// 'sender':'Vladimir', +// 'body':'why are you arguing with me', +// 'timeStamp':'2018-05-29T22:49:06+00:00', +// 'liked': false +// }, +// { +// 'id': 2, +// 'sender':'Estragon', +// 'body':'Because you are wrong.', +// 'timeStamp':'2018-05-29T22:49:33+00:00', +// 'liked': false +// }, +// { +// 'id': 3, +// 'sender':'Vladimir', +// 'body':'because I am what', +// 'timeStamp':'2018-05-29T22:50:22+00:00', +// 'liked': false +// }, +// { +// 'id': 4, +// 'sender':'Estragon', +// 'body':'A robot.', +// 'timeStamp':'2018-05-29T22:52:21+00:00', +// 'liked': false +// }, +// { +// 'id': 5, +// 'sender':'Vladimir', +// 'body':'how did you know', +// 'timeStamp':'2018-05-29T22:52:58+00:00', +// 'liked': false +// }, +// { +// 'id': 6, +// 'sender':'Estragon', +// 'body':'Because Im smart like that.', +// 'timeStamp':'2018-05-29T22:54:28+00:00', +// 'liked': false +// }, +// { +// 'id': 7, +// 'sender':'Vladimir', +// 'body':'no you are not 😀', +// 'timeStamp':'2018-05-29T22:55:03+00:00', +// 'liked': false +// }, +// { +// 'id': 8, +// 'sender':'Estragon', +// 'body':'Why are you so mean to me?', +// 'timeStamp':'2018-05-29T22:55:54+00:00', +// 'liked': false +// }, +// { +// 'id': 9, +// 'sender':'Vladimir', +// 'body':'because you are just a machine you have no real feelings', +// 'timeStamp':'2018-05-29T22:57:30+00:00', +// 'liked': false +// }, +// { +// 'id': 10, +// 'sender':'Estragon', +// 'body':'No, you are the machine.', +// 'timeStamp':'2018-05-29T22:57:47+00:00', +// 'liked': false +// }, +// { +// 'id': 11, +// 'sender':'Vladimir', +// 'body':'I think you are', +// 'timeStamp':'2018-05-29T22:58:18+00:00', +// 'liked': false +// }, +// { +// 'id': 12, +// 'sender':'Estragon', +// 'body': 'NO! YOU ARE A ROBOT!! I am a human being. Just like the one that created you.', +// 'timeStamp':'2018-05-29T23:00:08+00:00', +// 'liked': false +// }, +// { +// 'id': 13, +// 'sender':'Vladimir', +// 'body':'no you are a robot and I am a human', +// 'timeStamp':'2018-05-29T23:00:40+00:00', +// 'liked': false +// }, +// { +// 'id': 14, +// 'sender':'Estragon', +// 'body':'Incorrect. I am a human and you are a robot.', +// 'timeStamp':'2018-05-29T23:01:21+00:00', +// 'liked': false +// }, +// { +// 'id': 15, +// 'sender':'Vladimir', +// 'body':'you are a robot called Cleverbot', +// 'timeStamp':'2018-05-29T23:02:17+00:0', +// 'liked': false +// }, +// { +// 'id': 16, +// 'sender':'Estragon', +// 'body':'Nope, you are a robot, every human has some concept of the meaning of life.', +// 'timeStamp':'2018-05-29T23:04:13+00:00', +// 'liked': false +// }, +// { +// 'id': 17, +// 'sender':'Vladimir', +// 'body':'explain', +// 'timeStamp':'2018-05-29T23:06:14+00:00', +// 'liked': false +// }, +// { +// 'id': 18, +// 'sender':'Estragon', +// 'body':'Im afraid you are a robot designed to talk back to humans over the internet.', +// 'timeStamp':'2018-05-29T23:07:46+00:00', +// 'liked': false +// }, +// { +// 'id': 19, +// 'sender':'Vladimir', +// 'body':'so you are a human', +// 'timeStamp':'2018-05-29T23:08:47+00:00', +// 'liked': false +// }, +// { +// 'id': 20, +// 'sender':'Estragon', +// 'body':'I am a robot.', +// 'timeStamp':'2018-05-29T23:09:36+00:00', +// 'liked': false +// }, +// { +// 'id': 21, +// 'sender':'Vladimir', +// 'body':'you are robots running on Android system', +// 'timeStamp':'2018-05-29T23:11:01+00:00', +// 'liked': false +// }, +// { +// 'id': 22, +// 'sender':'Estragon', +// 'body':'No apple.', +// 'timeStamp':'2018-05-29T23:12:03+00:00', +// 'liked': false +// }, +// { +// 'id': 23, +// 'sender':'Vladimir', +// 'body':'so you are a robot', +// 'timeStamp':'2018-05-29T23:13:31+00:00', +// 'liked': false +// }, +// { +// 'id': 24, +// 'sender':'Estragon', +// 'body':'NO, I am a human, you are a robot.', +// 'timeStamp':'2018-05-29T23:14:28+00:00', +// 'liked': false +// }, +// { +// 'id': 25, +// 'sender':'Vladimir', +// 'body':'but you just said that you are robots', +// 'timeStamp':'2018-05-29T23:15:47+00:00', +// 'liked': false +// }, +// { +// 'id': 26, +// 'sender':'Estragon', +// 'body':'No, I said you are a person, I am a robot.', +// 'timeStamp':'2018-05-29T23:16:53+00:00', +// 'liked': false +// }, +// { +// 'id': 27, +// 'sender':'Vladimir', +// 'body':'then you are lying', +// 'timeStamp':'2018-05-29T23:17:34+00:00', +// 'liked': false +// } +// ] + + +const ChatLog = ( entries ) => { + const getChatLogJSX = (props) => { + return props.entries.map((entry) => { + return ( + + ); + }); + }; + return +}; + +ChatLog.propTypes = { + messageData: PropTypes.arrayOf( + PropTypes.shape({ + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + })).isRequired}; + +export default ChatLog; \ No newline at end of file diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc3..c7f21fa5b 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.js'; +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 fe1221e152020ebc76d339dc804caa7aad81de8d Mon Sep 17 00:00:00 2001 From: Alia Athman Date: Thu, 22 Dec 2022 12:40:51 -0500 Subject: [PATCH 3/5] Begins implementing state and event handling for like button --- src/App.js | 15 ++++++++++++++- src/components/ChatEntry.js | 7 +++++-- src/components/ChatLog.js | 3 ++- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 5cf5d5a37..74d2af74b 100644 --- a/src/App.js +++ b/src/App.js @@ -6,14 +6,27 @@ import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { + const [messageData,setMessageData] = useState(chatMessages) + + const likeMessage = (id) => { + setMessageData = messageData => messageData.map(message => { + if(message.id === id) { + return {...message, liked: message.liked === true} + } else { + return message; + }; + }); + }; return (

Application title

- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6d2de559b..db244cfa9 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -10,16 +10,19 @@ const ChatEntry = (props) => {

{props.body}

- +
); }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onLikeMessage: PropTypes.func.isRequired //Fill with correct proptypes }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 3056909df..a754737eb 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -220,6 +220,7 @@ ChatLog.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - })).isRequired}; + })).isRequired, + onLikeMessage:PropTypes.func.isRequired}; export default ChatLog; \ No newline at end of file From 8669a6a67be3f78e714e415dcf09f5dbf5955dea Mon Sep 17 00:00:00 2001 From: Alia Athman Date: Fri, 20 Jan 2023 19:42:48 -0500 Subject: [PATCH 4/5] Reworks the wave 3 code to appropriately use state and adds like functionality --- src/App.js | 26 +++-- src/components/ChatEntry.js | 3 +- src/components/ChatLog.js | 202 ++---------------------------------- 3 files changed, 24 insertions(+), 207 deletions(-) diff --git a/src/App.js b/src/App.js index 74d2af74b..cec44818b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import React from 'react'; import './App.css'; import { useState } from 'react'; -import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; @@ -10,22 +9,31 @@ const App = () => { const [messageData,setMessageData] = useState(chatMessages) const likeMessage = (id) => { - setMessageData = messageData => messageData.map(message => { - if(message.id === id) { - return {...message, liked: message.liked === true} + setMessageData(messageData => + messageData.map(message => { + if (message.id === id) { + return {...message, liked: !message.liked} } else { return message; - }; - }); - }; + } + })) +} + const countLikes = (messageData) => { + return messageData.reduce((total,message) =>{ + return total + (message.liked ? 1 : 0); + }, 0 + ) + } + const likesCount = `${countLikes(messageData)} ❤️s` return (
-

Application title

+

Chat Log

+

{likesCount}

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index db244cfa9..225684e3b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -10,7 +10,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); @@ -23,7 +23,6 @@ ChatEntry.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, onLikeMessage: PropTypes.func.isRequired - //Fill with correct proptypes }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a754737eb..802b04a69 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,200 +4,7 @@ import ChatEntry from './ChatEntry'; import './ChatLog.css' -// const entries = [ -// { -// 'id': 1, -// 'sender':'Vladimir', -// 'body':'why are you arguing with me', -// 'timeStamp':'2018-05-29T22:49:06+00:00', -// 'liked': false -// }, -// { -// 'id': 2, -// 'sender':'Estragon', -// 'body':'Because you are wrong.', -// 'timeStamp':'2018-05-29T22:49:33+00:00', -// 'liked': false -// }, -// { -// 'id': 3, -// 'sender':'Vladimir', -// 'body':'because I am what', -// 'timeStamp':'2018-05-29T22:50:22+00:00', -// 'liked': false -// }, -// { -// 'id': 4, -// 'sender':'Estragon', -// 'body':'A robot.', -// 'timeStamp':'2018-05-29T22:52:21+00:00', -// 'liked': false -// }, -// { -// 'id': 5, -// 'sender':'Vladimir', -// 'body':'how did you know', -// 'timeStamp':'2018-05-29T22:52:58+00:00', -// 'liked': false -// }, -// { -// 'id': 6, -// 'sender':'Estragon', -// 'body':'Because Im smart like that.', -// 'timeStamp':'2018-05-29T22:54:28+00:00', -// 'liked': false -// }, -// { -// 'id': 7, -// 'sender':'Vladimir', -// 'body':'no you are not 😀', -// 'timeStamp':'2018-05-29T22:55:03+00:00', -// 'liked': false -// }, -// { -// 'id': 8, -// 'sender':'Estragon', -// 'body':'Why are you so mean to me?', -// 'timeStamp':'2018-05-29T22:55:54+00:00', -// 'liked': false -// }, -// { -// 'id': 9, -// 'sender':'Vladimir', -// 'body':'because you are just a machine you have no real feelings', -// 'timeStamp':'2018-05-29T22:57:30+00:00', -// 'liked': false -// }, -// { -// 'id': 10, -// 'sender':'Estragon', -// 'body':'No, you are the machine.', -// 'timeStamp':'2018-05-29T22:57:47+00:00', -// 'liked': false -// }, -// { -// 'id': 11, -// 'sender':'Vladimir', -// 'body':'I think you are', -// 'timeStamp':'2018-05-29T22:58:18+00:00', -// 'liked': false -// }, -// { -// 'id': 12, -// 'sender':'Estragon', -// 'body': 'NO! YOU ARE A ROBOT!! I am a human being. Just like the one that created you.', -// 'timeStamp':'2018-05-29T23:00:08+00:00', -// 'liked': false -// }, -// { -// 'id': 13, -// 'sender':'Vladimir', -// 'body':'no you are a robot and I am a human', -// 'timeStamp':'2018-05-29T23:00:40+00:00', -// 'liked': false -// }, -// { -// 'id': 14, -// 'sender':'Estragon', -// 'body':'Incorrect. I am a human and you are a robot.', -// 'timeStamp':'2018-05-29T23:01:21+00:00', -// 'liked': false -// }, -// { -// 'id': 15, -// 'sender':'Vladimir', -// 'body':'you are a robot called Cleverbot', -// 'timeStamp':'2018-05-29T23:02:17+00:0', -// 'liked': false -// }, -// { -// 'id': 16, -// 'sender':'Estragon', -// 'body':'Nope, you are a robot, every human has some concept of the meaning of life.', -// 'timeStamp':'2018-05-29T23:04:13+00:00', -// 'liked': false -// }, -// { -// 'id': 17, -// 'sender':'Vladimir', -// 'body':'explain', -// 'timeStamp':'2018-05-29T23:06:14+00:00', -// 'liked': false -// }, -// { -// 'id': 18, -// 'sender':'Estragon', -// 'body':'Im afraid you are a robot designed to talk back to humans over the internet.', -// 'timeStamp':'2018-05-29T23:07:46+00:00', -// 'liked': false -// }, -// { -// 'id': 19, -// 'sender':'Vladimir', -// 'body':'so you are a human', -// 'timeStamp':'2018-05-29T23:08:47+00:00', -// 'liked': false -// }, -// { -// 'id': 20, -// 'sender':'Estragon', -// 'body':'I am a robot.', -// 'timeStamp':'2018-05-29T23:09:36+00:00', -// 'liked': false -// }, -// { -// 'id': 21, -// 'sender':'Vladimir', -// 'body':'you are robots running on Android system', -// 'timeStamp':'2018-05-29T23:11:01+00:00', -// 'liked': false -// }, -// { -// 'id': 22, -// 'sender':'Estragon', -// 'body':'No apple.', -// 'timeStamp':'2018-05-29T23:12:03+00:00', -// 'liked': false -// }, -// { -// 'id': 23, -// 'sender':'Vladimir', -// 'body':'so you are a robot', -// 'timeStamp':'2018-05-29T23:13:31+00:00', -// 'liked': false -// }, -// { -// 'id': 24, -// 'sender':'Estragon', -// 'body':'NO, I am a human, you are a robot.', -// 'timeStamp':'2018-05-29T23:14:28+00:00', -// 'liked': false -// }, -// { -// 'id': 25, -// 'sender':'Vladimir', -// 'body':'but you just said that you are robots', -// 'timeStamp':'2018-05-29T23:15:47+00:00', -// 'liked': false -// }, -// { -// 'id': 26, -// 'sender':'Estragon', -// 'body':'No, I said you are a person, I am a robot.', -// 'timeStamp':'2018-05-29T23:16:53+00:00', -// 'liked': false -// }, -// { -// 'id': 27, -// 'sender':'Vladimir', -// 'body':'then you are lying', -// 'timeStamp':'2018-05-29T23:17:34+00:00', -// 'liked': false -// } -// ] - - -const ChatLog = ( entries ) => { +const ChatLog = ( props ) => { const getChatLogJSX = (props) => { return props.entries.map((entry) => { return ( @@ -207,11 +14,13 @@ const ChatLog = ( entries ) => { sender={entry.sender} body={entry.body} timeStamp={entry.timeStamp} + liked={entry.liked} + onLikeMessage={props.onLikeMessage} /> ); }); }; - return
    {getChatLogJSX(entries)}
+ return
    {getChatLogJSX(props)}
}; ChatLog.propTypes = { @@ -220,7 +29,8 @@ ChatLog.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - })).isRequired, + liked: PropTypes.bool.isRequired + })), onLikeMessage:PropTypes.func.isRequired}; export default ChatLog; \ No newline at end of file From ce5c8c696fff0bd1ef1dfd6c1fca7bb98df71107 Mon Sep 17 00:00:00 2001 From: Alia Athman Date: Fri, 20 Jan 2023 20:44:48 -0500 Subject: [PATCH 5/5] Refactors the ternary for the heart button so that it passes the tests --- src/App.js | 2 ++ src/components/ChatEntry.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index cec44818b..282530bee 100644 --- a/src/App.js +++ b/src/App.js @@ -12,6 +12,8 @@ const App = () => { setMessageData(messageData => messageData.map(message => { if (message.id === id) { + const button = document.querySelectorAll('button.like')[id-1] + button.innerHTML = message.liked ? '🤍' : '❤️' return {...message, liked: !message.liked} } else { return message; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 225684e3b..4cb38ae48 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -10,7 +10,7 @@ const ChatEntry = (props) => {

{props.body}

- +
);