From a2b0ec5dc66ac1f2e3efd20442d53ce7c29ce138 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 12:29:54 -0700 Subject: [PATCH 01/11] Import ChatEntry component Destructure first message from chat data Pass first message props to ChatEntry Render ChatEntry component in main --- src/App.js | 15 ++++++++++++--- src/components/ChatEntry.js | 16 +++++++++++----- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..021988487 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,26 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const App = () => { + + const [firstMessage] = chatMessages; + return (
-

Application title

+

Chat Log

+
- {/* 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..79de7cba8 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,17 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import Timestamp from './Timestamp'; const ChatEntry = (props) => { + const messageClass = `chat-entry ${props.sender === 'Vladimir' ? 'local' : 'remote'}`; + return ( -
-

Replace with name of sender

+
+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

@@ -16,7 +19,10 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timestamp: PropTypes.string.isRequired }; + export default ChatEntry; From 8f0bba4ca3a7b9a4d0abe20d9f6053e3f65b4291 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 12:50:27 -0700 Subject: [PATCH 02/11] Fixed Capitalization error in TimeStamp --- src/components/ChatEntry.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 79de7cba8..724914f72 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,7 +1,7 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import Timestamp from './Timestamp'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { const messageClass = `chat-entry ${props.sender === 'Vladimir' ? 'local' : 'remote'}`; @@ -11,7 +11,7 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

-

+

From 503b9b69bc1c4be05c054829f1c1bd2686226079 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 13:13:16 -0700 Subject: [PATCH 03/11] Implement ChatLog component to render full chat log Create ChatLog component Map over chatMessages array Pass props to ChatEntry for each message Render ChatLog in App instead of just ChatEntry Minor formatting fixes --- src/App.js | 30 ++++++++++++++++++++---------- src/components/ChatLog.js | 27 +++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 021988487..c7888f66f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,28 +1,38 @@ import React from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; -const App = () => { +// Import sample message data +import chatMessages from './data/messages.json'; +// Import ChatEntry component +import ChatEntry from './components/ChatEntry'; + +function App() { + + // Get first message object from sample data const [firstMessage] = chatMessages; return (
+ + {/* Header */}
-

Chat Log

+

Chat Log

- -
+ +
); -}; +} -export default App; +export default App; \ No newline at end of file diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..0dc472494 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,27 @@ +// src/components/ChatLog.js + +import React from 'react'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + + const chatEntries = props.entries.map(entry => { + return ( + + ); + }); + + return ( +
+ {chatEntries} +
+ ); + +} + +export default ChatLog; From 2edd7a979a24e271508e6db36996a99841ef26c2 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 21:57:36 -0700 Subject: [PATCH 04/11] Fixed import error --- src/App.js | 28 ++++++---------------------- src/components/ChatLog.js | 14 +++++++------- 2 files changed, 13 insertions(+), 29 deletions(-) diff --git a/src/App.js b/src/App.js index c7888f66f..ee3d989c1 100644 --- a/src/App.js +++ b/src/App.js @@ -7,32 +7,16 @@ import chatMessages from './data/messages.json'; // Import ChatEntry component import ChatEntry from './components/ChatEntry'; -function App() { +import ChatLog from './components/ChatLog'; - // Get first message object from sample data - const [firstMessage] = chatMessages; +function App() { return ( -
- - {/* Header */} -
-

Chat Log

