From 212d3aca916cc37c564f21ad8dc7b372b4e0c6a6 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 22:57:36 -0700 Subject: [PATCH 01/52] add ChatEntry component to App component --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index c10859093..36ee08136 100644 --- a/src/App.js +++ b/src/App.js @@ -11,6 +11,7 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} +
); From 217c191105165fb409f94bd8f87ca4dcf5e4a6a8 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:05:42 -0700 Subject: [PATCH 02/52] add testMessage variable --- src/App.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/App.js b/src/App.js index 36ee08136..710d902d7 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,14 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +const testMessage = { + "id": 1, + "sender":"Vladimir", + "body":"why are you arguing with me", + "timeStamp":"2018-05-29T22:49:06+00:00", + "liked": false +}; + const App = () => { return (
From fadad84cb71c3af8346d0ec66a2311978b7ec80f Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:06:29 -0700 Subject: [PATCH 03/52] add testMessage to ChatEntry component in App component as a prop --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 710d902d7..1206285cd 100644 --- a/src/App.js +++ b/src/App.js @@ -19,7 +19,7 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - +
); From 89c1aa36e93b85b7472d75dfaf4ec82858ae9637 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:14:35 -0700 Subject: [PATCH 04/52] start adding props to ChatEntry --- src/components/ChatEntry.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..61da5edb4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,10 +5,10 @@ import PropTypes from 'prop-types'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

From b887bb15460f49b2e5739721b5732ff73256c6ad Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:17:51 -0700 Subject: [PATCH 05/52] import components into each other --- src/App.js | 11 ++++++----- src/components/ChatEntry.js | 1 + 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index 1206285cd..92d51898c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,14 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const testMessage = { - "id": 1, - "sender":"Vladimir", - "body":"why are you arguing with me", - "timeStamp":"2018-05-29T22:49:06+00:00", - "liked": false + 'id': 1, + 'sender':'Vladimir', + 'body':'why are you arguing with me', + 'timeStamp':'2018-05-29T22:49:06+00:00', + 'liked': false }; const App = () => { diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 61da5edb4..09e679178 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,6 +1,7 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { return ( From 46f609d8cc8647626dcda0e7a54363cadd44322c Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:33:51 -0700 Subject: [PATCH 06/52] pass props down to ChatEntry --- src/App.js | 15 ++++++++++----- src/components/ChatEntry.js | 10 +++++++--- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 92d51898c..f020fc198 100644 --- a/src/App.js +++ b/src/App.js @@ -4,15 +4,20 @@ import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; const testMessage = { - 'id': 1, - 'sender':'Vladimir', - 'body':'why are you arguing with me', - 'timeStamp':'2018-05-29T22:49:06+00:00', - 'liked': false + id: 1, + sender:'Vladimir', + body:'why are you arguing with me', + timeStamp:'2018-05-29T22:49:06+00:00', + liked: false }; +const messageComponents = { + +} + const App = () => { return ( +

Application title

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 09e679178..3bea2758e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,15 +3,19 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = (props) => { +const ChatEntry = ({messageData}) => { + // console.log(props); + const message = messageData; + return (
-

{props.sender}

+ {/*

{props.sender}

{props.body}

-
+ */} +

sender: {message.sender}

); }; From 9b4c2efa378cd80782ba9e8ebbc72540685d7dbd Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:35:03 -0700 Subject: [PATCH 07/52] format props in ChatEntry --- src/components/ChatEntry.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 3bea2758e..ec7e9efb0 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -9,13 +9,13 @@ const ChatEntry = ({messageData}) => { return (
- {/*

{props.sender}

+

{message.sender}

-

{props.body}

-

+

{message.body}

+

-
*/} -

sender: {message.sender}

+ + {/*

sender: {message.sender}

*/}
); }; From 0fdf48b622986e27a948f5f2cc773bd28545aa04 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Tue, 27 Jun 2023 23:40:50 -0700 Subject: [PATCH 08/52] change ChatEntry props structure to match tests --- src/App.js | 2 +- src/components/ChatEntry.js | 12 +++++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index f020fc198..b450f6199 100644 --- a/src/App.js +++ b/src/App.js @@ -25,7 +25,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 ec7e9efb0..0ba0ee380 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,19 +3,17 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = ({messageData}) => { - // console.log(props); - const message = messageData; +const ChatEntry = (props) => { + // const message = props.messageData; return (
-

{message.sender}

+

{props.sender}

-

{message.body}

-

+

{props.body}

+

- {/*

sender: {message.sender}

*/}
); }; From e7fb86cc14c1ab52729b5fe10953b80157fe63a5 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Wed, 28 Jun 2023 01:05:35 -0700 Subject: [PATCH 09/52] implement basic chatlog component --- src/App.js | 2 ++ src/components/ChatLog.js | 10 ++++++++++ 2 files changed, 12 insertions(+) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index b450f6199..0a8b6a427 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; const testMessage = { id: 1, @@ -25,6 +26,7 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} +
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..8a4633789 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,10 @@ +import React from 'react'; + +const ChatLog = () => { + + return (
+ yummy yummy chat log +
) +}; + +export default ChatLog; \ No newline at end of file From be6c5b19a35bd7342af7194cb94630aac76d2b39 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Wed, 28 Jun 2023 01:46:10 -0700 Subject: [PATCH 10/52] apply CSS style to ChatLog component --- src/App.js | 6 ++++-- src/components/ChatLog.js | 24 ++++++++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 0a8b6a427..6c8c2dbcf 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,8 @@ import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; +import messages from './data/messages.json' +// import './components/ChatLog.css'; const testMessage = { id: 1, @@ -26,8 +28,8 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} - - + + {/* */}
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 8a4633789..4a6f7b321 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,10 +1,26 @@ import React from 'react'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; -const ChatLog = () => { +const ChatLog = (props) => { + // console.log(`messages: ${props.entries}`); + const messages = props.entries; - return (
- yummy yummy chat log -
) + const chatComponents = messages.map((message) => { + return ( +
+ +
+ ); + }); + + return (
+ {chatComponents} +
) }; export default ChatLog; \ No newline at end of file From 1016d296f0344dd02bb73cb0813fd4ed3cb8324e Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Wed, 28 Jun 2023 01:47:33 -0700 Subject: [PATCH 11/52] import ChatEntry.css to ChatEntry component --- src/components/ChatEntry.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 0ba0ee380..03af2cd63 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,6 +2,7 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; +import './ChatEntry.css'; const ChatEntry = (props) => { // const message = props.messageData; From d7eda2250a01a056fcb2b3b6ca946546ab865c90 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Wed, 28 Jun 2023 01:57:47 -0700 Subject: [PATCH 12/52] implement local and remote styles with setMessageLocation helper function in ChatEntry component --- src/components/ChatEntry.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 03af2cd63..63a2bd0f6 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,11 +4,24 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; import './ChatEntry.css'; +const setMessageLocation = (userName) => { + + if (userName === 'Vladimir') { + return 'chat-entry local'; + } else if (userName === 'Estragon') { + return 'chat-entry remote'; + }; + +}; + const ChatEntry = (props) => { - // const message = props.messageData; + // const userName = props.sender; + // const senderLocation = props.sender + + const senderLocation = setMessageLocation(props.sender); return ( -
+

{props.sender}

{props.body}

@@ -24,3 +37,4 @@ ChatEntry.propTypes = { }; export default ChatEntry; + From 23a80ee4424cd1efbcf905828f8644b14bacb610 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Wed, 28 Jun 2023 02:03:18 -0700 Subject: [PATCH 13/52] implement onClick function call to ChatEntry heart button --- src/components/ChatEntry.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 63a2bd0f6..9fd6bb395 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -26,7 +26,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From c4dcbf19e9f597473dc90cfce9e657db4aa8dec7 Mon Sep 17 00:00:00 2001 From: Abby Castillo Date: Wed, 28 Jun 2023 02:18:00 -0700 Subject: [PATCH 14/52] last commits for the night --- src/components/ChatEntry.css | 5 +++++ src/components/ChatEntry.js | 16 +++++++++++----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..376810e16 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -97,4 +97,9 @@ button { .chat-entry.remote .entry-bubble:hover::before { background-color: #a9f6f6; +} + +/* like styles */ +.like { + font-size: large; } \ No newline at end of file diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 9fd6bb395..49f9996ca 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,7 +2,7 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -import './ChatEntry.css'; +// import './ChatEntry.css'; const setMessageLocation = (userName) => { @@ -12,11 +12,17 @@ const setMessageLocation = (userName) => { return 'chat-entry remote'; }; -}; +} const ChatEntry = (props) => { - // const userName = props.sender; - // const senderLocation = props.sender + const toggleHeart = () => { + const updatedMessage = { + ...props, + liked: !props.liked + }; + + props.onUpdate(updatedMessage); + }; const senderLocation = setMessageLocation(props.sender); @@ -26,7 +32,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From 39c7a8f6b2aadf425a6c837c3c260fed45314448 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 13:52:03 -0700 Subject: [PATCH 15/52] remove testMessage from App component --- src/App.js | 36 ++++++++++++++++++++++++++---------- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 2 ++ 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 6c8c2dbcf..00b1e9944 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; @@ -6,19 +6,35 @@ import ChatLog from './components/ChatLog'; import messages from './data/messages.json' // import './components/ChatLog.css'; -const testMessage = { - id: 1, - sender:'Vladimir', - body:'why are you arguing with me', - timeStamp:'2018-05-29T22:49:06+00:00', - liked: false -}; +// const testMessage = { +// id: 1, +// sender:'Vladimir', +// body:'why are you arguing with me', +// timeStamp:'2018-05-29T22:49:06+00:00', +// liked: false +// }; const messageComponents = { - + } const App = () => { + const [chatMessages, setChatMessages] = useState(chatMessages) + const likeMessage = (id) => { + setChatMessages((prev) => { + return prev.map((message) => { + if (id === message.id) { + return { + ...message, + liked: !message.liked, + }; + } else { + return message; + } + }) + }); + }; + return (
@@ -28,7 +44,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 49f9996ca..fa4ec05d8 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -32,7 +32,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 4a6f7b321..af943eff7 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -13,6 +13,8 @@ const ChatLog = (props) => { sender={message.sender} body={message.body} timeStamp={message.timeStamp} + onLikeMessage={props.onLikeMessage} + liked={message.liked} /> ); From 3f7c571e4876d7dac6510a6f5ae1bb783f622353 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 13:52:32 -0700 Subject: [PATCH 16/52] remove messageComponents from App component --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 00b1e9944..4934c33d6 100644 --- a/src/App.js +++ b/src/App.js @@ -14,9 +14,9 @@ import messages from './data/messages.json' // liked: false // }; -const messageComponents = { +// const messageComponents = { -} +// } const App = () => { const [chatMessages, setChatMessages] = useState(chatMessages) From 81b070aa6082b34f6de497e32e193b3e9cc7d13f Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 13:53:37 -0700 Subject: [PATCH 17/52] clean up App component --- src/App.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/App.js b/src/App.js index 4934c33d6..f62b27d02 100644 --- a/src/App.js +++ b/src/App.js @@ -4,19 +4,6 @@ import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import messages from './data/messages.json' -// import './components/ChatLog.css'; - -// const testMessage = { -// id: 1, -// sender:'Vladimir', -// body:'why are you arguing with me', -// timeStamp:'2018-05-29T22:49:06+00:00', -// liked: false -// }; - -// const messageComponents = { - -// } const App = () => { const [chatMessages, setChatMessages] = useState(chatMessages) @@ -42,10 +29,7 @@ const App = () => {

Application title

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} - {/* */}
); From e6cc60e6868b1e4d4e5160ecec250a49df369c8c Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 13:54:50 -0700 Subject: [PATCH 18/52] remove state handler from app component --- src/App.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index f62b27d02..787d27489 100644 --- a/src/App.js +++ b/src/App.js @@ -6,21 +6,6 @@ import ChatLog from './components/ChatLog'; import messages from './data/messages.json' const App = () => { - const [chatMessages, setChatMessages] = useState(chatMessages) - const likeMessage = (id) => { - setChatMessages((prev) => { - return prev.map((message) => { - if (id === message.id) { - return { - ...message, - liked: !message.liked, - }; - } else { - return message; - } - }) - }); - }; return ( @@ -29,7 +14,7 @@ const App = () => {

Application title

- +
); From 4181066424d49ebe97288a0d6507c064ee4fbb69 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 13:59:46 -0700 Subject: [PATCH 19/52] refactor ChatEntry component, set button click to do a console.log --- src/App.js | 22 ++++++++++++++++++++++ src/components/ChatEntry.js | 18 +++++++++--------- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 787d27489..622f4b165 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,28 @@ import ChatLog from './components/ChatLog'; import messages from './data/messages.json' const App = () => { + const [chatData, setChatData] = useState(chatMessages); + + const printLike = () => { + console.log('i like that a lot'); + }; + + const likeMessage = (id) => { + setChatData((prev) => { + printLike(); + return prev.map((message) => { + if (id === message.id) { + return { + ...message, + liked: !message.liked, + }; + } else { + return message; + } + }) + }); + }; + return ( diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index fa4ec05d8..ff923d399 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -15,14 +15,14 @@ const setMessageLocation = (userName) => { } const ChatEntry = (props) => { - const toggleHeart = () => { - const updatedMessage = { - ...props, - liked: !props.liked - }; - - props.onUpdate(updatedMessage); - }; + // const toggleHeart = () => { + // const updatedMessage = { + // ...props, + // liked: !props.liked + // }; + + // props.onUpdate(updatedMessage); + // }; const senderLocation = setMessageLocation(props.sender); @@ -32,7 +32,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From fac0d81c1436f10ea4b2f0162679d811f864e054 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 14:01:02 -0700 Subject: [PATCH 20/52] refactor printLike in ChatEntry component --- src/components/ChatEntry.js | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index ff923d399..479a0b3a3 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -14,16 +14,11 @@ const setMessageLocation = (userName) => { } +const printLike = () => { + console.log('shout out to hearts'); +} + const ChatEntry = (props) => { - // const toggleHeart = () => { - // const updatedMessage = { - // ...props, - // liked: !props.liked - // }; - - // props.onUpdate(updatedMessage); - // }; - const senderLocation = setMessageLocation(props.sender); return ( @@ -32,7 +27,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From 655a19b5999d59d562b42b3155e87be83e51b33d Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 14:04:47 -0700 Subject: [PATCH 21/52] refactor printLike function to be passed from app component as onLikeMessage prop to the ChatEntry component --- src/App.js | 4 ++-- src/components/ChatEntry.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 622f4b165..5965f4d57 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ const App = () => { const [chatData, setChatData] = useState(chatMessages); const printLike = () => { - console.log('i like that a lot'); + console.log('shout out to hearts'); }; const likeMessage = (id) => { @@ -36,7 +36,7 @@ const App = () => {

Application title

- + printLike()}/>
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 479a0b3a3..b068ea128 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -14,9 +14,9 @@ const setMessageLocation = (userName) => { } -const printLike = () => { - console.log('shout out to hearts'); -} +// const printLike = () => { +// console.log('shout out to hearts'); +// } const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); @@ -27,7 +27,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From 94e3ca9bb2bc47289ac24f82abb8c68bdd7eb930 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 19:19:38 -0700 Subject: [PATCH 22/52] turn onLikeMessage in ChatEntry so that it runs a console.log --- src/App.js | 36 ++++++++++++++++-------------------- src/components/ChatEntry.js | 17 ++++++++++++----- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/App.js b/src/App.js index 5965f4d57..74aad764a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,31 +1,27 @@ import React, {useState} from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; +// import chatMessages from './data/messages.json'; +// import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import messages from './data/messages.json' const App = () => { - const [chatData, setChatData] = useState(chatMessages); + const [chatData, setChatData] = useState(messages); - const printLike = () => { + const printLike = (id) => { console.log('shout out to hearts'); - }; - - const likeMessage = (id) => { - setChatData((prev) => { - printLike(); - return prev.map((message) => { - if (id === message.id) { - return { - ...message, - liked: !message.liked, - }; - } else { - return message; - } - }) - }); + // setChatData((prev) => { + // return prev.map((message) => { + // if (id === message.id) { + // return { + // ...message, + // likeCount: true, + // }; + // } else { + // return message; + // } + // }) + // }) }; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b068ea128..ab2289a3b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -14,20 +14,27 @@ const setMessageLocation = (userName) => { } -// const printLike = () => { -// console.log('shout out to hearts'); -// } - const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); + const onLikeMessage = () => { + // const updatedMessage = { + // id: props.id, + // sender: props.sender, + // body: props.body, + // timeStamp: props.timeStamp, + // liked: !props.liked + // } + console.log('hey ,im chatting here!!!!!'); + } + return (

{props.sender}

{props.body}

- +
); From e0a534ba7325e8838fc8285663793ed8d1ae8f26 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 19:21:07 -0700 Subject: [PATCH 23/52] remove commented code from ChatEntry component --- src/components/ChatEntry.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index ab2289a3b..f04f2361f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -18,13 +18,6 @@ const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); const onLikeMessage = () => { - // const updatedMessage = { - // id: props.id, - // sender: props.sender, - // body: props.body, - // timeStamp: props.timeStamp, - // liked: !props.liked - // } console.log('hey ,im chatting here!!!!!'); } From 138a33afd5a2fe8e9c8e340d06786bd781da0187 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 19:24:05 -0700 Subject: [PATCH 24/52] refactor ChatEntry button onClick so it prints event object details --- src/components/ChatEntry.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index f04f2361f..eb4ea2a67 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,8 +17,9 @@ const setMessageLocation = (userName) => { const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); - const onLikeMessage = () => { + const onLikeMessage = (event) => { console.log('hey ,im chatting here!!!!!'); + console.log('This event object contains details about the event: ', event); } return ( @@ -27,7 +28,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From dadeef671c5d8dfbfd0f59b6a44fe61c476f295e Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 19:26:28 -0700 Subject: [PATCH 25/52] change onClick back to anonymous function --- src/components/ChatEntry.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index eb4ea2a67..de104a2e4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,9 +17,8 @@ const setMessageLocation = (userName) => { const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); - const onLikeMessage = (event) => { - console.log('hey ,im chatting here!!!!!'); - console.log('This event object contains details about the event: ', event); + const onLikeMessage = (name) => { + console.log(`Hello ${name}! We\'re in printMessage!`); } return ( @@ -28,7 +27,7 @@ const ChatEntry = (props) => {

{props.body}

- +
); From 59e80b76be2d2457037b124beb28c020343f35bf Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 19:40:23 -0700 Subject: [PATCH 26/52] add heartVersion ternary expression to ChatEntry component --- src/components/ChatEntry.js | 2 ++ src/components/ChatLog.js | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index de104a2e4..2daffaa96 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -14,6 +14,8 @@ const setMessageLocation = (userName) => { } +const heartVersion = props.liked ? '❤️' : '🤍'; + const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index af943eff7..2510bff4d 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,7 +3,6 @@ import ChatEntry from './ChatEntry'; import './ChatLog.css'; const ChatLog = (props) => { - // console.log(`messages: ${props.entries}`); const messages = props.entries; const chatComponents = messages.map((message) => { From 0bf208958e3fcb371b400546f7cb0a592700970b Mon Sep 17 00:00:00 2001 From: abbymachines Date: Wed, 28 Jun 2023 19:41:58 -0700 Subject: [PATCH 27/52] refactor ChatEntry to ensure heartVersion ternary is inside of ChatEntry function definition --- src/components/ChatEntry.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 2daffaa96..3d0c3f339 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -14,11 +14,11 @@ const setMessageLocation = (userName) => { } -const heartVersion = props.liked ? '❤️' : '🤍'; - const ChatEntry = (props) => { const senderLocation = setMessageLocation(props.sender); + const heartVersion = props.liked ? '❤️' : '🤍'; + const onLikeMessage = (name) => { console.log(`Hello ${name}! We\'re in printMessage!`); } From 7815aaec3f999ef029a923ed6204fb9232963f26 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 01:30:05 -0700 Subject: [PATCH 28/52] implement state for ChatEntry component --- src/App.js | 30 +++++++++++++----------------- src/components/ChatEntry.js | 30 +++++++++++++++++++++++------- src/components/ChatLog.js | 1 + 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 74aad764a..85da573b4 100644 --- a/src/App.js +++ b/src/App.js @@ -6,24 +6,20 @@ import ChatLog from './components/ChatLog'; import messages from './data/messages.json' const App = () => { - const [chatData, setChatData] = useState(messages); + const [messageData, setMessageData] = useState(messages); - const printLike = (id) => { - console.log('shout out to hearts'); - // setChatData((prev) => { - // return prev.map((message) => { - // if (id === message.id) { - // return { - // ...message, - // likeCount: true, - // }; - // } else { - // return message; - // } - // }) - // }) - }; + const updateMessageData = updatedMessage => { + console.log('shout out to updateMessageData'); + const tempMessages = messageData.map(message => { + if (message.id === updatedMessage.id) { + return updatedMessage; + } else { + return message; + } + }); + setMessageData(tempMessages) + }; return ( @@ -32,7 +28,7 @@ const App = () => {

Application title

- printLike()}/> +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 3d0c3f339..9c817a453 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; @@ -15,13 +15,28 @@ const setMessageLocation = (userName) => { } const ChatEntry = (props) => { - const senderLocation = setMessageLocation(props.sender); + const [likeBool, setLikeBool] = useState(false); - const heartVersion = props.liked ? '❤️' : '🤍'; + // setLikeBool(!likeBool); + const updateLike = () => { + setLikeBool(!likeBool); + }; - const onLikeMessage = (name) => { - console.log(`Hello ${name}! We\'re in printMessage!`); - } + const senderLocation = setMessageLocation(props.sender); + + // const heartVersion = props.liked ? '❤️' : '🤍'; + + const onLikeMessage = () => { + const updatedMessage = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + + props.onLikeMessage(updatedMessage); + }; return (
@@ -29,7 +44,8 @@ const ChatEntry = (props) => {

{props.body}

- +

it is {`${likeBool}`} that u like this message

+
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 2510bff4d..030225cf2 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -9,6 +9,7 @@ const ChatLog = (props) => { return (
Date: Thu, 29 Jun 2023 01:44:57 -0700 Subject: [PATCH 29/52] implement interactive like buttons (with checkboxes anbd moons) --- src/components/ChatEntry.js | 4 +++- src/components/LikeButton.js | 11 +++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/components/LikeButton.js diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 9c817a453..3bb8af71e 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,6 +2,7 @@ import React, {useState} from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; +import LikeButton from './LikeButton'; // import './ChatEntry.css'; const setMessageLocation = (userName) => { @@ -45,7 +46,8 @@ const ChatEntry = (props) => {

{props.body}

it is {`${likeBool}`} that u like this message

- + {/* */} +
); diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js new file mode 100644 index 000000000..7ace7eca6 --- /dev/null +++ b/src/components/LikeButton.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const LikeButton = (props) => { + if (props.heartCondition) { + return + } else { + return + }; +}; + +export default LikeButton; \ No newline at end of file From fe3de7c4b171ad69ee8cca54031488d0264f1b40 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 01:50:44 -0700 Subject: [PATCH 30/52] change emojis to hearts --- src/components/ChatEntry.css | 2 +- src/components/LikeButton.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 376810e16..622e804ce 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -101,5 +101,5 @@ button { /* like styles */ .like { - font-size: large; + font-size: small; } \ No newline at end of file diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js index 7ace7eca6..af6b1e3d1 100644 --- a/src/components/LikeButton.js +++ b/src/components/LikeButton.js @@ -2,9 +2,9 @@ import React from 'react'; const LikeButton = (props) => { if (props.heartCondition) { - return + return } else { - return + return }; }; From b2ed277dcf4f5d6e182e358d63b7eee01418cf1d Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 02:30:37 -0700 Subject: [PATCH 31/52] remove state from like buttons --- src/components/ChatEntry.js | 39 +++++++++++++++++++------------------ src/components/ChatLog.js | 2 +- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 3bb8af71e..05e1d5678 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -15,39 +15,40 @@ const setMessageLocation = (userName) => { } -const ChatEntry = (props) => { - const [likeBool, setLikeBool] = useState(false); +const ChatEntry = ({id, sender, body, timeStamp, onLikeMessage, isLiked}) => { + // const [likeBool, setLikeBool] = useState(false); // setLikeBool(!likeBool); const updateLike = () => { - setLikeBool(!likeBool); + // setLikeBool(!likeBool); + console.log(`thats a nice like. itd be a ${isLiked} shame if somebody updated it...`) }; - const senderLocation = setMessageLocation(props.sender); + const senderLocation = setMessageLocation(sender); // const heartVersion = props.liked ? '❤️' : '🤍'; - const onLikeMessage = () => { - const updatedMessage = { - id: props.id, - sender: props.sender, - body: props.body, - timeStamp: props.timeStamp, - liked: !props.liked, - }; + // const onLikeMessage = () => { + // const updatedMessage = { + // id: props.id, + // sender: props.sender, + // body: props.body, + // timeStamp: props.timeStamp, + // liked: !props.liked, + // }; - props.onLikeMessage(updatedMessage); - }; + // props.onLikeMessage(updatedMessage); + // }; return (
-

{props.sender}

+

{sender}

-

{props.body}

-

-

it is {`${likeBool}`} that u like this message

+

{body}

+

+ {/*

it is {`${likeBool}`} that u like this message

*/} {/* */} - +
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 030225cf2..619e976c5 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -14,7 +14,7 @@ const ChatLog = (props) => { body={message.body} timeStamp={message.timeStamp} onLikeMessage={props.onLikeMessage} - liked={message.liked} + isLiked={message.liked} /> ); From 77ac454643e2fabf9e23d3d16ac92e5eb2843097 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 02:37:57 -0700 Subject: [PATCH 32/52] continue building out toggleLiked in App component --- src/App.js | 38 +++++++++++++++++++++++++------------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 85da573b4..cd785d050 100644 --- a/src/App.js +++ b/src/App.js @@ -3,23 +3,35 @@ import './App.css'; // import chatMessages from './data/messages.json'; // import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; -import messages from './data/messages.json' +import messagesJSON from './data/messages.json' const App = () => { - const [messageData, setMessageData] = useState(messages); - - const updateMessageData = updatedMessage => { - console.log('shout out to updateMessageData'); - const tempMessages = messageData.map(message => { - if (message.id === updatedMessage.id) { - return updatedMessage; - } else { - return message; + const [messageData, setMessageData] = useState(messagesJSON); + + // const updateMessageData = updatedMessage => { + // console.log('shout out to updateMessageData'); + // const tempMessages = messageData.map(message => { + // if (message.id === updatedMessage.id) { + // return updatedMessage; + // } else { + // return message; + // } + // }); + const toggleLiked = (id) => { + const messages = messageData.map((message) => { + if (message.id === id) { + message.liked = !message.liked; } + + return message; }); - setMessageData(tempMessages) - }; + setMessageData(messages); + } + + + // setMessageData(tempMessages) + // }; return ( @@ -28,7 +40,7 @@ const App = () => {

Application title

- +
); From 80c29f2edada617644ccf2b3153c7674bdbc3eed Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 02:49:42 -0700 Subject: [PATCH 33/52] got it to workgit add .git add . the state is now updating the data ^_^ when you click the like buttons --- src/App.js | 3 ++- src/components/ChatEntry.js | 3 ++- src/components/ChatLog.js | 9 +++++---- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index cd785d050..9b0a46c47 100644 --- a/src/App.js +++ b/src/App.js @@ -18,10 +18,11 @@ const App = () => { // } // }); const toggleLiked = (id) => { + console.log('im toggling likes ova heare'); const messages = messageData.map((message) => { if (message.id === id) { message.liked = !message.liked; - } + }; return message; }); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 05e1d5678..e40364dc4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -15,12 +15,13 @@ const setMessageLocation = (userName) => { } -const ChatEntry = ({id, sender, body, timeStamp, onLikeMessage, isLiked}) => { +const ChatEntry = ({id, sender, body, timeStamp, isLiked, onLikeMessage}) => { // const [likeBool, setLikeBool] = useState(false); // setLikeBool(!likeBool); const updateLike = () => { // setLikeBool(!likeBool); + onLikeMessage(id); console.log(`thats a nice like. itd be a ${isLiked} shame if somebody updated it...`) }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 619e976c5..0c75d13df 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,11 +1,12 @@ import React from 'react'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; +// import PropTypes from 'prop-types'; -const ChatLog = (props) => { - const messages = props.entries; +const ChatLog = ({entries, onLikeMessage}) => { + // const messages = props.entries; - const chatComponents = messages.map((message) => { + const chatComponents = entries.map((message) => { return (
{ sender={message.sender} body={message.body} timeStamp={message.timeStamp} - onLikeMessage={props.onLikeMessage} isLiked={message.liked} + onLikeMessage={onLikeMessage} />
); From 7303bbbe831a970522078a19f98efaf8c0719475 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 03:25:36 -0700 Subject: [PATCH 34/52] remove extraneous comments from app component --- src/App.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/src/App.js b/src/App.js index 9b0a46c47..c5a93f80b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,11 @@ import React, {useState} from 'react'; import './App.css'; -// import chatMessages from './data/messages.json'; -// import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import messagesJSON from './data/messages.json' const App = () => { const [messageData, setMessageData] = useState(messagesJSON); - // const updateMessageData = updatedMessage => { - // console.log('shout out to updateMessageData'); - // const tempMessages = messageData.map(message => { - // if (message.id === updatedMessage.id) { - // return updatedMessage; - // } else { - // return message; - // } - // }); const toggleLiked = (id) => { console.log('im toggling likes ova heare'); const messages = messageData.map((message) => { @@ -30,10 +19,6 @@ const App = () => { setMessageData(messages); } - - // setMessageData(tempMessages) - // }; - return (
From 968a7bca7f73daadfed7208647485f1982fd76ed Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 03:36:16 -0700 Subject: [PATCH 35/52] remove extraneous comments --- src/components/ChatEntry.js | 21 +-------------------- src/components/ChatLog.js | 3 --- 2 files changed, 1 insertion(+), 23 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index e40364dc4..86c91971a 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,7 +3,6 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; import LikeButton from './LikeButton'; -// import './ChatEntry.css'; const setMessageLocation = (userName) => { @@ -16,39 +15,21 @@ const setMessageLocation = (userName) => { } const ChatEntry = ({id, sender, body, timeStamp, isLiked, onLikeMessage}) => { - // const [likeBool, setLikeBool] = useState(false); - // setLikeBool(!likeBool); const updateLike = () => { - // setLikeBool(!likeBool); onLikeMessage(id); console.log(`thats a nice like. itd be a ${isLiked} shame if somebody updated it...`) }; const senderLocation = setMessageLocation(sender); - // const heartVersion = props.liked ? '❤️' : '🤍'; - - // const onLikeMessage = () => { - // const updatedMessage = { - // id: props.id, - // sender: props.sender, - // body: props.body, - // timeStamp: props.timeStamp, - // liked: !props.liked, - // }; - - // props.onLikeMessage(updatedMessage); - // }; - return (

{sender}

{body}

- {/*

it is {`${likeBool}`} that u like this message

*/} - {/* */} +
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 0c75d13df..ade105c14 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,11 +1,8 @@ import React from 'react'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -// import PropTypes from 'prop-types'; const ChatLog = ({entries, onLikeMessage}) => { - // const messages = props.entries; - const chatComponents = entries.map((message) => { return (
From 86ed929aa8a174dbc4208284a1c07792a25174a9 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 16:44:27 -0700 Subject: [PATCH 36/52] format text for heart counter --- src/App.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index c5a93f80b..20fd1ae79 100644 --- a/src/App.js +++ b/src/App.js @@ -23,7 +23,9 @@ const App = () => {
-

Application title

+

Chat with Vladimir

+

+

shout out to a certain amount of likes clicked

From 1a143c2ddf59c1fad45b2f75378e11657a15bd60 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 16:49:06 -0700 Subject: [PATCH 37/52] refactor to make HeartCounter its own react component --- src/App.js | 4 ++-- src/components/HeartCounter.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 src/components/HeartCounter.js diff --git a/src/App.js b/src/App.js index 20fd1ae79..841fc7526 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React, {useState} from 'react'; import './App.css'; import ChatLog from './components/ChatLog'; +import HeartCounter from './components/HeartCounter' import messagesJSON from './data/messages.json' const App = () => { @@ -24,8 +25,7 @@ const App = () => {

Chat with Vladimir

-

-

shout out to a certain amount of likes clicked

+
diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js new file mode 100644 index 000000000..6f9ad87c4 --- /dev/null +++ b/src/components/HeartCounter.js @@ -0,0 +1,14 @@ +import '../App.css'; + +const HeartCounter = () => { + return ( +
+

+

+ shout out to a certain amount of likes clicked +

+
+ ); +}; + +export default HeartCounter; \ No newline at end of file From dc42f7e1f420e245b030a2d1520272b58ccd5244 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 16:51:30 -0700 Subject: [PATCH 38/52] add button and onClick to HeartCounter component --- src/components/HeartCounter.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index 6f9ad87c4..88c1b44bd 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -1,12 +1,17 @@ import '../App.css'; const HeartCounter = () => { + const printMessage = () => { + console.log('Hello?? can\'t a program count hearts in peace??'); + }; + return (


shout out to a certain amount of likes clicked

+
); }; From 8bc5806c519586f228142e60d8c7c80aab0c093c Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 17:14:41 -0700 Subject: [PATCH 39/52] turn HeartCounter button onClick argument into anonymous arrow function --- src/components/HeartCounter.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index 88c1b44bd..eef11ba79 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -1,8 +1,9 @@ import '../App.css'; const HeartCounter = () => { - const printMessage = () => { - console.log('Hello?? can\'t a program count hearts in peace??'); + const printMessage = (name) => { + console.log(`Hello ${name}?? can\'t a program count hearts in peace??`); + console.log('event details:', name); }; return ( @@ -11,7 +12,7 @@ const HeartCounter = () => {

shout out to a certain amount of likes clicked

- +
); }; From 11375f61614fc89975e386ad7059daaebdd5ad38 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:09:49 -0700 Subject: [PATCH 40/52] add likeTotal prop to HeartCounter component --- src/App.js | 2 +- src/components/HeartCounter.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 841fc7526..e4b4534f6 100644 --- a/src/App.js +++ b/src/App.js @@ -25,7 +25,7 @@ const App = () => {

Chat with Vladimir

- +
diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index eef11ba79..c798b9139 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -1,8 +1,8 @@ import '../App.css'; -const HeartCounter = () => { +const HeartCounter = (props) => { const printMessage = (name) => { - console.log(`Hello ${name}?? can\'t a program count hearts in peace??`); + console.log(`Hello {name}?? can\'t a program count hearts in peace??`); console.log('event details:', name); }; @@ -10,7 +10,7 @@ const HeartCounter = () => {


- shout out to a certain amount of likes clicked + shout out to {props.likeTotal} likes clicked

From 9c5a4682f42db05eb41b60101900b07082e3e33a Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:18:18 -0700 Subject: [PATCH 41/52] implement state handling for likeTotal prop in HeartCounter component --- src/App.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index e4b4534f6..ad11344cd 100644 --- a/src/App.js +++ b/src/App.js @@ -6,11 +6,18 @@ import messagesJSON from './data/messages.json' const App = () => { const [messageData, setMessageData] = useState(messagesJSON); + const [heartTotal, setHeartTotal] = useState(0); const toggleLiked = (id) => { console.log('im toggling likes ova heare'); const messages = messageData.map((message) => { if (message.id === id) { + if (message.liked === false) { + setHeartTotal(heartTotal + 1); + } else { + setHeartTotal(heartTotal -1); + }; + message.liked = !message.liked; }; @@ -25,7 +32,7 @@ const App = () => {

Chat with Vladimir

- +
From 1ea85545b8aeaf15d8542661d558cac4b47474ed Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:34:34 -0700 Subject: [PATCH 42/52] refactor HeartContainer component --- src/App.js | 1 + src/components/HeartCounter.js | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index ad11344cd..5ddaeb3b4 100644 --- a/src/App.js +++ b/src/App.js @@ -32,6 +32,7 @@ const App = () => {

Chat with Vladimir

+

diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index c798b9139..e09c69ef3 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -8,11 +8,9 @@ const HeartCounter = (props) => { return (
-

- shout out to {props.likeTotal} likes clicked + 💛 {props.likeTotal}

-
); }; From 03e009627bb6162cdbc07eb736446255ca9903c5 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:35:23 -0700 Subject: [PATCH 43/52] remove print statement from toggleLiked function in App component --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 5ddaeb3b4..570799ead 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,6 @@ const App = () => { const [heartTotal, setHeartTotal] = useState(0); const toggleLiked = (id) => { - console.log('im toggling likes ova heare'); const messages = messageData.map((message) => { if (message.id === id) { if (message.liked === false) { From 12511c9f1269d77c3e57b84242dc22eb7c9729b2 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:36:18 -0700 Subject: [PATCH 44/52] remove print statement from ChatEntry component --- src/components/ChatEntry.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 86c91971a..6a11c5b4b 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -18,7 +18,6 @@ const ChatEntry = ({id, sender, body, timeStamp, isLiked, onLikeMessage}) => { const updateLike = () => { onLikeMessage(id); - console.log(`thats a nice like. itd be a ${isLiked} shame if somebody updated it...`) }; const senderLocation = setMessageLocation(sender); From 4d7a8e49b1e3e1d1fd4f3a3d4466ab7634601b1c Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:39:27 -0700 Subject: [PATCH 45/52] add PropTypes to ChatEntry component --- src/components/ChatEntry.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6a11c5b4b..b3abaaa23 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -36,7 +36,12 @@ const ChatEntry = ({id, sender, body, timeStamp, isLiked, onLikeMessage}) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + isLiked: PropTypes.bool.isRequired, + onLikeMessage: PropTypes.func.isRequired, }; export default ChatEntry; From ecf20b68217e33592ccf45d453e57d70dcac479f Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:45:37 -0700 Subject: [PATCH 46/52] add PropTypes to ChatLog --- src/components/ChatLog.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index ade105c14..1a58af409 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,5 +1,6 @@ import React from 'react'; import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; import './ChatLog.css'; const ChatLog = ({entries, onLikeMessage}) => { @@ -23,4 +24,15 @@ const ChatLog = ({entries, onLikeMessage}) => { ) }; +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 + })), + onLikeMessage: PropTypes.func.isRequired, +}; + export default ChatLog; \ No newline at end of file From 6affa1f25919028c4d3f9d9ba00b9bb421c6187b Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:47:48 -0700 Subject: [PATCH 47/52] add propTypes to LikeButton component --- src/components/LikeButton.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js index af6b1e3d1..935eddca3 100644 --- a/src/components/LikeButton.js +++ b/src/components/LikeButton.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; const LikeButton = (props) => { if (props.heartCondition) { @@ -8,4 +9,9 @@ const LikeButton = (props) => { }; }; +LikeButton.propTypes = { + heartCondition: PropTypes.bool.isRequired, + updateLike: PropTypes.func.isRequired +} + export default LikeButton; \ No newline at end of file From ab27f996ff35a2f5310099cb6b3cafd6572decbb Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:49:04 -0700 Subject: [PATCH 48/52] remove printMessage function from HeartCounter component --- src/components/HeartCounter.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index e09c69ef3..cae0732d6 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -1,10 +1,6 @@ import '../App.css'; const HeartCounter = (props) => { - const printMessage = (name) => { - console.log(`Hello {name}?? can\'t a program count hearts in peace??`); - console.log('event details:', name); - }; return (
From 99a4d524c4964fcf02d8ff65db2e97b29457f50a Mon Sep 17 00:00:00 2001 From: abbymachines Date: Thu, 29 Jun 2023 19:51:37 -0700 Subject: [PATCH 49/52] add proptypes to HeartCounter component --- src/components/HeartCounter.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index cae0732d6..f006422b5 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -1,4 +1,5 @@ import '../App.css'; +import PropTypes from 'prop-types'; const HeartCounter = (props) => { @@ -11,4 +12,8 @@ const HeartCounter = (props) => { ); }; +HeartCounter.propTypes = { + likeTotal: PropTypes.number.isRequired, +}; + export default HeartCounter; \ No newline at end of file From 05eb8c56055cacb47409d29595af5435672a1ff7 Mon Sep 17 00:00:00 2001 From: abbymachines Date: Fri, 21 Jul 2023 23:31:50 -0700 Subject: [PATCH 50/52] refactor to set total like count in App component without using an additional state variable --- src/App.js | 14 ++++---------- src/components/HeartCounter.js | 2 +- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 570799ead..8e2728f2f 100644 --- a/src/App.js +++ b/src/App.js @@ -6,33 +6,27 @@ import messagesJSON from './data/messages.json' const App = () => { const [messageData, setMessageData] = useState(messagesJSON); - const [heartTotal, setHeartTotal] = useState(0); const toggleLiked = (id) => { const messages = messageData.map((message) => { if (message.id === id) { - if (message.liked === false) { - setHeartTotal(heartTotal + 1); - } else { - setHeartTotal(heartTotal -1); - }; - message.liked = !message.liked; - }; - + } return message; }); setMessageData(messages); } + const totalLikes = messagesJSON.filter(message => message.liked).length; + return (

Chat with Vladimir



- +
diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index f006422b5..ef575cb39 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -6,7 +6,7 @@ const HeartCounter = (props) => { return (

- 💛 {props.likeTotal} + ❤️ {props.likeTotal}

); From fc817b4e9b12ecd7982fe62ec8b5d61a28fc73ea Mon Sep 17 00:00:00 2001 From: abbymachines Date: Fri, 21 Jul 2023 23:35:47 -0700 Subject: [PATCH 51/52] pass messageData as prop to ChatLog component instead of passing down JSON data --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 8e2728f2f..9696aec88 100644 --- a/src/App.js +++ b/src/App.js @@ -29,7 +29,7 @@ const App = () => {
- +
); From 72534b7bac953327eb2ecd2158027c071d4e769c Mon Sep 17 00:00:00 2001 From: abbymachines Date: Sat, 22 Jul 2023 00:27:29 -0700 Subject: [PATCH 52/52] make wave 3 tests pass by adding 'likes' className to thhe LikeButton component button elements --- src/App.css | 6 +++++- src/components/HeartCounter.js | 2 +- src/components/LikeButton.js | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index d97beb4e6..bdb584363 100644 --- a/src/App.css +++ b/src/App.css @@ -71,4 +71,8 @@ .purple { color: purple -} \ No newline at end of file +} + +/* button like { + +} */ \ No newline at end of file diff --git a/src/components/HeartCounter.js b/src/components/HeartCounter.js index ef575cb39..bcc7635fe 100644 --- a/src/components/HeartCounter.js +++ b/src/components/HeartCounter.js @@ -6,7 +6,7 @@ const HeartCounter = (props) => { return (

- ❤️ {props.likeTotal} + {props.likeTotal} ❤️s

); diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js index 935eddca3..e0e789240 100644 --- a/src/components/LikeButton.js +++ b/src/components/LikeButton.js @@ -5,7 +5,7 @@ const LikeButton = (props) => { if (props.heartCondition) { return } else { - return + return }; };