From 4865840d58df9443e95a8cb8063d205dc66466a1 Mon Sep 17 00:00:00 2001 From: Valerie Valentin Date: Thu, 15 Jun 2023 13:49:21 -0700 Subject: [PATCH 1/6] Completed setup --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index c10859093..dcd9f3c88 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import './App.css'; import chatMessages from './data/messages.json'; const App = () => { + console.log(chatMessages); return (
From 7de7489dcceda6f7d4fd58555db0725ce4c62bd6 Mon Sep 17 00:00:00 2001 From: Valerie Valentin Date: Mon, 19 Jun 2023 23:04:15 -0700 Subject: [PATCH 2/6] FinishedWave 3 --- src/App.css | 1 + src/App.js | 36 ++++++++++++++++++++++++++++++---- src/components/ChatEntry.js | 33 +++++++++++++++++++++++++------ src/components/ChatLog.js | 39 +++++++++++++++++++++++++++++++++++++ 4 files changed, 99 insertions(+), 10 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.css b/src/App.css index d97beb4e6..f56752a0a 100644 --- a/src/App.css +++ b/src/App.css @@ -28,6 +28,7 @@ #App header section { background-color: #e0ffff; + color: black; } #App .widget { diff --git a/src/App.js b/src/App.js index dcd9f3c88..fba914178 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,45 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; +import { useState } from 'react'; const App = () => { - console.log(chatMessages); + const [chatData, setChatData] = useState(chatMessages); + + const onUpdateLikes = (entryToUpdate) => { + const entries = chatData.map((entry) => { + if (entry.id === entryToUpdate.id) { + return entryToUpdate; + } + return entry; + }); + setChatData(entries); + }; + + const calcTotalLikes = (Data) => { + let totalLikes = 0; + for (const chat of Data) { + if (chat.liked) { + totalLikes += 1; + } + } + return totalLikes; + }; + +const totalLikeCount = calcTotalLikes(chatData); + + return (
-

Application title

+

Vivi's ChatLogs

+
+

{totalLikeCount} ❤️s

+
- {/* 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..045624c9f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,43 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + + +const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => { + const onButtonClick = () => { + onUpdateLikes({ + id: id, + sender: sender, + body: body, + timeStamp: timeStamp, + liked: !liked, + }); + }; + + const toggleHeart = liked ? '❤️' : '🤍'; -const ChatEntry = (props) => { 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, + onUpdateLikes: PropTypes.func.isRequired }; + export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..8a90c9217 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,39 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = ({ entries, onUpdateLikes }) => { + const chatEntryComponents = entries.map((entry) => { + return ( + + ); +}); +return ( +
+ {chatEntryComponents} +
+); +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + }) + ).isRequired, + onUpdateLikes: PropTypes.func.isRequired +}; + +export default ChatLog; \ No newline at end of file From 99356f7e794aed00c52ee00917d2478ac36721fa Mon Sep 17 00:00:00 2001 From: Valerie Valentin Date: Tue, 20 Jun 2023 00:01:54 -0700 Subject: [PATCH 3/6] Optional enhancements WIP --- src/components/ChatEntry.js | 5 +++-- src/components/ColorChoice.js | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 src/components/ColorChoice.js diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 045624c9f..4550fb58d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -16,9 +16,10 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => { }; const toggleHeart = liked ? '❤️' : '🤍'; - + const chatEntryClass = sender === 'Vladimir' ? 'local' : 'remote'; + return ( -
+

{sender}

{body}

diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js new file mode 100644 index 000000000..aaf404641 --- /dev/null +++ b/src/components/ColorChoice.js @@ -0,0 +1 @@ +import React from 'react'; From 3f6956dfc25811adada9fc9df4a9c6420d78a2c2 Mon Sep 17 00:00:00 2001 From: Valerie Valentin Date: Tue, 20 Jun 2023 22:39:25 -0700 Subject: [PATCH 4/6] Optional enhancements WIP 2 --- src/App.css | 6 ++++++ src/App.js | 26 +++++++++++++++++++++++--- src/components/ChatEntry.css | 3 ++- src/components/ChatEntry.js | 7 +++++-- src/components/ChatLog.js | 4 +++- src/components/ColorChoice.js | 19 +++++++++++++++++++ 6 files changed, 58 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index f56752a0a..b5f2a5503 100644 --- a/src/App.css +++ b/src/App.css @@ -72,4 +72,10 @@ .purple { color: purple +} + +.colorSection { + display: flex; + flex-flow: row; + justify-content: center; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index fba914178..8aa8a9484 100644 --- a/src/App.js +++ b/src/App.js @@ -3,9 +3,12 @@ import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; import { useState } from 'react'; +import ColorChoice from './components/ColorChoice'; const App = () => { const [chatData, setChatData] = useState(chatMessages); + const [localColor, setLocalColor] = useState('green'); + const [remoteColor, setRemoteColor] = useState('blue'); const onUpdateLikes = (entryToUpdate) => { const entries = chatData.map((entry) => { @@ -29,17 +32,34 @@ const App = () => { const totalLikeCount = calcTotalLikes(chatData); +const updateLocalColor = (color) => { + setLocalColor(color); +} + +const updateRemoteColor = (color) => { + setRemoteColor(color); +} + return (

Vivi's ChatLogs

-
-

{totalLikeCount} ❤️s

+
+
+ +
+
+

{totalLikeCount} ❤️s

+
+
+ +
- + + {/* pass localcolor & remotecolor to chatentry & chatlog*/}
); diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..d0e8d6539 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -97,4 +97,5 @@ button { .chat-entry.remote .entry-bubble:hover::before { background-color: #a9f6f6; -} \ No newline at end of file +} + diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 4550fb58d..141c22a32 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,7 +4,8 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => { +const ChatEntry = ({ id, sender, body, timeStamp, liked, + onUpdateLikes, localColor, remoteColor }) => { const onButtonClick = () => { onUpdateLikes({ id: id, @@ -17,12 +18,14 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked, onUpdateLikes }) => { const toggleHeart = liked ? '❤️' : '🤍'; const chatEntryClass = sender === 'Vladimir' ? 'local' : 'remote'; + const colorClass = chatEntryClass === 'local' ? localColor : remoteColor; + return (

{sender}

-

{body}

+

{body}

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 8a90c9217..6345cd1eb 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,7 +3,7 @@ import './ChatLog.css'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; -const ChatLog = ({ entries, onUpdateLikes }) => { +const ChatLog = ({ entries, onUpdateLikes, localColor, remoteColor}) => { const chatEntryComponents = entries.map((entry) => { return ( { timeStamp={entry.timeStamp} liked={entry.liked} onUpdateLikes={onUpdateLikes} + localColor={localColor} + remoteColor={remoteColor} /> ); }); diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js index aaf404641..af96babe0 100644 --- a/src/components/ColorChoice.js +++ b/src/components/ColorChoice.js @@ -1 +1,20 @@ import React from 'react'; + +const ColorChoice = ({setColorCallback}) => { + const onColorClick = (event) => { + setColorCallback(event.target.value); + } + + return ( +
+ + + + + + +
+ ); +}; + +export default ColorChoice; From f4eceab328f613ac4c914df5124479b3cc1a0a2a Mon Sep 17 00:00:00 2001 From: Valerie Valentin Date: Fri, 23 Jun 2023 16:23:12 -0700 Subject: [PATCH 5/6] Finished all waves --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 8aa8a9484..44d9eb32e 100644 --- a/src/App.js +++ b/src/App.js @@ -45,7 +45,7 @@ const updateRemoteColor = (color) => {

Vivi's ChatLogs

-
+
From 33cc750d01d789c13b9f02eeeb7e3819ba74d629 Mon Sep 17 00:00:00 2001 From: Valerie Valentin Date: Fri, 23 Jun 2023 16:28:36 -0700 Subject: [PATCH 6/6] Take out later waves proptype --- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 141c22a32..34dbdd921 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -40,7 +40,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - onUpdateLikes: PropTypes.func.isRequired + onUpdateLikes: PropTypes.func }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 6345cd1eb..d5d77d03c 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -35,7 +35,7 @@ ChatLog.propTypes = { liked: PropTypes.bool.isRequired, }) ).isRequired, - onUpdateLikes: PropTypes.func.isRequired + onUpdateLikes: PropTypes.func }; export default ChatLog; \ No newline at end of file