From 7a2fce604e6c05565722a69338f5e4f2ce5ef57c Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 16 Dec 2024 12:21:15 -0500 Subject: [PATCH 1/5] added functionaloty to wave 3 - integration tests --- src/App.css | 14 +++++++++- src/App.jsx | 46 ++++++++++++++++++++++++++++----- src/components/ChatEntry.jsx | 30 ++++++++++++++++----- src/components/ChatLog.jsx | 41 +++++++++++++++++++++++++++++ src/components/ChatLog.test.jsx | 2 +- src/components/TimeStamp.jsx | 1 - 6 files changed, 119 insertions(+), 15 deletions(-) create mode 100644 src/components/ChatLog.jsx diff --git a/src/App.css b/src/App.css index d97beb4e6..d0dd43e6a 100644 --- a/src/App.css +++ b/src/App.css @@ -5,7 +5,7 @@ #App header { background-color: #222; color: #fff; - padding-bottom: 0.5rem; + padding: 5 rem; position: fixed; width: 100%; z-index: 100; @@ -13,6 +13,13 @@ align-items: center; } +#App .likes-background-color { + background-color: #87cefa; + margin: 0; + border-style: dotted; + border-color: whitesmoke; +} + #App main { padding-left: 2em; padding-right: 2em; @@ -30,6 +37,11 @@ background-color: #e0ffff; } +#App .header-fonts { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-style:italic; +} + #App .widget { display: inline-block; line-height: 0.5em; diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..7200dfb80 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,51 @@ import './App.css'; +import ChatLog from '/src/components/ChatLog'; +import DATA from '/src/data/messages.json'; +import { useState } from 'react'; + + +function App() { + const [entries, setEntries] = useState(DATA); + + + + const toggleLikeBtnClick= (id) => { + console.log(`Currently liked message id: ${id}`); + + // Refactoring to incorporate func passing state update + const newEntries = entries.map(entry=>{ + if (entry.id == id){ + return {...entry, liked: !entry.liked}; + } + else{ + return entry; + } + }); + setEntries(newEntries); + }; + + const totalLikesCount = entries.reduce((count, entry) => (entry.liked? count+1: count), 0); + + -const App = () => { return (
-
-

Application title

+
+

Chat Between Vladimir and Estragon

+

