From d69ec3aa5e14edf95b1e2165f3ea9a95d8e8d0a6 Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Tue, 20 Jun 2023 13:01:59 -0400 Subject: [PATCH 01/11] Created ChatEntry and added/defined props --- src/App.js | 3 +++ src/components/ChatEntry.js | 15 ++++++++++----- src/components/ChatLog.js | 9 +++++++++ 3 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..c3a0f9792 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog' +import ChatEntry from './components/ChatEntry'; const App = () => { return ( @@ -9,6 +11,7 @@ const App = () => {

Application title

+ {/* 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..e6940bdbc 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,15 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; -const ChatEntry = (props) => { +const ChatEntry = ({ id, sender, body, timeStamp, liked }) => { return (
-

Replace with name of sender

+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{body}

+

@@ -16,7 +17,11 @@ const ChatEntry = (props) => { }; 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 }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..5a60c36b5 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,9 @@ +import React from 'react' + +function ChatLog() { + return ( +
ChatLog
+ ) +} + +export default ChatLog \ No newline at end of file From 0a516eafd1869f420e7d5182c50f8978af2d933f Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Tue, 20 Jun 2023 13:43:42 -0400 Subject: [PATCH 02/11] created entrycomponents variable --- src/components/ChatLog.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 5a60c36b5..777f38f5c 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,6 +1,18 @@ import React from 'react' +import './ChatLog.css' +import ChatEntry from './ChatEntry' -function ChatLog() { +const ChatLog = ({ entries }) => { + const entryComponents = entries.map(entry => { + return ( + + ) + }) return (
ChatLog
) From 27287bed21d4cc49be2fcd6455f630f28075cf01 Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Tue, 20 Jun 2023 13:47:59 -0400 Subject: [PATCH 03/11] Added ChatLog to App.js --- src/App.js | 7 ++----- src/components/ChatLog.js | 4 +++- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index c3a0f9792..f74e61b4e 100644 --- a/src/App.js +++ b/src/App.js @@ -2,18 +2,15 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog' -import ChatEntry from './components/ChatEntry'; const App = () => { return (
-

Application title

+

Estragon

- - {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 777f38f5c..0831c070e 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -14,7 +14,9 @@ const ChatLog = ({ entries }) => { ) }) return ( -
ChatLog
+
ChatLog +
{entryComponents}
+
) } From 72611b92550b548c9eaa3dfdd5ae91473334e9cf Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Tue, 20 Jun 2023 14:28:06 -0400 Subject: [PATCH 04/11] Started creating state in App.js --- src/App.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index f74e61b4e..0b0c87e9c 100644 --- a/src/App.js +++ b/src/App.js @@ -4,13 +4,19 @@ import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog' const App = () => { + const [messages, setMessages] = React.useState(chatMessages) + + const likeMessage = (id) => { + + } + return (

Estragon

- +
); From b706be441b5106bb2ec26a57af442ce37624e802 Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Wed, 21 Jun 2023 14:01:32 -0400 Subject: [PATCH 05/11] Started lifting up state --- src/App.js | 2 +- src/components/ChatEntry.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 0b0c87e9c..3cde8bf62 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ const App = () => { const [messages, setMessages] = React.useState(chatMessages) const likeMessage = (id) => { - + } return ( diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index e6940bdbc..9667df7d5 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -10,7 +10,7 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked }) => {

{body}

- +
); From afeec56faadd8ecf272081aca2e20ec9c8d7d9f7 Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Wed, 21 Jun 2023 14:31:46 -0400 Subject: [PATCH 06/11] Created likeMessage function --- src/App.js | 21 +++++++++++++-------- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 5 +++-- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 3cde8bf62..b2210c672 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,19 @@ -import React from 'react'; -import './App.css'; -import chatMessages from './data/messages.json'; -import ChatLog from './components/ChatLog' +import React from "react"; +import "./App.css"; +import chatMessages from "./data/messages.json"; +import ChatLog from "./components/ChatLog"; const App = () => { - const [messages, setMessages] = React.useState(chatMessages) + const [messages, setMessages] = React.useState(chatMessages); const likeMessage = (id) => { - - } + setMessages( + messages.map((message) => (message.id === id ? { + ...message, + liked: !message.liked + } : message)) + ); + }; return (
@@ -16,7 +21,7 @@ const App = () => {

Estragon

- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 9667df7d5..b664d97c8 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,7 +3,7 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({ id, sender, body, timeStamp, liked }) => { +const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage }) => { return (

{sender}

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 0831c070e..db9c47cb3 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -2,7 +2,7 @@ import React from 'react' import './ChatLog.css' import ChatEntry from './ChatEntry' -const ChatLog = ({ entries }) => { +const ChatLog = ({ entries, likeMessage }) => { const entryComponents = entries.map(entry => { return ( { sender= {entry.sender} body= {entry.body} timeStamp= {entry.timeStamp} - liked= {entry.liked} /> + liked= {entry.liked} + likeMessage= {likeMessage} /> ) }) return ( From e0a3b0467361e8d079c68e5f4f7ff059a071f4fa Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Wed, 21 Jun 2023 15:05:51 -0400 Subject: [PATCH 07/11] Completed Wave 3 --- src/App.js | 18 ++++++++++++++---- src/components/ChatEntry.js | 9 ++++++++- src/components/ChatLog.js | 3 ++- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index b2210c672..29aa473e1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ -import React from "react"; -import "./App.css"; -import chatMessages from "./data/messages.json"; -import ChatLog from "./components/ChatLog"; +import React from 'react'; +import './App.css'; +import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; +import { getByLabelText } from '@testing-library/react'; const App = () => { const [messages, setMessages] = React.useState(chatMessages); @@ -15,10 +16,19 @@ const App = () => { ); }; + let totalHearts = 0; + + for (let message of messages) { + if (message.liked) { + totalHearts++ + } + } + return (

Estragon

+

Total Likes: {totalHearts} ❤️s

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b664d97c8..880095a6e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,13 +4,20 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage }) => { + // const [heart, setHeart] = React.useState('🤍') + + const likedHeart = '❤️' + const notLikedHeart = '🤍' + + const likedClass = liked ? likedHeart : notLikedHeart + return (

{sender}

{body}

- +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index db9c47cb3..5bd0e10ef 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -11,7 +11,8 @@ const ChatLog = ({ entries, likeMessage }) => { body= {entry.body} timeStamp= {entry.timeStamp} liked= {entry.liked} - likeMessage= {likeMessage} /> + likeMessage= {likeMessage} + /> ) }) return ( From d968b36213d03b6aa1b3a3bf8d5d930e9c6d5a6a Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Thu, 22 Jun 2023 13:26:40 -0400 Subject: [PATCH 08/11] Created ColorChoice component --- src/App.css | 3 ++- src/App.js | 12 +++++++-- src/components/ChatEntry.js | 45 +++++++++++++++++++--------------- src/components/ChatLog.js | 1 + src/components/ColorChoice.css | 19 ++++++++++++++ src/components/ColorChoice.js | 19 ++++++++++++++ 6 files changed, 76 insertions(+), 23 deletions(-) create mode 100644 src/components/ColorChoice.css create mode 100644 src/components/ColorChoice.js diff --git a/src/App.css b/src/App.css index d97beb4e6..17e70bdc7 100644 --- a/src/App.css +++ b/src/App.css @@ -28,6 +28,7 @@ #App header section { background-color: #e0ffff; + color: black; } #App .widget { @@ -35,7 +36,7 @@ line-height: 0.5em; border-radius: 10px; color: black; - font-size:0.8em; + font-size: 0.8em; padding-left: 1em; padding-right: 1em; } diff --git a/src/App.js b/src/App.js index 29aa473e1..2e7abb28d 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; -import { getByLabelText } from '@testing-library/react'; +import ColorChoice from './components/ColorChoice'; const App = () => { const [messages, setMessages] = React.useState(chatMessages); @@ -16,6 +16,10 @@ const App = () => { ); }; + const setColor = (colorChoice) => { + + } + let totalHearts = 0; for (let message of messages) { @@ -28,7 +32,11 @@ const App = () => {

Estragon

-

Total Likes: {totalHearts} ❤️s

+
+ +

Total Likes: {totalHearts} ❤️s

+ +
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 880095a6e..bcf1ccf2f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,31 +4,36 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage }) => { - // const [heart, setHeart] = React.useState('🤍') + const likedHeart = '❤️'; + const notLikedHeart = '🤍'; + const likedClass = liked ? likedHeart : notLikedHeart; - const likedHeart = '❤️' - const notLikedHeart = '🤍' + const stateMessage = (sender) => { + return sender === 'Vladimir' ? 'local' : 'remote'; + }; - const likedClass = liked ? likedHeart : notLikedHeart - - return ( -
-

{sender}

-
-

{body}

-

- -
-
- ); + return ( +
+

{sender}

+
+

{body}

+

+ +

+ +
+
+ ); }; ChatEntry.propTypes = { - id: PropTypes.number.isRequired, - sender: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 5bd0e10ef..c2d4c2751 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -15,6 +15,7 @@ const ChatLog = ({ entries, likeMessage }) => { /> ) }) + return (
ChatLog
{entryComponents}
diff --git a/src/components/ColorChoice.css b/src/components/ColorChoice.css new file mode 100644 index 000000000..4cb27aa6c --- /dev/null +++ b/src/components/ColorChoice.css @@ -0,0 +1,19 @@ +ul { + list-style: none; + display: flex; + flex-direction: row; + gap: 10px; + overflow: hidden; + padding: 0 +} + +#color-picker { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +li { + float: left; +} \ No newline at end of file diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js new file mode 100644 index 000000000..d26377acb --- /dev/null +++ b/src/components/ColorChoice.js @@ -0,0 +1,19 @@ +import React from 'react'; +import './ColorChoice.css' + +const ColorChoice = ({ setColorCallback }) => { + return ( +
color: +
    +
  • 🔴
    • +
  • 🟠
    • +
  • 🟡
    • +
  • 🟢
    • +
  • 🔵
    • +
  • 🟣
    • +
+
+ ) +} + +export default ColorChoice \ No newline at end of file From 37ad3e27c379424d2db0ace7adee20996f87ca35 Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Thu, 22 Jun 2023 14:40:38 -0400 Subject: [PATCH 09/11] Optional enhancements --- src/App.css | 4 ++++ src/App.js | 29 ++++++++++++++++++++++++----- src/components/ChatEntry.js | 9 +++++++-- src/components/ChatLog.js | 3 ++- src/components/ColorChoice.js | 21 ++++++++++++--------- 5 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/App.css b/src/App.css index 17e70bdc7..4166d12b6 100644 --- a/src/App.css +++ b/src/App.css @@ -72,4 +72,8 @@ .purple { color: purple +} + +.black { + color: black } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 2e7abb28d..2f25a2237 100644 --- a/src/App.js +++ b/src/App.js @@ -16,10 +16,23 @@ const App = () => { ); }; - const setColor = (colorChoice) => { + const [colorChoice, setColor] = React.useState({ + [messages[0].sender]: 'red', + [messages[1].sender]: 'green' + }) + const setColorChoice = (sender, chosenColor) => { + console.log(sender, chosenColor) + setColor(prevColor => { + return { + ...prevColor, + [sender]: chosenColor + } + }) } + console.log(colorChoice) + let totalHearts = 0; for (let message of messages) { @@ -33,13 +46,19 @@ const App = () => {

Estragon

- -

Total Likes: {totalHearts} ❤️s

- + + + + +

{totalHearts} ❤️s

+ + + +
- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index bcf1ccf2f..38d47134d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,11 +3,15 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage }) => { +const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage, colorChoice = 'black' }) => { const likedHeart = '❤️'; const notLikedHeart = '🤍'; const likedClass = liked ? likedHeart : notLikedHeart; + const bubbleClass = colorChoice[sender] ?? 'black' + + // console.log(bubbleClass) + const stateMessage = (sender) => { return sender === 'Vladimir' ? 'local' : 'remote'; }; @@ -15,7 +19,7 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage }) => { return (

{sender}

-
+

{body}

@@ -34,6 +38,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, + colorChoice: PropTypes.func }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index c2d4c2751..d47499e6e 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -2,7 +2,7 @@ import React from 'react' import './ChatLog.css' import ChatEntry from './ChatEntry' -const ChatLog = ({ entries, likeMessage }) => { +const ChatLog = ({ entries, likeMessage, colorChoice }) => { const entryComponents = entries.map(entry => { return ( { timeStamp= {entry.timeStamp} liked= {entry.liked} likeMessage= {likeMessage} + colorChoice={colorChoice} /> ) }) diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js index d26377acb..7b5257e4c 100644 --- a/src/components/ColorChoice.js +++ b/src/components/ColorChoice.js @@ -1,18 +1,21 @@ import React from 'react'; import './ColorChoice.css' -const ColorChoice = ({ setColorCallback }) => { +const ColorChoice = ({ setColorCallback, sender }) => { return ( -

color: +
+

{`${sender}'s Color:`}

    -
  • 🔴
    • -
  • 🟠
    • -
  • 🟡
    • -
  • 🟢
    • -
  • 🔵
    • -
  • 🟣
    • +
  • setColorCallback(sender, 'red')}>🔴
    • +
  • setColorCallback(sender, 'orange')}>🟠
    • +
  • setColorCallback(sender, 'yellow')}>🟡
    • +
  • setColorCallback(sender, 'green')}>🟢
    • +
  • setColorCallback(sender, 'blue')}>🔵
    • +
  • setColorCallback(sender,'purple')}>🟣
-
+ +
+ ) } From e8fe8ad1a9acc7af8fe4fbb4d4a094a584121e0b Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Thu, 22 Jun 2023 14:42:39 -0400 Subject: [PATCH 10/11] Dynamic header --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 2f25a2237..096e14000 100644 --- a/src/App.js +++ b/src/App.js @@ -44,9 +44,9 @@ const App = () => { return (
-

Estragon

+

Chat between {messages[0].sender} and {messages[1].sender}

- + From ba2c32f9a78bf85c74e95762b5a48c557f1bf1c4 Mon Sep 17 00:00:00 2001 From: Sydney Alberson Date: Thu, 22 Jun 2023 16:53:31 -0400 Subject: [PATCH 11/11] Updated css styling --- src/App.css | 9 ++++++++- src/App.js | 8 +++++--- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 2 +- src/components/ColorChoice.js | 5 ++--- 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/App.css b/src/App.css index 4166d12b6..b579c014e 100644 --- a/src/App.css +++ b/src/App.css @@ -11,6 +11,7 @@ z-index: 100; text-align: center; align-items: center; + height: 80px; } #App main { @@ -18,6 +19,7 @@ padding-right: 2em; padding-bottom: 5rem; padding-top: 10rem; + margin: auto; } #App h1 { @@ -29,11 +31,16 @@ #App header section { background-color: #e0ffff; color: black; + height: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center } #App .widget { display: inline-block; - line-height: 0.5em; + /* line-height: 0.5em; */ border-radius: 10px; color: black; font-size: 0.8em; diff --git a/src/App.js b/src/App.js index 096e14000..101e7f494 100644 --- a/src/App.js +++ b/src/App.js @@ -31,6 +31,7 @@ const App = () => { }) } + console.log(colorChoice) let totalHearts = 0; @@ -44,15 +45,16 @@ const App = () => { return (
-

Chat between {messages[0].sender} and {messages[1].sender}

+

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

- +

{totalHearts} ❤️s

 - +
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 38d47134d..1dce399c8 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -18,7 +18,7 @@ const ChatEntry = ({ id, sender, body, timeStamp, liked, likeMessage, colorChoic return (
-

{sender}

+

{sender}

{body}

diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index d47499e6e..404e64981 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -18,7 +18,7 @@ const ChatLog = ({ entries, likeMessage, colorChoice }) => { }) return ( -

ChatLog +
{entryComponents}
) diff --git a/src/components/ColorChoice.js b/src/components/ColorChoice.js index 7b5257e4c..702a96592 100644 --- a/src/components/ColorChoice.js +++ b/src/components/ColorChoice.js @@ -3,7 +3,7 @@ import './ColorChoice.css' const ColorChoice = ({ setColorCallback, sender }) => { return ( -
+

{`${sender}'s Color:`}

  • setColorCallback(sender, 'red')}>🔴
    • @@ -13,8 +13,7 @@ const ColorChoice = ({ setColorCallback, sender }) => {
  • setColorCallback(sender, 'blue')}>🔵
  • setColorCallback(sender,'purple')}>🟣
- -
+
) }