-
- -
- - {/* Render single ChatEntry component */} - - -
- +
+ {/* Render ChatLog */} +
- ); + ) } export default App; \ No newline at end of file diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 0dc472494..c660771bf 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,22 +5,22 @@ import ChatEntry from './ChatEntry'; const ChatLog = (props) => { - const chatEntries = props.entries.map(entry => { +const chatEntries = props.entries.map(entry => { return ( - + /> ); - }); +}); - return ( +return (
- {chatEntries} + {chatEntries}
- ); +); } From bac0a772a5a7693a7e8cc6270d91bd46bcb4ac9f Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 22:17:43 -0700 Subject: [PATCH 05/11] Implement ChatEntry component to display message - Imported and rendered ChatEntry component in App - Passed props for sender, body, and timestamp - Add className to wrap div for styling - Render sender name, message body, and timestamp - Add PropTypes validation --- src/components/ChatEntry.js | 34 +++++++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 724914f72..3217951f2 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,28 +1,44 @@ -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 messageClass = `chat-entry ${props.sender === 'Vladimir' ? 'local' : 'remote'}`; - + + const [liked, setLiked] = useState(false); + + const toggleLiked = () => { + setLiked(!liked); + } + return ( -
+

{props.sender}

+

{props.body}

-

- + +

+ +

+ + +
); -}; +} ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timestamp: PropTypes.string.isRequired + timeStamp: PropTypes.string.isRequired, }; - export default ChatEntry; + From b05fe4a45a5652a906219020e15a09267ea630c7 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 22:20:21 -0700 Subject: [PATCH 06/11] Implement liking functionality in App component - Add state to track total likes - Pass handler to increment likes to ChatLog - Display total likes --- src/App.js | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index ee3d989c1..39ea00ed2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,33 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; +import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; -// Import sample message data -import chatMessages from './data/messages.json'; +const App = () => { -// Import ChatEntry component -import ChatEntry from './components/ChatEntry'; + const [totalLikes, setTotalLikes] = useState(0); -import ChatLog from './components/ChatLog'; - -function App() { + const incrementTotalLikes = () => { + setTotalLikes(totalLikes + 1); + } return ( -
- {/* Render ChatLog */} - +
+
+

Chat Log

+
+ +
+ +
+ +

{totalLikes} ❤️s

