From d91b1a036fffcc23c0d42960c9d0ecf84a73ff0c Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Wed, 10 Dec 2025 15:45:35 -0800 Subject: [PATCH 01/12] Updated component Add to display Chat log and Chat entry. Updated component Chat log to display Chat entry. Updated chat Entry to show the text from messages.json --- src/App.jsx | 14 ++++++++++---- src/components/ChatEntry.jsx | 26 ++++++++++++++------------ src/components/ChatLog.jsx | 21 +++++++++++++++++++++ 3 files changed, 45 insertions(+), 16 deletions(-) create mode 100644 src/components/ChatLog.jsx diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..8a156394b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,20 @@ import './App.css'; - +import { useState } from 'react'; +import ChatLog from './components/ChatLog.jsx'; +import messages from './data/messages.json'; + const App = () => { + const [entries] = useState(messages); + const localSender = 'Vladimir'; + return (
-

Application title

+

Chat Between Vladimir and Estragon

+

0 ❤️s

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index fe05efa0f..1a37ced9d 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,21 +1,23 @@ import './ChatEntry.css'; +import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + +const ChatEntry = ({sender, body, timeStamp, localSender}) => { + const isLocal = sender === localSender; + const entryClass = isLocal ? 'local' : 'remote'; -const ChatEntry = () => { return ( - // Replace the outer tag name with a semantic element that fits our use case - -

Replace with name of sender

+
+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+ +

+
- +
); }; -ChatEntry.propTypes = { - // Fill with correct proptypes -}; - export default ChatEntry; diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..249bca88d --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,21 @@ +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; + +const ChatLog = ({entries, localSender}) => { + return ( +
+ {entries.map((entry) => ( + + ))} +
+ ); +}; + +export default ChatLog; \ No newline at end of file From 202327bcd22005448033d2bd68ddf981f0c3edc1 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 13:54:44 -0800 Subject: [PATCH 02/12] Implement Wave 3: like functionality in chat entries and total count number displays at the top of the screen --- src/App.jsx | 27 +++++++++++++++++++++++---- src/components/ChatEntry.jsx | 25 +++++++++++++++++++------ src/components/ChatLog.jsx | 20 ++++++++++++++++++-- 3 files changed, 60 insertions(+), 12 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 8a156394b..9b05a4b8e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,19 +2,38 @@ import './App.css'; import { useState } from 'react'; import ChatLog from './components/ChatLog.jsx'; import messages from './data/messages.json'; - + const App = () => { - const [entries] = useState(messages); + const [entries, setEntries] = useState(messages); const localSender = 'Vladimir'; + const totalLikes = entries.reduce((total, entry) => { + return entry.isLiked ? total + 1 : total; + }, 0); + + const toggleHeart = (entryId) => { + setEntries(entries => { + return entries.map(entry => { + if (entry.id === entryId) { + return { ...entry, isLiked: !entry.isLiked }; + } else { + return entry; + } + }); + }); + }; + return (

Chat Between Vladimir and Estragon

-

0 ❤️s

+

{totalLikes} ❤️s

- +
); diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 1a37ced9d..8aeca2d68 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -2,22 +2,35 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({sender, body, timeStamp, localSender}) => { - const isLocal = sender === localSender; +const ChatEntry = (props) => { + const isLocal = props.sender === props.localSender; const entryClass = isLocal ? 'local' : 'remote'; + const isLiked = props.isLiked ? '❤️' : '🤍'; + const isLikedButtonClicked = () => { + props.onToggleHeart(props.id); + }; return (
-

{sender}

+

{props.sender}

-

{body}

+

{props.body}

- +

- +
); }; export default ChatEntry; + +ChatEntry.propTypes = { + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + localSender: PropTypes.string.isRequired, + isLiked: PropTypes.bool.isRequired, + onToggleHeart: PropTypes.func.isRequired, +}; \ No newline at end of file diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index 249bca88d..9d2436b05 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -1,7 +1,8 @@ import './ChatLog.css'; import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; -const ChatLog = ({entries, localSender}) => { +const ChatLog = ({entries, localSender, onToggleHeart}) => { return (
{entries.map((entry) => ( @@ -12,10 +13,25 @@ const ChatLog = ({entries, localSender}) => { body={entry.body} timeStamp={entry.timeStamp} localSender={localSender} + isLiked={entry.isLiked} + onToggleHeart={onToggleHeart} /> ))}
); }; -export default ChatLog; \ No newline at end of file +export default ChatLog; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + }) + ).isRequired, + localSender: PropTypes.string.isRequired, + onToggleHeart: PropTypes.func.isRequired, +}; \ No newline at end of file From d8330d5b2f92b2b26275e9a6128176ab97c4132b Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 19:44:26 -0800 Subject: [PATCH 03/12] Implement Optional Color Choice: added Header, HeartCounter, and SenderColorPicker components; add corresponding styles --- src/App.css | 64 ------------------------ src/App.jsx | 6 +-- src/components/App.css | 74 ++++++++++++++++++++++++++++ src/components/Header.css | 20 ++++++++ src/components/Header.jsx | 19 +++++++ src/components/HeartCounter.css | 18 +++++++ src/components/HeartCounter.jsx | 11 +++++ src/components/SenderColorPicker.css | 31 ++++++++++++ src/components/SenderColorPicker.jsx | 19 +++++++ 9 files changed, 194 insertions(+), 68 deletions(-) create mode 100644 src/components/App.css create mode 100644 src/components/Header.css create mode 100644 src/components/Header.jsx create mode 100644 src/components/HeartCounter.css create mode 100644 src/components/HeartCounter.jsx create mode 100644 src/components/SenderColorPicker.css create mode 100644 src/components/SenderColorPicker.jsx diff --git a/src/App.css b/src/App.css index d97beb4e6..6867fbf5f 100644 --- a/src/App.css +++ b/src/App.css @@ -2,73 +2,9 @@ background-color: #87cefa; } -#App header { - background-color: #222; - color: #fff; - padding-bottom: 0.5rem; - position: fixed; - width: 100%; - z-index: 100; - text-align: center; - align-items: center; -} - #App main { padding-left: 2em; padding-right: 2em; padding-bottom: 5rem; padding-top: 10rem; -} - -#App h1 { - font-size: 1.5em; - text-align: center; - display: inline-block; -} - -#App header section { - background-color: #e0ffff; -} - -#App .widget { - display: inline-block; - line-height: 0.5em; - border-radius: 10px; - color: black; - font-size:0.8em; - padding-left: 1em; - padding-right: 1em; -} - -#App #heartWidget { - font-size: 1.5em; - margin: 1em -} - -#App span { - display: inline-block -} - -.red { - color: #b22222 -} - -.orange { - color: #e6ac00 -} - -.yellow { - color: #e6e600 -} - -.green { - color: green -} - -.blue { - color: blue -} - -.purple { - color: purple } \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 9b05a4b8e..8e8bc4c25 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,7 @@ import './App.css'; import { useState } from 'react'; import ChatLog from './components/ChatLog.jsx'; import messages from './data/messages.json'; +import Header from './components/Header.jsx'; const App = () => { const [entries, setEntries] = useState(messages); @@ -25,10 +26,7 @@ const App = () => { return (
-
-

Chat Between Vladimir and Estragon

-

{totalLikes} ❤️s

-
+
{ + return ( +
+

{title}

+ +
+ + + +
+
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/HeartCounter.css b/src/components/HeartCounter.css new file mode 100644 index 000000000..e02387f22 --- /dev/null +++ b/src/components/HeartCounter.css @@ -0,0 +1,18 @@ +#App .widget { + display: inline-block; + line-height: 0.5em; + border-radius: 10px; + color: black; + font-size: 0.8em; + padding-left: 1em; + padding-right: 1em; +} + +#App #heartWidget { + font-size: 1.5em; + margin: 1em; +} + +#App span { + display: inline-block; +} \ No newline at end of file diff --git a/src/components/HeartCounter.jsx b/src/components/HeartCounter.jsx new file mode 100644 index 000000000..d3fc36738 --- /dev/null +++ b/src/components/HeartCounter.jsx @@ -0,0 +1,11 @@ +import './HeartCounter.css'; + +const HeartCounter = ({ totalLikes }) => { + return ( +
+ {totalLikes} ❤️s +
+ ); +}; + +export default HeartCounter; diff --git a/src/components/SenderColorPicker.css b/src/components/SenderColorPicker.css new file mode 100644 index 000000000..521f0341b --- /dev/null +++ b/src/components/SenderColorPicker.css @@ -0,0 +1,31 @@ +span { + display: inline-block +} + +.red { + color: #b22222 +} + +.orange { + color: #e6ac00 +} + +.yellow { + color: #e6e600 +} + +.green { + color: green +} + +.blue { + color: blue +} + +.purple { + color: purple +} + +.senderColorPicker span { + margin: 0 0.15em; +} \ No newline at end of file diff --git a/src/components/SenderColorPicker.jsx b/src/components/SenderColorPicker.jsx new file mode 100644 index 000000000..5bb13a820 --- /dev/null +++ b/src/components/SenderColorPicker.jsx @@ -0,0 +1,19 @@ +import './SenderColorPicker.css'; + +const SenderColorPicker = ({ senderName }) => { + return ( +
+

{senderName}'s color:

+ + + + + + + + +
+ ); +}; + +export default SenderColorPicker; \ No newline at end of file From c1db4ddd1e5022cd9bf50bd276cac19e3c31241c Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 20:17:31 -0800 Subject: [PATCH 04/12] Add font color selection for chat entries and remove unused CSS file - Introduced functionality to choose font colors for local and remote senders. - Updated components: App, Header, ChatLog, ChatEntry, and SenderColorPicker to support color selection. - Removed App.css as it was no longer needed. --- src/App.jsx | 21 +++++++- src/components/App.css | 74 ---------------------------- src/components/ChatEntry.jsx | 4 +- src/components/ChatLog.jsx | 4 +- src/components/Header.jsx | 6 +-- src/components/SenderColorPicker.css | 4 ++ src/components/SenderColorPicker.jsx | 20 +++++--- 7 files changed, 45 insertions(+), 88 deletions(-) delete mode 100644 src/components/App.css diff --git a/src/App.jsx b/src/App.jsx index 8e8bc4c25..2d1d028f1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,6 +6,8 @@ import Header from './components/Header.jsx'; const App = () => { const [entries, setEntries] = useState(messages); + const [fontColorForLocalSender, setFontColorForLocalSender] = useState('black'); + const [fontColorForRemoteSender, setFontColorForRemoteSender] = useState('black'); const localSender = 'Vladimir'; const totalLikes = entries.reduce((total, entry) => { @@ -24,14 +26,29 @@ const App = () => { }); }; + const chooseFontColor = (senderName, color) => { + if (senderName === localSender) { + setFontColorForLocalSender(color); + } else { + setFontColorForRemoteSender(color); + } + }; + return (
-
+
+ onToggleHeart={toggleHeart} + fontColorForLocalSender={fontColorForLocalSender} + fontColorForRemoteSender={fontColorForRemoteSender} + />
); diff --git a/src/components/App.css b/src/components/App.css deleted file mode 100644 index d97beb4e6..000000000 --- a/src/components/App.css +++ /dev/null @@ -1,74 +0,0 @@ -#App { - background-color: #87cefa; -} - -#App header { - background-color: #222; - color: #fff; - padding-bottom: 0.5rem; - position: fixed; - width: 100%; - z-index: 100; - text-align: center; - align-items: center; -} - -#App main { - padding-left: 2em; - padding-right: 2em; - padding-bottom: 5rem; - padding-top: 10rem; -} - -#App h1 { - font-size: 1.5em; - text-align: center; - display: inline-block; -} - -#App header section { - background-color: #e0ffff; -} - -#App .widget { - display: inline-block; - line-height: 0.5em; - border-radius: 10px; - color: black; - font-size:0.8em; - padding-left: 1em; - padding-right: 1em; -} - -#App #heartWidget { - font-size: 1.5em; - margin: 1em -} - -#App span { - display: inline-block -} - -.red { - color: #b22222 -} - -.orange { - color: #e6ac00 -} - -.yellow { - color: #e6e600 -} - -.green { - color: green -} - -.blue { - color: blue -} - -.purple { - color: purple -} \ No newline at end of file diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 8aeca2d68..20296d72c 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -10,11 +10,13 @@ const ChatEntry = (props) => { props.onToggleHeart(props.id); }; + const fontColor = isLocal ? props.fontColorForLocalSender : props.fontColorForRemoteSender; + return (

{props.sender}

-

{props.body}

+

{props.body}

diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index 9d2436b05..6dc9f5e2c 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -2,7 +2,7 @@ import './ChatLog.css'; import ChatEntry from './ChatEntry'; import PropTypes from 'prop-types'; -const ChatLog = ({entries, localSender, onToggleHeart}) => { +const ChatLog = ({entries, localSender, onToggleHeart, fontColorForLocalSender, fontColorForRemoteSender}) => { return (
{entries.map((entry) => ( @@ -15,6 +15,8 @@ const ChatLog = ({entries, localSender, onToggleHeart}) => { localSender={localSender} isLiked={entry.isLiked} onToggleHeart={onToggleHeart} + fontColorForLocalSender={fontColorForLocalSender} + fontColorForRemoteSender={fontColorForRemoteSender} /> ))}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 4e38e5372..be25e6d4a 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -2,15 +2,15 @@ import './Header.css'; import HeartCounter from './HeartCounter.jsx'; import SenderColorPicker from './SenderColorPicker.jsx'; -const Header = ({ title, totalLikes }) => { +const Header = ({ title, totalLikes, chooseFontColor }) => { return (

{title}

- + - +
); diff --git a/src/components/SenderColorPicker.css b/src/components/SenderColorPicker.css index 521f0341b..53fc8d601 100644 --- a/src/components/SenderColorPicker.css +++ b/src/components/SenderColorPicker.css @@ -26,6 +26,10 @@ span { color: purple } +.black { + color: black +} + .senderColorPicker span { margin: 0 0.15em; } \ No newline at end of file diff --git a/src/components/SenderColorPicker.jsx b/src/components/SenderColorPicker.jsx index 5bb13a820..a0d61985b 100644 --- a/src/components/SenderColorPicker.jsx +++ b/src/components/SenderColorPicker.jsx @@ -1,16 +1,22 @@ import './SenderColorPicker.css'; -const SenderColorPicker = ({ senderName }) => { +const SenderColorPicker = ({ senderName, chooseFontColor }) => { + + const colorButtonClicked = (color) => { + chooseFontColor(senderName, color); + }; + return (

{senderName}'s color:

- - - - - - + + + + + + +
); From c12ceb401921b49ba67e767044abde5cb904af35 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 21:10:24 -0800 Subject: [PATCH 05/12] Implement dynamic font color change in header in Header and SenderColorPicker components --- src/App.jsx | 1 - src/components/Header.jsx | 23 +++++++++++++++++++---- src/components/SenderColorPicker.jsx | 6 +++++- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 2d1d028f1..ae74e0783 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -37,7 +37,6 @@ const App = () => { return (
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index be25e6d4a..5f8c31b68 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,16 +1,31 @@ +import { useState } from 'react'; import './Header.css'; import HeartCounter from './HeartCounter.jsx'; import SenderColorPicker from './SenderColorPicker.jsx'; -const Header = ({ title, totalLikes, chooseFontColor }) => { +const Header = ({ totalLikes, chooseFontColor }) => { + const [localColor, setLocalColor] = useState('white'); + const [remoteColor, setRemoteColor] = useState('white'); + + const changeFontColor = (senderName, color) => { + if (senderName === 'Vladimir') { + setLocalColor(color); + } else { + setRemoteColor(color); + } + chooseFontColor(senderName, color); + }; + return (
-

{title}

+

+ Chat between Vladimir and Estragon +

- + - +
); diff --git a/src/components/SenderColorPicker.jsx b/src/components/SenderColorPicker.jsx index a0d61985b..24626fe87 100644 --- a/src/components/SenderColorPicker.jsx +++ b/src/components/SenderColorPicker.jsx @@ -1,14 +1,18 @@ +import { useState } from 'react'; import './SenderColorPicker.css'; const SenderColorPicker = ({ senderName, chooseFontColor }) => { + const [color, setColor] = useState('black'); + const colorButtonClicked = (color) => { chooseFontColor(senderName, color); + setColor(color); }; return (
-

{senderName}'s color:

+

{senderName}'s color:

From 323c4e0dbafd2c8bac030a4f68e2151039bc5296 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 21:12:57 -0800 Subject: [PATCH 06/12] Update header background color for improved visibility --- src/components/Header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.css b/src/components/Header.css index 8927dc810..217e9d7d7 100644 --- a/src/components/Header.css +++ b/src/components/Header.css @@ -1,5 +1,5 @@ #App header { - background-color: #222; + background-color: #2c2c2c; color: #fff; padding-bottom: 0.5rem; position: fixed; From 14b8af9c77fccd42c4f252e57722f43e242c69e1 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 21:58:17 -0800 Subject: [PATCH 07/12] Wrap entry time and like button in a flex container for better layout --- src/components/ChatEntry.css | 6 ++++++ src/components/ChatEntry.jsx | 10 ++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..de7f8947f 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -97,4 +97,10 @@ button { .chat-entry.remote .entry-bubble:hover::before { background-color: #a9f6f6; +} + +.entry-attributes { + display: flex; + align-items: center; + justify-content: space-between; } \ No newline at end of file diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 20296d72c..5ac2947cb 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -17,10 +17,12 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

-

- -

- +
+

+ +

+ +
); From 5d6daa3d9e24bc43c60abbec88e6d769955dbe99 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 22:35:09 -0800 Subject: [PATCH 08/12] Fix button padding and add styling for like button --- src/components/ChatEntry.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index de7f8947f..40f6c4d16 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -2,7 +2,7 @@ button { background: none; color: inherit; border: none; - padding: 10px; + padding: 10px; font: inherit; cursor: pointer; outline: inherit; @@ -103,4 +103,12 @@ button { display: flex; align-items: center; justify-content: space-between; +} + +.like { + padding: 0; + width: 20px; + height: 20px; + align-items: center; + line-height: 1; } \ No newline at end of file From d5138f8314e64580f3b8a7012e8df5dcc84d0a7f Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 23:54:06 -0800 Subject: [PATCH 09/12] Update propTypes for ChatEntry to make isLiked optional --- src/components/ChatEntry.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 5ac2947cb..5ac0398dc 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -35,6 +35,6 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, localSender: PropTypes.string.isRequired, - isLiked: PropTypes.bool.isRequired, + isLiked: PropTypes.bool, onToggleHeart: PropTypes.func.isRequired, }; \ No newline at end of file From 600f8dd6f489ee500dc37e9add0ad78c1be67c05 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 23:56:01 -0800 Subject: [PATCH 10/12] Make localSender and onToggleHeart propTypes optional in ChatLog --- src/components/ChatLog.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx index 6dc9f5e2c..d98a5de38 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -34,6 +34,6 @@ ChatLog.propTypes = { timeStamp: PropTypes.string.isRequired, }) ).isRequired, - localSender: PropTypes.string.isRequired, - onToggleHeart: PropTypes.func.isRequired, + localSender: PropTypes.string, + onToggleHeart: PropTypes.func, }; \ No newline at end of file From c7445dc05ccf13aec7607d8b6158a3ae5e5f014b Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 23:57:32 -0800 Subject: [PATCH 11/12] Make localSender propType optional in ChatEntry --- src/components/ChatEntry.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 5ac0398dc..268cd6db9 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -34,7 +34,7 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - localSender: PropTypes.string.isRequired, + localSender: PropTypes.string, isLiked: PropTypes.bool, onToggleHeart: PropTypes.func.isRequired, }; \ No newline at end of file From deddd0e3611cd07a72f4c04f27a18a7b83d2e828 Mon Sep 17 00:00:00 2001 From: Ekaterna Date: Mon, 15 Dec 2025 23:59:55 -0800 Subject: [PATCH 12/12] Make onToggleHeart propType optional in ChatEntry --- src/components/ChatEntry.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 268cd6db9..09ecc2628 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -36,5 +36,5 @@ ChatEntry.propTypes = { timeStamp: PropTypes.string.isRequired, localSender: PropTypes.string, isLiked: PropTypes.bool, - onToggleHeart: PropTypes.func.isRequired, + onToggleHeart: PropTypes.func, }; \ No newline at end of file