From 121ff1537b31db8a611997b157a404c15ccc0df8 Mon Sep 17 00:00:00 2001 From: Supriya Chavan Date: Thu, 26 Jan 2023 16:24:52 -0800 Subject: [PATCH 1/6] Wave 01 Updated ChatEntry and App --- src/App.js | 8 ++++++++ src/components/ChatEntry.js | 6 +++--- src/components/ChatLog.js | 0 3 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..3b30c4ca0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import React from 'react'; import './App.css'; +import ChatEntry from './components/ChatEntry'; import chatMessages from './data/messages.json'; const App = () => { @@ -9,6 +10,13 @@ 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..77c0920b6 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,10 +5,10 @@ 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}

+

{props.timeStamp}

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..e69de29bb From e1f981faa5514a64f42bc026aa9cea3c3a7cb1e3 Mon Sep 17 00:00:00 2001 From: Supriya Chavan Date: Thu, 26 Jan 2023 17:11:41 -0800 Subject: [PATCH 2/6] Wave 02 Added ChatLog --- src/App.js | 10 +++++++--- src/components/ChatEntry.js | 4 ++++ src/components/ChatLog.js | 23 +++++++++++++++++++++++ 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 3b30c4ca0..ec1a03926 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from 'react'; import './App.css'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; const App = () => { @@ -15,10 +16,13 @@ const App = () => { body = {chatMessages[0].body} timeStamp = {chatMessages[0].timeStamp} > - - {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + + + + ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 77c0920b6..849f619ab 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,6 +17,10 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes + 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 e69de29bb..0723f46ca 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -0,0 +1,23 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + return props.entries.map((chat, id) => { + return ( +
+ +
+ ); + }); +}; +ChatLog.propTypes = { + chats: PropTypes.array.isRequired, +}; + +export default ChatLog; \ No newline at end of file From 2d91f5b31c67778c3d598c955783662dd5baf8bf Mon Sep 17 00:00:00 2001 From: Supriya Chavan Date: Mon, 30 Jan 2023 21:21:06 -0800 Subject: [PATCH 3/6] Messages on left and right of screen --- src/App.css | 2 +- src/App.js | 17 ++++++++++------- src/components/ChatEntry.js | 13 ++++++++++++- src/components/ChatEntry.test.js | 2 +- src/components/ChatLog.js | 8 +++++++- src/components/Post.css | 4 ++++ src/components/Post.js | 18 ++++++++++++++++++ 7 files changed, 53 insertions(+), 11 deletions(-) create mode 100644 src/components/Post.css create mode 100644 src/components/Post.js diff --git a/src/App.css b/src/App.css index d97beb4e6..4dc41bef0 100644 --- a/src/App.css +++ b/src/App.css @@ -27,7 +27,7 @@ } #App header section { - background-color: #e0ffff; + background-color: #222; } #App .widget { diff --git a/src/App.js b/src/App.js index ec1a03926..02299fd34 100644 --- a/src/App.js +++ b/src/App.js @@ -3,26 +3,29 @@ import './App.css'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; - +import Post from './components/Post'; const App = () => { return (
-

Application title

+

React - ChatLog + < Post/> +

- - + */} - + > - +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 849f619ab..55b5c6a27 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,15 +1,26 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import { useState } from 'react'; const ChatEntry = (props) => { + //const [doLike,ChangeHeart] = useState('🤍'); + // const ChangeHeart = () => { + // if(props.liked === true){ + // props.liked = false;} + // else{ + // props.liked = true; + // } + // }; return ( -
+

{props.sender}

{props.body}

{props.timeStamp}

+
); diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js index b69270c03..664e422e0 100644 --- a/src/components/ChatEntry.test.js +++ b/src/components/ChatEntry.test.js @@ -21,7 +21,7 @@ describe("Wave 01: ChatEntry", () => { test("that it will display the body", () => { expect(screen.getByText(/Get out by 8am/)).toBeInTheDocument(); }); - + 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 0723f46ca..2f46122fd 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -8,16 +8,22 @@ const ChatLog = (props) => { return (
); }); }; ChatLog.propTypes = { - chats: PropTypes.array.isRequired, + entries: PropTypes.array.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }; export default ChatLog; \ No newline at end of file diff --git a/src/components/Post.css b/src/components/Post.css new file mode 100644 index 000000000..80f2e675a --- /dev/null +++ b/src/components/Post.css @@ -0,0 +1,4 @@ +.div { + background-color: white; + text-decoration-color: black; +} \ No newline at end of file diff --git a/src/components/Post.js b/src/components/Post.js new file mode 100644 index 000000000..229a414e2 --- /dev/null +++ b/src/components/Post.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { useState } from 'react'; + +const Post = () => { + const [likesCount, setLikesCount] = useState(0); + const increaseLikes = () => { + console.log('We\'re inside increaseLikes!'); + setLikesCount(likesCount+1); + } + return ( +
+

The number of likes is {likesCount} '♥️'.

+ +
+ ); +}; + +export default Post; \ No newline at end of file From 93a846c523812a82ca1e4991863defbb2603106e Mon Sep 17 00:00:00 2001 From: Supriya Chavan Date: Tue, 31 Jan 2023 21:29:19 -0800 Subject: [PATCH 4/6] wave 3 finished with tests --- src/App.js | 29 ++++++++++++++++++++++--- src/components/ChatEntry.js | 36 +++++++++++++++++++------------ src/components/ChatLog.js | 43 +++++++++++++++++++++++++------------ 3 files changed, 77 insertions(+), 31 deletions(-) diff --git a/src/App.js b/src/App.js index 02299fd34..b3e6a43fa 100644 --- a/src/App.js +++ b/src/App.js @@ -4,12 +4,34 @@ import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; import Post from './components/Post'; +import { useState } from 'react'; + +let numberOfLikes = 0; const App = () => { + const [MessageData, setMessageData] = useState(chatMessages) + + const updateMessageData = updatedChatEntry =>{ + const entries = MessageData.map((chat) => { + if(chat.id === updatedChatEntry.id){ + numberOfLikes = updatedChatEntry.liked ? numberOfLikes+1 : numberOfLikes-1; + return updatedChatEntry; + } else { + return chat; + } + }); + setMessageData(entries); + + }; return (

React - ChatLog - < Post/> + {/* < Post/> */} +
+

+ {numberOfLikes} ❤️s +

+

@@ -21,9 +43,10 @@ const App = () => { timeStamp = {chatMessages[0].timeStamp} > */} + + entries={MessageData} + onUpdatechat={updateMessageData}>
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 55b5c6a27..3640d3273 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,25 +1,31 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import { useState } from 'react'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { - //const [doLike,ChangeHeart] = useState('🤍'); - // const ChangeHeart = () => { - // if(props.liked === true){ - // props.liked = false;} - // else{ - // props.liked = true; - // } - // }; + const onFlipHeartClick = () => { + + 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}

-

{props.timeStamp}

- +

+
@@ -28,10 +34,12 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes - sender: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, + id: PropTypes.number, + sender: PropTypes.string, + body: PropTypes.string, + timeStamp: PropTypes.string, liked: PropTypes.bool, + onUpdate: PropTypes.func, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 2f46122fd..9e6e950b7 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,26 +4,41 @@ import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; const ChatLog = (props) => { - return props.entries.map((chat, id) => { + const chatentryComponents =props.entries.map((chat,index)=>{ return ( -
+
-
+
); }); + return ( +
+

Chat

+
    + {chatentryComponents}; +
+
+ ); }; + ChatLog.propTypes = { - entries: PropTypes.array.isRequired, - sender: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired, -}; + entries: PropTypes.arrayOf(PropTypes.shape({ + id:PropTypes.number, + sender: PropTypes.string, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, + }) + ).isRequired, + + onUpdatechat: PropTypes.func +}; export default ChatLog; \ No newline at end of file From 4678c46501bf982d04ed643a081a60c1ed5de3ab Mon Sep 17 00:00:00 2001 From: Supriya Chavan Date: Tue, 31 Jan 2023 21:29:52 -0800 Subject: [PATCH 5/6] wave 3 finished with tests1 --- src/App.css | 4 +++- src/App.js | 5 +---- src/components/ChatEntry.css | 8 ++++++++ src/components/ChatEntry.js | 1 - src/components/Post.css | 4 ---- src/components/Post.js | 18 ------------------ 6 files changed, 12 insertions(+), 28 deletions(-) delete mode 100644 src/components/Post.css delete mode 100644 src/components/Post.js diff --git a/src/App.css b/src/App.css index 4dc41bef0..99675b3fb 100644 --- a/src/App.css +++ b/src/App.css @@ -24,6 +24,7 @@ font-size: 1.5em; text-align: center; display: inline-block; + } #App header section { @@ -34,7 +35,7 @@ display: inline-block; line-height: 0.5em; border-radius: 10px; - color: black; + color:rgb(rgb(21, 138, 233), green, blue); font-size:0.8em; padding-left: 1em; padding-right: 1em; @@ -43,6 +44,7 @@ #App #heartWidget { font-size: 1.5em; margin: 1em + } #App span { diff --git a/src/App.js b/src/App.js index b3e6a43fa..64a6c6183 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,7 @@ import React from 'react'; import './App.css'; -import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; -import Post from './components/Post'; import { useState } from 'react'; let numberOfLikes = 0; @@ -25,8 +23,7 @@ const App = () => { return (
-

React - ChatLog - {/* < Post/> */} +

Chat between VLadimir and Estragon

{numberOfLikes} ❤️s diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..bd15892e9 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -56,15 +56,19 @@ button { /* "local" messages are shown on the left side */ .chat-entry.local { text-align: left; + color:green; } + .chat-entry.local .entry-time { text-align: right; + color:green } .chat-entry.local .entry-bubble::before { background-color: #ffffe0; left: -18px; + } .chat-entry.local .entry-bubble:hover::before { @@ -74,20 +78,24 @@ button { /* "remote" messages are shown on the right side, in blue */ .chat-entry.remote { text-align: right; + color: blue } .chat-entry.remote .entry-bubble { background-color: #e0ffff; margin-left: auto; margin-right: 0; + color: blue; } .chat-entry.remote .entry-bubble:hover { background-color: #a9f6f6; + color: blue; } .chat-entry.remote .entry-time { text-align: left; + color: blue; } .chat-entry.remote .entry-bubble::before { diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 3640d3273..fae9b6a96 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -33,7 +33,6 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes id: PropTypes.number, sender: PropTypes.string, body: PropTypes.string, diff --git a/src/components/Post.css b/src/components/Post.css deleted file mode 100644 index 80f2e675a..000000000 --- a/src/components/Post.css +++ /dev/null @@ -1,4 +0,0 @@ -.div { - background-color: white; - text-decoration-color: black; -} \ No newline at end of file diff --git a/src/components/Post.js b/src/components/Post.js deleted file mode 100644 index 229a414e2..000000000 --- a/src/components/Post.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { useState } from 'react'; - -const Post = () => { - const [likesCount, setLikesCount] = useState(0); - const increaseLikes = () => { - console.log('We\'re inside increaseLikes!'); - setLikesCount(likesCount+1); - } - return ( -

-

The number of likes is {likesCount} '♥️'.

- -
- ); -}; - -export default Post; \ No newline at end of file From c30754468bf8de5e366a218c287e48024a4082b7 Mon Sep 17 00:00:00 2001 From: Supriya Chavan Date: Wed, 1 Feb 2023 16:02:40 -0800 Subject: [PATCH 6/6] "removed some comments" --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 64a6c6183..74815a26a 100644 --- a/src/App.js +++ b/src/App.js @@ -18,8 +18,8 @@ const App = () => { } }); setMessageData(entries); - }; + return (