{totalLikesCount} ❤️s

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + {/* // Wave 01: Render one ChatEntry component */} + {/* Wave 02: Render ChatLog component */} + + + +
); }; - export default App; diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 15c56f96b..a25ecc9dd 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,20 +1,38 @@ +import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; import './ChatEntry.css'; -const ChatEntry = () => { + +const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeToggle}) => { + const likeButtonClicked = () => { + onLikeToggle(id); + }; + + const likeStatus = liked? '❤️': '🤍'; + console.log(likeStatus); + console.log(liked); + return (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+ +

+
); }; 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, + onLikeToggle: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..0b9e7bc67 --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; + + +// const ChatLog = (props) => { +const ChatLog = ({entries, onLikeBtnToggle}) =>{ + const chatComponents = entries.map((entry) => { + return( + + ); + }); + + + return ( + <> + + + ); +}; + + + +ChatLog.propTypes = { +// Implement + entries: PropTypes.arrayOf(PropTypes.shape({ + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired + })).isRequired, + onLikeBtnToggle: PropTypes.func.isRequired, +}; + +export default ChatLog; \ No newline at end of file diff --git a/src/components/ChatLog.test.jsx b/src/components/ChatLog.test.jsx index dfcfeda99..27aa676e8 100644 --- a/src/components/ChatLog.test.jsx +++ b/src/components/ChatLog.test.jsx @@ -1,4 +1,4 @@ -import ChatLog from './ChatLog'; +import ChatLog from '/src/components/ChatLog'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; diff --git a/src/components/TimeStamp.jsx b/src/components/TimeStamp.jsx index e8892b4d4..28e985055 100644 --- a/src/components/TimeStamp.jsx +++ b/src/components/TimeStamp.jsx @@ -5,7 +5,6 @@ const TimeStamp = (props) => { const time = DateTime.fromISO(props.time); const absolute = time.toFormat('MMMM Do YYYY, h:mm:ss a'); const relative = time.toRelative(); - return {relative}; }; From 3071b79662bcc9ce0f3987d12a12b7ab9817eca4 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 16 Dec 2024 12:44:57 -0500 Subject: [PATCH 2/5] removed commented lines --- src/App.jsx | 2 -- src/components/ChatLog.jsx | 4 ---- 2 files changed, 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 7200dfb80..dc803b09c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -10,8 +10,6 @@ function App() { const toggleLikeBtnClick= (id) => { - console.log(`Currently liked message id: ${id}`); - // Refactoring to incorporate func passing state update const newEntries = entries.map(entry=>{ if (entry.id == id){ diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index 0b9e7bc67..7803fb6d6 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -2,8 +2,6 @@ import PropTypes from 'prop-types'; import './ChatLog.css'; import ChatEntry from './ChatEntry'; - -// const ChatLog = (props) => { const ChatLog = ({entries, onLikeBtnToggle}) =>{ const chatComponents = entries.map((entry) => { return( @@ -25,8 +23,6 @@ const ChatLog = ({entries, onLikeBtnToggle}) =>{ ); }; - - ChatLog.propTypes = { // Implement entries: PropTypes.arrayOf(PropTypes.shape({ From 9ebc32b9dd546fe9a66f1ead242dd14af4e31333 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 16 Dec 2024 12:49:57 -0500 Subject: [PATCH 3/5] removed console.log() --- src/components/ChatEntry.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index a25ecc9dd..b80475ad9 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -9,8 +9,6 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeToggle}) => { }; const likeStatus = liked? '❤️': '🤍'; - console.log(likeStatus); - console.log(liked); return (
From 8ee2492ae6ee05905a0c729b9e403be417bcf2b1 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 16 Dec 2024 13:17:03 -0500 Subject: [PATCH 4/5] implementing optional enhancements --- src/components/ChatEntry.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index b80475ad9..4da98c02d 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -8,17 +8,19 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeToggle}) => { onLikeToggle(id); }; - const likeStatus = liked? '❤️': '🤍'; + const locateSender = () => { + return (sender === 'Estragon')? 'local': 'remote'; + }; return ( -
+

{sender}

{body}

- +
); From ff14fe6e78a16d73e1e2f43c8671dd8611bb37b3 Mon Sep 17 00:00:00 2001 From: Aleida Vieyra Date: Mon, 16 Dec 2024 14:03:53 -0500 Subject: [PATCH 5/5] implemented more optional enhancements --- src/App.jsx | 24 ++++++++++++++++++------ src/components/ChatEntry.jsx | 2 +- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index dc803b09c..b6014bf00 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,30 +6,42 @@ import { useState } from 'react'; function App() { const [entries, setEntries] = useState(DATA); - - + const [colors, setTextColor] = useState(DATA); const toggleLikeBtnClick= (id) => { // Refactoring to incorporate func passing state update - const newEntries = entries.map(entry=>{ + setEntries(entries => entries.map(entry=>{ if (entry.id == id){ return {...entry, liked: !entry.liked}; } else{ return entry; } - }); - setEntries(newEntries); + })); }; const totalLikesCount = entries.reduce((count, entry) => (entry.liked? count+1: count), 0); + const identifyAllChatMembers = () => { + const senders = [...new Set(entries.map(entry => entry.sender))]; + let participant1 = ''; + let participant2 = ''; + for (const sender of senders) { + if (!participant1) { + participant1 = sender; + } + else if (participant1 && !participant2) { + participant2 = sender; + } + }; + return `${participant1} and ${participant2}`; + }; return (
-

Chat Between Vladimir and Estragon

+

Chat Between {identifyAllChatMembers()}

{totalLikesCount} ❤️s

diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 4da98c02d..68492580c 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -9,7 +9,7 @@ const ChatEntry = ({id, sender, body, timeStamp, liked, onLikeToggle}) => { }; const locateSender = () => { - return (sender === 'Estragon')? 'local': 'remote'; + return (sender === 'Estragon')? 'remote': 'local'; }; return (