+
- ) + ); } -export default App; \ No newline at end of file +export default App; From 2ab05256ce479ba2a0614dae9b0a5e9c37317388 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 22:23:40 -0700 Subject: [PATCH 07/11] Pass like handler from ChatLog to ChatEntry --- src/components/ChatLog.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index c660771bf..6092b733b 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,27 +1,22 @@ -// src/components/ChatLog.js - import React from 'react'; +import './ChatLog.css'; import ChatEntry from './ChatEntry'; const ChatLog = (props) => { -const chatEntries = props.entries.map(entry => { - return ( +const chatEntries = props.entries.map(entry => ( - ); -}); +)); return (
{chatEntries}
); - } export default ChatLog; From a7076890d0b042905e6944bf90f1d12f3ff1b800 Mon Sep 17 00:00:00 2001 From: Moyo Moz Date: Wed, 19 Jul 2023 22:51:00 -0700 Subject: [PATCH 08/11] - Implement like button toggle and state in ChatEntry - Pass like handler to ChatEntry and increment likes in App - Lift like state up to App and pass to ChatLog and ChatEntry - Update ChatEntry to toggle like on click and call handler - Conditionally render heart icon based on like state - Add total likes display in App showing count - Fix bug where like state not persisting on re-render --- src/components/ChatEntry.js | 26 ++++++++++++-------------- src/components/ChatLog.js | 6 +++--- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 3217951f2..fa7a25267 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,44 +1,42 @@ -import React, { useState } from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { - const [liked, setLiked] = useState(false); + const [liked, setLiked] = useState(props.liked); const toggleLiked = () => { setLiked(!liked); + props.onLike(); } return ( -
+
+

{props.sender}

- +

{props.body}

-

- +

- - -
+
); -} +}; ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + onLike: PropTypes.func.isRequired }; export default ChatEntry; - diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 6092b733b..107c750d2 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,10 +5,10 @@ import ChatEntry from './ChatEntry'; const ChatLog = (props) => { const chatEntries = props.entries.map(entry => ( - )); From 5d13d5a3bbcf7d12a90cf1e3445171c830faf49c Mon Sep 17 00:00:00 2001 From: MoyoMoz Date: Mon, 14 Aug 2023 15:56:19 -0700 Subject: [PATCH 09/11] moved message like number from top to bottom of page --- src/App.css | 1 + src/App.js | 10 +++++----- src/components/ChatEntry.css | 1 + src/components/ChatEntry.js | 7 +++++-- src/components/ChatLog.css | 1 + src/components/ChatLog.js | 1 + src/components/TimeStamp.js | 1 + 7 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index d97beb4e6..df3fe9118 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,4 @@ +/* src/App.css */ #App { background-color: #87cefa; } diff --git a/src/App.js b/src/App.js index 39ea00ed2..979e1a821 100644 --- a/src/App.js +++ b/src/App.js @@ -7,25 +7,25 @@ const App = () => { const [totalLikes, setTotalLikes] = useState(0); - const incrementTotalLikes = () => { - setTotalLikes(totalLikes + 1); + const handleLikeChange = (isLiked) => { + // Increment or decrement based on the liked status + setTotalLikes(prevTotalLikes => isLiked ? prevTotalLikes + 1 : prevTotalLikes - 1); } return (

Chat Log

+

{totalLikes} ❤️s

{/* Moved the total likes display to the top */}
-

{totalLikes} ❤️s

-
); } diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..94df4123c 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -1,3 +1,4 @@ +/* src/components/ChatEntry.css */ button { background: none; color: inherit; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index fa7a25267..61bcc550b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,3 +1,4 @@ +// src/components/ChatEntry.js import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; @@ -8,8 +9,10 @@ const ChatEntry = (props) => { const [liked, setLiked] = useState(props.liked); const toggleLiked = () => { - setLiked(!liked); - props.onLike(); + const newLikedStatus = !liked; + setLiked(newLikedStatus); + // Pass the new liked status to the onLike function + props.onLike(newLikedStatus); } return ( diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css index 378848d1f..f68c07ba6 100644 --- a/src/components/ChatLog.css +++ b/src/components/ChatLog.css @@ -1,3 +1,4 @@ +/* src/components/ChatLog.css */ .chat-log { margin: auto; max-width: 50rem; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 107c750d2..0118f992e 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,3 +1,4 @@ +// src/components/ChatLog.js import React from 'react'; import './ChatLog.css'; import ChatEntry from './ChatEntry'; diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index e8892b4d4..6b19fc189 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -1,3 +1,4 @@ +// src/components/TimeStamp.js import { DateTime } from 'luxon'; import PropTypes from 'prop-types'; From a88fb58cd03e6053764e152cf6601d1cca1d9dea Mon Sep 17 00:00:00 2001 From: MoyoMoz Date: Mon, 14 Aug 2023 16:10:17 -0700 Subject: [PATCH 10/11] Update ChatEntry and ChatLog components to handle likes feature and address test failures. --- src/components/ChatEntry.js | 26 ++++++++++---------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 61bcc550b..f4cde0277 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,8 +1,8 @@ -// src/components/ChatEntry.js + import React, { useState } from 'react'; -import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; +import './ChatEntry.css'; const ChatEntry = (props) => { @@ -11,28 +11,22 @@ const ChatEntry = (props) => { const toggleLiked = () => { const newLikedStatus = !liked; setLiked(newLikedStatus); - // Pass the new liked status to the onLike function - props.onLike(newLikedStatus); + props.onLike && props.onLike(newLikedStatus); // Safeguard in case onLike is not provided } return ( -
- -

{props.sender}

- +
+

{props.sender}

-

{props.body}

-

- -

-
-
); -}; +} ChatEntry.propTypes = { sender: PropTypes.string.isRequired, @@ -42,4 +36,4 @@ ChatEntry.propTypes = { onLike: PropTypes.func.isRequired }; -export default ChatEntry; +export default ChatEntry; \ No newline at end of file From 83d79022fc1a2b2a4282f6316a452b2b175faca4 Mon Sep 17 00:00:00 2001 From: MoyoMoz Date: Mon, 14 Aug 2023 16:20:11 -0700 Subject: [PATCH 11/11] Update ChatEntry component to make onLike prop optional and safeguard its invocation. --- src/components/ChatEntry.js | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index f4cde0277..82909f258 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,35 +5,37 @@ import TimeStamp from './TimeStamp'; import './ChatEntry.css'; const ChatEntry = (props) => { - const [liked, setLiked] = useState(props.liked); const toggleLiked = () => { const newLikedStatus = !liked; setLiked(newLikedStatus); - props.onLike && props.onLike(newLikedStatus); // Safeguard in case onLike is not provided - } + + // Safeguard the invocation of onLike + if (props.onLike) { + props.onLike(newLikedStatus); + } + }; return (
-

{props.sender}

-
-

{props.body}

-

- -
+

{props.sender}

+

{props.body}

+ +
); -} +}; ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - onLike: PropTypes.func.isRequired + // Make onLike prop optional + onLike: PropTypes.func }; export default ChatEntry; \ No newline at end of file