From df081d1b417888bfaffc545007084759b90fc356 Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Mon, 31 Jul 2023 17:00:47 -0600 Subject: [PATCH 1/7] wave 1 --- src/App.js | 4 ++++ src/components/ChatEntry.js | 6 +++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..dddb4ef5e 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 TimeStamp from './components/TimeStamp'; +import ChatEntry from './components/ChatEntry'; const App = () => { return ( @@ -11,9 +13,11 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} +
); }; + export default App; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..e2f609547 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 }

From 646522d2096d1988674310e24a3cc2919ada800d Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Mon, 31 Jul 2023 19:11:14 -0600 Subject: [PATCH 2/7] wave 2 --- src/App.js | 10 +++------- src/components/ChatEntry.js | 7 +++++++ src/components/ChatLog.js | 20 ++++++++++++++++++++ 3 files changed, 30 insertions(+), 7 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index dddb4ef5e..88f6234c9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,19 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import TimeStamp from './components/TimeStamp'; -import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; const App = () => { return (
-

Application title

+

Weird Chats

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} - +
); }; - export default App; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index e2f609547..f9794365e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,3 +1,6 @@ +// represents a single chat entry +// Takes multiple props: id, sender, body, timeStamp + import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; @@ -17,6 +20,10 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..321a7e379 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,20 @@ +import React from 'react'; +// import './ChatLog.css'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + const chatComponents = props.entries.map((entry) => { + return ( + + ); + }); + + return chatComponents; +}; + +export default ChatLog; \ No newline at end of file From ce4915465fac117533a230f472c6c21f81ceaef1 Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Mon, 31 Jul 2023 19:33:30 -0600 Subject: [PATCH 3/7] hearts update on message click --- src/App.js | 12 +++++++++--- src/components/ChatEntry.js | 17 ++++++++++++----- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 88f6234c9..a18d571a8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,22 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; const App = () => { + const [likesCount, setLikesCount] = useState(0); + + const updateLikesCount = (liked) => { + setLikesCount(likesCount + (liked ? 1 : -1)); + }; + return (
-

Weird Chats

+

{likesCount} ❤️s

- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index f9794365e..a8214615b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,18 +1,23 @@ -// represents a single chat entry -// Takes multiple props: id, sender, body, timeStamp - -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { + const [liked, setLiked] = useState(props.liked); + + const toggleLike = () => { + setLiked(!liked); + props.onClickLike(!liked); + }; + return (

{ props.sender }

{ props.body }

{ props.timeStamp }

- +
); @@ -24,6 +29,8 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onClickLike: PropTypes.func.isRequired, }; export default ChatEntry; From cfca1f99bc2af0ff6f11f8eeff81a418ce9c3e80 Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Mon, 31 Jul 2023 19:48:16 -0600 Subject: [PATCH 4/7] likes count updating --- src/App.js | 2 +- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index a18d571a8..11ad301ad 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ const App = () => {

{likesCount} ❤️s

- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index a8214615b..2b705e067 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,7 +3,7 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { - const [liked, setLiked] = useState(props.liked); + const [liked, setLiked] = useState(false); const toggleLike = () => { setLiked(!liked); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 321a7e379..e2b99d2ca 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -10,11 +10,12 @@ const ChatLog = (props) => { sender={entry.sender} body={entry.body} timeStamp={entry.timeStamp} + onClickLike={props.onClickLike} /> ); }); - return chatComponents; + return
{chatComponents}
; }; export default ChatLog; \ No newline at end of file From 11e38143920113109d1a0215e7c482306db9426a Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Mon, 31 Jul 2023 19:52:37 -0600 Subject: [PATCH 5/7] minor syntax change --- 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 e2b99d2ca..556090e05 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -15,7 +15,7 @@ const ChatLog = (props) => { ); }); - return
{chatComponents}
; + return chatComponents; }; export default ChatLog; \ No newline at end of file From e05beaf90f95b1acaf9bf0fad1f9fa443a234a48 Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Mon, 31 Jul 2023 19:55:19 -0600 Subject: [PATCH 6/7] fixing errors for tests --- src/components/ChatEntry.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 2b705e067..55c818c72 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -25,12 +25,12 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { //Fill with correct proptypes - id: PropTypes.number.isRequired, - sender: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired, - onClickLike: PropTypes.func.isRequired, + id: PropTypes.number, + sender: PropTypes.string, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, + onClickLike: PropTypes.func, }; export default ChatEntry; From 5545090c3d309ef7dc988af8bde8d2821dff6c61 Mon Sep 17 00:00:00 2001 From: Amber Shay Date: Tue, 1 Aug 2023 13:55:03 -0600 Subject: [PATCH 7/7] refactor to add code for timeStamp to display x-yrs-ago --- package.json | 1 + src/components/ChatEntry.js | 3 ++- yarn.lock | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 5bbba246d..a651f1486 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "luxon": "^2.4.0", + "moment": "^2.29.4", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "5.0.0" diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 55c818c72..be5cc2e47 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import moment from 'moment'; const ChatEntry = (props) => { const [liked, setLiked] = useState(false); @@ -15,7 +16,7 @@ const ChatEntry = (props) => {

{ props.sender }

{ props.body }

-

{ props.timeStamp }

+

{ moment(props.timeStamp).fromNow() }

diff --git a/yarn.lock b/yarn.lock index 092a12c75..842964dab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7107,6 +7107,11 @@ mkdirp@~0.5.1: dependencies: minimist "^1.2.6" +moment@^2.29.4: + version "2.29.4" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" + integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"