From c7a2cbaff1fb4ee7bd651a298d01c3a1950a8cd4 Mon Sep 17 00:00:00 2001 From: Barbara Date: Thu, 22 Jun 2023 07:50:04 -0400 Subject: [PATCH 1/8] Completed Wave 1 --- src/App.js | 12 ++++++++---- src/components/ChatEntry.js | 16 +++++++++++----- src/components/ChatLog.js | 0 3 files changed, 19 insertions(+), 9 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..2ad29ea7f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; +import TimeStamp from './components/TimeStamp'; const App = () => { return ( @@ -9,11 +11,13 @@ const App = () => {

Application title

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); }; - -export default App; +export default App; \ No newline at end of file diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..5a084593b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,18 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ +

@@ -16,7 +20,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; +export default ChatEntry; \ No newline at end of file diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..e69de29bb From 09f4c9ac7ed378cf0414566b8e42fc7bdc85e3f4 Mon Sep 17 00:00:00 2001 From: Barbara Date: Thu, 22 Jun 2023 11:49:37 -0400 Subject: [PATCH 2/8] Completed Wave 2 --- src/App.js | 17 ++++++++++++----- src/components/ChatLog.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 2ad29ea7f..ac789114c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,28 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; -import TimeStamp from './components/TimeStamp'; +import ChatLog from './components/ChatLog'; + +// import ChatEntry from './components/ChatEntry'; +// import TimeStamp from './components/TimeStamp'; const App = () => { + const [messages, setMessages] = useState(chatMessages); + return (

Application title

- + /> */} + +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e69de29bb..5b32a4660 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + return ( +
+ {props.entries.map((message) => { + return ( + + )})} +
+ ); +} + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired + }) + ).isRequired, +}; + +export default ChatLog; \ No newline at end of file From 1cdc21a4abd7279842ae9f02eb179fbff1e6a88f Mon Sep 17 00:00:00 2001 From: Barbara Date: Thu, 22 Jun 2023 21:34:20 -0400 Subject: [PATCH 3/8] Completed Wave 3 --- src/App.js | 41 +++++++++++++++++++++-------- src/components/ChatEntry.js | 32 +++++++++++++++++++---- src/components/ChatLog.js | 51 ++++++++++++++++++++----------------- 3 files changed, 85 insertions(+), 39 deletions(-) diff --git a/src/App.js b/src/App.js index ac789114c..0699ab4b3 100644 --- a/src/App.js +++ b/src/App.js @@ -3,11 +3,32 @@ import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; -// import ChatEntry from './components/ChatEntry'; -// import TimeStamp from './components/TimeStamp'; - const App = () => { const [messages, setMessages] = useState(chatMessages); + const [likeCount, setLikeCount] = useState(0); + + const handleLikeUpdate = (id) => { + setMessages(messages => { + return messages.map(message => { + if (id === message.id) { + return { + ...message, + liked: !message.liked, + } + } else { + return message; + } + }); + }); + }; + + const updateLikeCount = ((liked) => { + if (liked) { + setLikeCount(() => likeCount + 1); + } else{ + setLikeCount(() => likeCount - 1); + } + }); return (
@@ -15,14 +36,12 @@ const App = () => {

Application title

- - {/* */} - - +

{likeCount} ❤️s

+
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 5a084593b..bad92ed86 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,28 +1,50 @@ -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; - const ChatEntry = (props) => { + const [heart, setHeart] = useState('🤍'); + + const onLikeButtonClick = () => { + const likedMessage = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + props.onHandleLikeUpdate(likedMessage.id); + props.onUpdateLikeCount(likedMessage.liked); + if (heart === '🤍') { + return setHeart('❤️'); + } else { + return setHeart('🤍'); + } + }; return (

{props.sender}

{props.body}

- +

- +
); }; - ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onHandleLikeUpdate: PropTypes.func.isRequired, + onUpdateLikeCount: PropTypes.func.isRequired, }; export default ChatEntry; \ No newline at end of file diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 5b32a4660..7c58e83fa 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -2,32 +2,37 @@ import React from 'react'; import PropTypes from 'prop-types'; import './ChatLog.css'; import ChatEntry from './ChatEntry'; - const ChatLog = (props) => { - return ( -
- {props.entries.map((message) => { - return ( - - )})} -
- ); + return ( +
+ {props.entries.map((message) => { + return ( + + )})} +
+ ); } - ChatLog.propTypes = { - entries: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.number.isRequired, - sender: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired - }) - ).isRequired, + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired + }) + ).isRequired, + onHandleLikeUpdate: PropTypes.func.isRequired, + onUpdateLikeCount: PropTypes.func.isRequired, }; export default ChatLog; \ No newline at end of file From d109c01673085f7b029e9709bcc7f9dda7e6757a Mon Sep 17 00:00:00 2001 From: Barbara Date: Fri, 23 Jun 2023 09:49:19 -0400 Subject: [PATCH 4/8] Changed title --- src/App.js | 2 +- src/components/ChatLog.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 0699ab4b3..b9ee31567 100644 --- a/src/App.js +++ b/src/App.js @@ -33,7 +33,7 @@ const App = () => { return (
-

Application title

+

Barbara's Chatlog

{likeCount} ❤️s

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 7c58e83fa..e89977ee5 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -30,7 +30,8 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired }) - ).isRequired, + ) + .isRequired, onHandleLikeUpdate: PropTypes.func.isRequired, onUpdateLikeCount: PropTypes.func.isRequired, }; From f2281ae8dc29a39354174cb05e446265507da522 Mon Sep 17 00:00:00 2001 From: Barbara Date: Fri, 23 Jun 2023 10:48:55 -0400 Subject: [PATCH 5/8] Update Chatlog --- src/components/ChatLog.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e89977ee5..3c7b82610 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -36,4 +36,9 @@ ChatLog.propTypes = { onUpdateLikeCount: PropTypes.func.isRequired, }; +ChatLog.defaultProps = { + onHandleLikeUpdate: () => {}, + onUpdateLikeCount: () => {}, +}; + export default ChatLog; \ No newline at end of file From 8330b02b48de56fef8b4161d816841281257ae3c Mon Sep 17 00:00:00 2001 From: Barbara Date: Fri, 23 Jun 2023 11:15:23 -0400 Subject: [PATCH 6/8] Update2 Chatlog --- src/components/ChatEntry.js | 4 ++-- src/components/ChatLog.js | 9 ++------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index bad92ed86..6c238eba6 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -43,8 +43,8 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - onHandleLikeUpdate: PropTypes.func.isRequired, - onUpdateLikeCount: PropTypes.func.isRequired, + onHandleLikeUpdate: PropTypes, + onUpdateLikeCount: PropTypes.func, }; export default ChatEntry; \ No newline at end of file diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 3c7b82610..296b2db91 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -32,13 +32,8 @@ ChatLog.propTypes = { }) ) .isRequired, - onHandleLikeUpdate: PropTypes.func.isRequired, - onUpdateLikeCount: PropTypes.func.isRequired, -}; - -ChatLog.defaultProps = { - onHandleLikeUpdate: () => {}, - onUpdateLikeCount: () => {}, + onHandleLikeUpdate: PropTypes.func, + onUpdateLikeCount: PropTypes.func, }; export default ChatLog; \ No newline at end of file From 14c63351e4f67e15eda11fbbcff3b25f0ae4f68d Mon Sep 17 00:00:00 2001 From: Barbara Date: Fri, 23 Jun 2023 11:22:52 -0400 Subject: [PATCH 7/8] Fixed propTypes --- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6c238eba6..b2fdb7d3f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -43,7 +43,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - onHandleLikeUpdate: PropTypes, + onHandleLikeUpdate: PropTypes.func, onUpdateLikeCount: PropTypes.func, }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 296b2db91..c2d2a9474 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -33,7 +33,7 @@ ChatLog.propTypes = { ) .isRequired, onHandleLikeUpdate: PropTypes.func, - onUpdateLikeCount: PropTypes.func, + onUpdateLikeCount: PropTypes.func }; export default ChatLog; \ No newline at end of file From 499a84e59101d215f3d26740ea5828dd48f310aa Mon Sep 17 00:00:00 2001 From: Barbara Date: Mon, 20 Nov 2023 18:40:20 -0500 Subject: [PATCH 8/8] Change names and messages --- src/components/ChatLog.test.js | 14 +-- src/data/messages.json | 150 ++++++--------------------------- 2 files changed, 33 insertions(+), 131 deletions(-) diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 0bb36c3ea..63294974c 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -6,35 +6,35 @@ import { render, screen } from '@testing-library/react'; const LOG = [ { id: 1, - sender: 'Vladimir', + sender: 'Barbara', body: 'why are you arguing with me', timeStamp: '2018-05-29T22:49:06+00:00', liked: false, }, { id: 2, - sender: 'Estragon', + sender: 'Claire', body: 'Because you are wrong.', timeStamp: '2018-05-29T22:49:33+00:00', liked: false, }, { id: 3, - sender: 'Vladimir', + sender: 'Barbara', body: 'because I am what', timeStamp: '2018-05-29T22:50:22+00:00', liked: false, }, { id: 4, - sender: 'Estragon', + sender: 'Claire', body: 'A robot.', timeStamp: '2018-05-29T22:52:21+00:00', liked: false, }, { id: 5, - sender: 'Vladimir', + sender: 'Barbara', body: 'Notabot', timeStamp: '2019-07-23T22:52:21+00:00', liked: false, @@ -49,11 +49,11 @@ describe('Wave 02: ChatLog', () => { test('renders without crashing and shows all the names', () => { [ { - name: 'Vladimir', + name: 'Barbara', numChats: 3, }, { - name: 'Estragon', + name: 'Claire', numChats: 2, }, ].forEach((person) => { diff --git a/src/data/messages.json b/src/data/messages.json index 64fdb053c..be7e95136 100644 --- a/src/data/messages.json +++ b/src/data/messages.json @@ -1,191 +1,93 @@ [ { "id": 1, - "sender":"Vladimir", - "body":"why are you arguing with me", + "sender":"Barbara", + "body":"Hey there! How's your day going?", "timeStamp":"2018-05-29T22:49:06+00:00", "liked": false }, { "id": 2, - "sender":"Estragon", - "body":"Because you are wrong.", + "sender":"Claire", + "body":"Hey! Not too bad, just busy with work. How about you?", "timeStamp":"2018-05-29T22:49:33+00:00", "liked": false }, { "id": 3, - "sender":"Vladimir", - "body":"because I am what", + "sender":"Barbara", + "body":" Same here, work is piling up. Need a break though. Any exciting plans for the weekend?", "timeStamp":"2018-05-29T22:50:22+00:00", "liked": false }, { "id": 4, - "sender":"Estragon", - "body":"A robot.", + "sender":"Claire", + "body":"Not really, just hoping to catch up on some sleep and maybe binge-watch a new series. You?", "timeStamp":"2018-05-29T22:52:21+00:00", "liked": false }, { "id": 5, - "sender":"Vladimir", - "body":"how did you know", + "sender":"Barbara", + "body":"Nice! I've got a family gathering on Saturday, and Sunday is reserved for some much-needed relaxation. Maybe a good book and a cup of coffee.", "timeStamp":"2018-05-29T22:52:58+00:00", "liked": false }, { "id": 6, - "sender":"Estragon", - "body":"Because I'm smart like that.", + "sender":"Claire", + "body":"Sounds perfect. Which book are you planning to read?", "timeStamp":"2018-05-29T22:54:28+00:00", "liked": false }, { "id": 7, - "sender":"Vladimir", - "body":"no you are not 😀", + "sender":"Barbara", + "body":"I picked up a mystery novel that a friend recommended.'The Silent Enigma.' Ever heard of it?", "timeStamp":"2018-05-29T22:55:03+00:00", "liked": false }, { "id": 8, - "sender":"Estragon", - "body":"Why are you so mean to me?", + "sender":"Claire", + "body":"No, but the title sounds intriguing. Let me know how it is. I've been looking for a good book myself.", "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", + "sender":"Barbara", + "body":"Will do! Anything specific you're in the mood for?", "timeStamp":"2018-05-29T22:57:30+00:00", "liked": false }, { "id": 10, - "sender":"Estragon", - "body":"No, you are the machine.", + "sender":"Claire", + "body":"I'm thinking of diving into some science fiction. Maybe something with a futuristic twist. Any suggestions?", "timeStamp":"2018-05-29T22:57:47+00:00", "liked": false }, { "id": 11, - "sender":"Vladimir", - "body":"I think you are", + "sender":"Barbara", + "body":"'Neon Nexus' just came out, and I've heard it's fantastic. It's got all the futuristic elements and a gripping plot. Give it a shot!", "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.", + "sender":"Claire", + "body": "Thanks for the tip! I'll add it to my list. Anyway, I should get back to work. Let's catch up soon, maybe over the weekend?", "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", + "sender":"Barbara", + "body":"Definitely! Have a productive day, and we'll talk soon. Take care!", "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:00", - "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":"I'm 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 } ]