From 3fdbf5ed1e80b721b249a93d7ee32678fb090a93 Mon Sep 17 00:00:00 2001 From: La Tasha Pollard Date: Sat, 17 Jun 2023 00:05:15 -0500 Subject: [PATCH 1/5] updates ChatEntry and App components to complete wave 1 --- .prettierrc.json | 4 ++++ src/App.js | 8 ++++++++ src/components/ChatEntry.js | 24 +++++++++++++++++++++--- 3 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 .prettierrc.json diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 000000000..1fb73bc2e --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "singleQuote": true +} diff --git a/src/App.js b/src/App.js index c10859093..7376a35c5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,11 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const App = () => { + const chatData = chatMessages; + // console.log(chatMessages); return (
@@ -11,6 +14,11 @@ const App = () => {
{/* 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..a7b7acaad 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,32 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; + +// const CHATDATA = [ +// { +// id: 1, +// sender: 'Vladimir', +// body: 'why are you arguing with me', +// timeStamp: '2018-05-29T22:49:06+00:00', +// liked: false, +// }, +// ]; const ChatEntry = (props) => { + // const chatDataJSX= props.chatData.map(entry = ) + + // console.log('in ChatEntry', props.chatData.sender); + return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ {' '} + {' '} +

From 99c0a1f7042c9519d8df2bf32c82a692ac54e586 Mon Sep 17 00:00:00 2001 From: La Tasha Pollard Date: Sat, 17 Jun 2023 01:01:53 -0500 Subject: [PATCH 2/5] implements ChatLog component and completes wave 2 --- src/App.js | 12 ++++++------ src/components/ChatEntry.css | 14 +++++++------- src/components/ChatEntry.js | 14 -------------- src/components/ChatLog.css | 3 ++- src/components/ChatLog.js | 21 +++++++++++++++++++++ 5 files changed, 36 insertions(+), 28 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 7376a35c5..c33e65ef1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,13 @@ -import React from 'react'; +import React, {useState} from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; const App = () => { const chatData = chatMessages; + const [entries, setEntries] = useState(chatData); + // console.log(chatMessages); return (
@@ -14,11 +17,8 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - + +
); diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..de948543a 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -1,11 +1,11 @@ button { background: none; - color: inherit; - border: none; - padding: 10px; - font: inherit; - cursor: pointer; - outline: inherit; + color: inherit; + border: none; + padding: 10px; + font: inherit; + cursor: pointer; + outline: inherit; } .chat-entry { @@ -97,4 +97,4 @@ 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 a7b7acaad..d4076f3cb 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,21 +3,7 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -// const CHATDATA = [ -// { -// id: 1, -// sender: 'Vladimir', -// body: 'why are you arguing with me', -// timeStamp: '2018-05-29T22:49:06+00:00', -// liked: false, -// }, -// ]; - const ChatEntry = (props) => { - // const chatDataJSX= props.chatData.map(entry = ) - - // console.log('in ChatEntry', props.chatData.sender); - return (

{props.sender}

diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css index 378848d1f..00aaabe88 100644 --- a/src/components/ChatLog.css +++ b/src/components/ChatLog.css @@ -1,4 +1,5 @@ .chat-log { margin: auto; - max-width: 50rem; + max-width: 500rem; + color: darkgreen; } diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..1fa1c8e9a --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,21 @@ +import React from 'react'; +import ChatEntry from './ChatEntry'; + +const ChatLog = ({ entries }) => { + console.log(entries); + return ( +
+ {entries.map((entry) => ( + + ))} +
+ ); +}; + +export default ChatLog; From 73a26eac0e5e86afa773a6efd272b345cf05e042 Mon Sep 17 00:00:00 2001 From: La Tasha Pollard Date: Sat, 17 Jun 2023 11:00:26 -0500 Subject: [PATCH 3/5] adds propTypes in ChatLog and ChatEntry test for wave 1 and 2 still pass --- .prettierrc.json | 1 - src/App.js | 5 ++--- src/components/ChatEntry.js | 4 +++- src/components/ChatLog.css | 2 +- src/components/ChatLog.js | 12 +++++++++++- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index 1fb73bc2e..544138be4 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,3 @@ { - "tabWidth": 2, "singleQuote": true } diff --git a/src/App.js b/src/App.js index c33e65ef1..77ab376af 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; const App = () => { @@ -17,7 +16,7 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - +
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index d4076f3cb..6f6dd6f3a 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -20,7 +20,9 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.css b/src/components/ChatLog.css index 00aaabe88..68e4371ae 100644 --- a/src/components/ChatLog.css +++ b/src/components/ChatLog.css @@ -1,5 +1,5 @@ .chat-log { margin: auto; - max-width: 500rem; + max-width: 5rem; color: darkgreen; } diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 1fa1c8e9a..f2b7687fe 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,8 +1,8 @@ import React from 'react'; import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; const ChatLog = ({ entries }) => { - console.log(entries); return (
{entries.map((entry) => ( @@ -18,4 +18,14 @@ const ChatLog = ({ entries }) => { ); }; +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + }) + ), +}; + export default ChatLog; From 9867386e8ff774df26ae5ea7ec400ef746c6f096 Mon Sep 17 00:00:00 2001 From: La Tasha Pollard Date: Tue, 20 Jun 2023 16:12:05 -0500 Subject: [PATCH 4/5] completes wave 3 --- src/App.js | 35 +++++++++++++++++++++++++++++++---- src/components/ChatEntry.css | 3 ++- src/components/ChatEntry.js | 24 ++++++++++++++++++++++-- src/components/ChatLog.js | 11 ++++++++--- 4 files changed, 63 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index 77ab376af..914f6f328 100644 --- a/src/App.js +++ b/src/App.js @@ -5,19 +5,46 @@ import ChatLog from './components/ChatLog'; const App = () => { const chatData = chatMessages; - const [entries, setEntries] = useState(chatData); - // console.log(chatMessages); + const [entryData, setEntryData] = useState(chatData); + + const updateEntryData = (updatedEntry) => { + const entries = entryData.map((entry) => { + if (entry.id === updatedEntry.id) { + return updatedEntry; + } else { + return entry; + } + }); + + setEntryData(entries); + }; + + const [likeCount, setLikeCount] = useState(0); + + const updateLikes = (isLiked) => { + if (isLiked) { + setLikeCount((prevState) => prevState + 1); + } else { + setLikeCount((prevState) => prevState - 1); + } + }; + return (
-

Application title

+

Chat Log, total likes: {likeCount} ❤️s

+

{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - +
); diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index de948543a..68046b2ff 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -35,6 +35,7 @@ button { margin-bottom: 0.5rem; } + .chat-entry .entry-time { color: #bbb; font-size: x-small; @@ -77,7 +78,7 @@ button { } .chat-entry.remote .entry-bubble { - background-color: #e0ffff; + background-color: #c60000; margin-left: auto; margin-right: 0; } diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6f6dd6f3a..0e951919e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,9 +1,25 @@ -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 onLikeButtonClick = () => { + const updateEntry = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + props.onUpdateEntryData(updateEntry); + props.updateLikes(!props.liked); + }; + + const likeHeart = props.liked ? '❤️' : '🤍'; + return (

{props.sender}

@@ -13,7 +29,9 @@ const ChatEntry = (props) => { {' '} {' '}

- +
); @@ -23,6 +41,8 @@ ChatEntry.propTypes = { id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, + liked: PropTypes.bool, + onUpdateEntryData: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index f2b7687fe..e66ce6ce3 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -2,7 +2,7 @@ import React from 'react'; import ChatEntry from './ChatEntry'; import PropTypes from 'prop-types'; -const ChatLog = ({ entries }) => { +const ChatLog = ({ entries, onUpdateEntryData, updateLikes }) => { return (
{entries.map((entry) => ( @@ -12,6 +12,9 @@ const ChatLog = ({ entries }) => { body={entry.body} timeStamp={entry.timeStamp} key={entry.id} + liked={entry.liked} + onUpdateEntryData={onUpdateEntryData} + updateLikes={updateLikes} /> ))}
@@ -24,8 +27,10 @@ ChatLog.propTypes = { id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - }) - ), + liked: PropTypes.bool + })), + onUpdateEntryData: PropTypes.func.isRequired, + }; export default ChatLog; From b09e6f4a59a0a5814b487798899ba4933ca342fa Mon Sep 17 00:00:00 2001 From: La Tasha Pollard Date: Fri, 23 Jun 2023 18:03:09 -0500 Subject: [PATCH 5/5] adds chatClass --- src/App.css | 29 ++++++++++++++++++----------- src/App.js | 6 ++++-- src/components/ChatEntry.css | 3 +-- src/components/ChatEntry.js | 7 ++++--- 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/App.css b/src/App.css index d97beb4e6..cc76bfac1 100644 --- a/src/App.css +++ b/src/App.css @@ -26,8 +26,15 @@ display: inline-block; } +#App header h2 { + background-color: honeydew; + color: #222; + display: block; + font-size: x-large; +} + #App header section { - background-color: #e0ffff; + background-color: #d50e68; } #App .widget { @@ -35,40 +42,40 @@ line-height: 0.5em; border-radius: 10px; color: black; - font-size:0.8em; + font-size: 0.8em; padding-left: 1em; padding-right: 1em; } #App #heartWidget { font-size: 1.5em; - margin: 1em + margin: 1em; } #App span { - display: inline-block + display: inline-block; } .red { - color: #b22222 + color: #b22222; } .orange { - color: #e6ac00 + color: #e6ac00; } .yellow { - color: #e6e600 + color: #e6e600; } .green { - color: green + color: green; } .blue { - color: blue + color: blue; } .purple { - color: purple -} \ No newline at end of file + color: purple; +} diff --git a/src/App.js b/src/App.js index 914f6f328..2b05cbe9e 100644 --- a/src/App.js +++ b/src/App.js @@ -33,8 +33,10 @@ const App = () => { return (
-

Chat Log, total likes: {likeCount} ❤️s

-

+

+ Chat between {chatData[0].sender} and {chatData[1].sender} +

+

{likeCount} ❤️s

{/* Wave 01: Render one ChatEntry component diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 68046b2ff..c2a28bf70 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -35,7 +35,6 @@ button { margin-bottom: 0.5rem; } - .chat-entry .entry-time { color: #bbb; font-size: x-small; @@ -78,7 +77,7 @@ button { } .chat-entry.remote .entry-bubble { - background-color: #c60000; + background-color: #a4f9ad; margin-left: auto; margin-right: 0; } diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 0e951919e..9def16990 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,8 +4,6 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { - - const onLikeButtonClick = () => { const updateEntry = { id: props.id, @@ -20,8 +18,11 @@ const ChatEntry = (props) => { const likeHeart = props.liked ? '❤️' : '🤍'; + const chatClass = + props.sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote'; + return ( -
+

{props.sender}

{props.body}