From 6f82b310e7ea872a0e7c63edb37d69415601ce32 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:29:53 +0200 Subject: [PATCH 01/15] update ChatEntry to accept props --- src/components/ChatEntry.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 15c56f96b..2f8cda0b6 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,12 +1,16 @@ +import PropTypes from 'prop-types'; + import './ChatEntry.css'; -const ChatEntry = () => { +const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ +

From eff5419daf3375f48ef517fd85928d862c63644c Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:30:34 +0200 Subject: [PATCH 02/15] add chatentry proptypes --- src/components/ChatEntry.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 2f8cda0b6..6ca1a988a 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import './ChatEntry.css'; +import { send } from 'vite'; const ChatEntry = (props) => { return ( @@ -18,7 +19,9 @@ 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 1727ea51e012d061a896f78b59cdf6c8cf740aae Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:32:11 +0200 Subject: [PATCH 03/15] updated imports --- src/components/ChatEntry.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 6ca1a988a..991a6d52c 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,7 +1,6 @@ import PropTypes from 'prop-types'; - +import Timestamp from './Timestamp' import './ChatEntry.css'; -import { send } from 'vite'; const ChatEntry = (props) => { return ( From ff18afef7b6dcb7d5d196aa833bee87e4cf5c674 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:36:33 +0200 Subject: [PATCH 04/15] update App with ChatEntry component --- src/App.jsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 14a7f684d..6198c3c60 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,21 @@ +import ChatEntry from './components/ChatEntry'; +import messages from './data/messages.json'; import './App.css'; const App = () => { + const firstMessage = messages[0]; + return (
-

Application title

+

Camille's Chatroom

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); From c5f4dcd6258a90513b7fe4f43823845b5fe20beb Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:41:37 +0200 Subject: [PATCH 05/15] add and implement chatlog --- src/components/ChatLog.jsx | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/ChatLog.jsx diff --git a/src/components/ChatLog.jsx b/src/components/ChatLog.jsx new file mode 100644 index 000000000..012c019d8 --- /dev/null +++ b/src/components/ChatLog.jsx @@ -0,0 +1,35 @@ +import ChatEntry from "./ChatEntry"; +import PropTypes from "prop-types"; +import "./ChatLog.css"; + +const ChatLog = (props) => { + const chatEntries = props.messages.map((message) => { + return ( + + ); + }); + + return ( +
+ {chatEntries} +
+ ); +}; + +ChatLog.propTypes = { + messages: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + }) + ).isRequired, +}; + +export default ChatLog; \ No newline at end of file From 2a0476debc462226484f52899718dd0aaa6e53a8 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:42:59 +0200 Subject: [PATCH 06/15] updated app with chatlog component --- src/App.jsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 6198c3c60..ea2f880d2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,7 @@ import ChatEntry from './components/ChatEntry'; import messages from './data/messages.json'; import './App.css'; +import ChatLog from './components/ChatLog'; const App = () => { const firstMessage = messages[0]; @@ -11,11 +12,7 @@ const App = () => {

Camille's Chatroom

- +
); From 1887207f253541e64e898bcc661b030e563bea4c Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:43:41 +0200 Subject: [PATCH 07/15] update chatentry to use id prop --- src/components/ChatEntry.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 991a6d52c..953ea3f87 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -18,6 +18,7 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { + id: PropTypes.string.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, From 85ebba88a5a01721d55b5e34effbe28e865c9f68 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 01:50:07 +0200 Subject: [PATCH 08/15] update chatentry to handle likes: --- src/App.jsx | 2 -- src/components/ChatEntry.jsx | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index ea2f880d2..d4351a167 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,8 +4,6 @@ import './App.css'; import ChatLog from './components/ChatLog'; const App = () => { - const firstMessage = messages[0]; - return (
diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index 953ea3f87..d1955780b 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -3,6 +3,8 @@ import Timestamp from './Timestamp' import './ChatEntry.css'; const ChatEntry = (props) => { + const heartColor = props.liked ? '❤️' : '🤍'; + return (

{props.sender}

@@ -11,7 +13,9 @@ const ChatEntry = (props) => {

- +
); From af068952913db5026aaf4ab6a939ab581d2c0ec1 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 15:54:57 +0200 Subject: [PATCH 09/15] refactor and fixed heart widget --- src/App.jsx | 20 +++++++++++++++++--- src/components/ChatEntry.jsx | 2 ++ src/components/ChatLog.jsx | 21 +++++++++++++-------- 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d4351a167..8f2be7188 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,16 +1,30 @@ -import ChatEntry from './components/ChatEntry'; +import { useState } from 'react'; +import ChatLog from './components/ChatLog'; import messages from './data/messages.json'; import './App.css'; -import ChatLog from './components/ChatLog'; const App = () => { + const [chatData, setChatData] = useState(messages); + + const toggleLike = (id) => { + setChatData(chatData.map((message) => { + if (message.id === id) { + return { ...message, liked: !message.liked }; + } + return message; + })); + }; + return (

Camille's Chatroom

+
+ {chatData.filter((msg) => msg.liked).length} ❤️s +
- +
); diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index d1955780b..cedd6cbea 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -26,6 +26,8 @@ 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.jsx b/src/components/ChatLog.jsx index 012c019d8..15617630d 100644 --- a/src/components/ChatLog.jsx +++ b/src/components/ChatLog.jsx @@ -1,15 +1,18 @@ -import ChatEntry from "./ChatEntry"; import PropTypes from "prop-types"; +import ChatEntry from "./ChatEntry"; import "./ChatLog.css"; const ChatLog = (props) => { - const chatEntries = props.messages.map((message) => { + const chatEntries = props.entries.map((entry) => { return ( ); }); @@ -22,14 +25,16 @@ const ChatLog = (props) => { }; ChatLog.propTypes = { - messages: PropTypes.arrayOf( + entries: PropTypes.arrayOf( PropTypes.shape({ - id: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }) ).isRequired, + onLike: PropTypes.func.isRequired, }; export default ChatLog; \ No newline at end of file From 4eb164b80c490a9c234f2d19a1cf0d2bf21ac5a8 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 15:59:11 +0200 Subject: [PATCH 10/15] app.css fixes to num like count --- src/App.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index d97beb4e6..6311e1b7a 100644 --- a/src/App.css +++ b/src/App.css @@ -38,11 +38,13 @@ font-size:0.8em; padding-left: 1em; padding-right: 1em; + padding-top: 0.5em; + padding-bottom: 0.5em; } #App #heartWidget { font-size: 1.5em; - margin: 1em + margin: 1em; } #App span { From 2f90da7da997c2af1d7191c1c8b2cdfee8581060 Mon Sep 17 00:00:00 2001 From: Camille Date: Mon, 7 Jul 2025 16:02:45 +0200 Subject: [PATCH 11/15] fixed timestamp naming in chatentry --- src/components/ChatEntry.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ChatEntry.jsx b/src/components/ChatEntry.jsx index cedd6cbea..ce73f645d 100644 --- a/src/components/ChatEntry.jsx +++ b/src/components/ChatEntry.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import Timestamp from './Timestamp' +import TimeStamp from './Timestamp' import './ChatEntry.css'; const ChatEntry = (props) => { @@ -11,7 +11,7 @@ const ChatEntry = (props) => {

{props.body}

- +