From ea938f90deebb8b739dd55ded08bb2d555ddfaf8 Mon Sep 17 00:00:00 2001 From: Madison Jackson Date: Tue, 20 Jun 2023 14:53:47 -0700 Subject: [PATCH 1/5] started tinkering with chatEntry --- src/App.js | 4 +++- src/components/ChatEntry.js | 12 ++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..3d9b32c5b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,16 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const App = () => { return (
-

Application title

+

ChatBug

+
{/* 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..d28582f60 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}

+

{props.timeStamp}

@@ -16,7 +16,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 + }; export default ChatEntry; From 358fc5dd605004f06949ac484e8dc69c774eba8b Mon Sep 17 00:00:00 2001 From: Madison Jackson Date: Fri, 23 Jun 2023 22:02:07 -0700 Subject: [PATCH 2/5] somehow got wave2 but need to work on routes --- src/App.js | 3 ++- src/components/ChatEntry.js | 6 ++++-- src/components/ChatLog.js | 29 +++++++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 3d9b32c5b..3da535f79 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 App = () => { return ( @@ -10,7 +11,7 @@ const App = () => {

ChatBug

-
+
chat={chatMessages}
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index d28582f60..b46375f54 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 ( @@ -8,7 +9,7 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

-

{props.timeStamp}

+

@@ -19,7 +20,8 @@ ChatEntry.propTypes = { id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired + time: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..a3951d2d1 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,29 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css' + +const ChatLog = (props) => { + const getChat = props.entries.map((chat) => { + return + }) + return
{getChat}
+}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired + }) + ) +}; + + +export default ChatLog; \ No newline at end of file From 07e8dc3e91520a77d466530145c19f8d29b187d1 Mon Sep 17 00:00:00 2001 From: Madison Jackson Date: Fri, 23 Jun 2023 22:55:00 -0700 Subject: [PATCH 3/5] properly finished wave1 and 2 --- src/App.js | 10 +++++++++- src/components/ChatEntry.js | 8 ++++---- src/components/ChatLog.js | 3 ++- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 3da535f79..3020900d4 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,14 @@ import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; +const DATA = { + id: 1, + sender:'Vladimir', + body:'why are you arguing with me', + timeStamp:'2018-05-29T22:49:06+00:00', + liked: false +} + const App = () => { return (
@@ -11,7 +19,7 @@ const App = () => {

ChatBug

-
chat={chatMessages}
+
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b46375f54..30c27c5a2 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -6,10 +6,10 @@ import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { return (
-

{props.sender}

+

{props.chat.sender}

-

{props.body}

-

+

{props.chat.body}

+

@@ -20,7 +20,7 @@ ChatEntry.propTypes = { id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - time: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index a3951d2d1..4f7bbe281 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -9,7 +9,8 @@ const ChatLog = (props) => { sender={chat.sender} body={chat.body} timeStamp={chat.timeStamp} - liked={chat.liked} /> + liked={chat.liked} + /> }) return
{getChat}
}; From 8a89eee080ac73f8100623df5251bab007bec267 Mon Sep 17 00:00:00 2001 From: Madison Jackson Date: Tue, 27 Jun 2023 19:55:06 -0700 Subject: [PATCH 4/5] working on like button --- src/App.js | 5 +++-- src/components/ChatEntry.js | 17 +++++++++-------- src/components/ChatLog.js | 23 +++++++++++++++-------- 3 files changed, 27 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index 3020900d4..cb44a4289 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'; @@ -13,13 +13,14 @@ const DATA = { } const App = () => { + const [chatData, setChatData] = useState(chatMessages); return (

ChatBug

-
+
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 30c27c5a2..8ddf2d913 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,14 +3,16 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; -const ChatEntry = (props) => { +const ChatEntry = ({id, sender, body, timeStamp, liked, onClick}) => { + const heartColor = liked === false ? '🤍' : '❤️'; + const likeButton = () => {onClick(id)}; return (
-

{props.chat.sender}

+

{sender}

-

{props.chat.body}

-

- +

{body}

+

+
); @@ -21,8 +23,7 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired - + liked: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, }; - export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 4f7bbe281..4fc1aacb4 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -5,13 +5,18 @@ import './ChatLog.css' const ChatLog = (props) => { const getChat = props.entries.map((chat) => { - return + return ( + + ) }) + console.log('Are we there yet?') return
{getChat}
}; @@ -21,9 +26,11 @@ ChatLog.propTypes = { id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }) - ) + ).isRequired, + onClick: PropTypes.func }; From 8910db7a6bca5f847f969c8f70be5d8adb9e6b67 Mon Sep 17 00:00:00 2001 From: Madison Jackson Date: Tue, 18 Jul 2023 22:35:29 -0700 Subject: [PATCH 5/5] got like button and heart increments to work on app --- src/App.js | 35 +++++++++++++++++++++++++---------- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 5 ++--- 3 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index cb44a4289..189a95452 100644 --- a/src/App.js +++ b/src/App.js @@ -4,25 +4,40 @@ import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; -const DATA = { - id: 1, - sender:'Vladimir', - body:'why are you arguing with me', - timeStamp:'2018-05-29T22:49:06+00:00', - liked: false -} const App = () => { + const [chatData, setChatData] = useState(chatMessages); + let [likeCount, setLikeCount] = useState(0); + // let likeCount = 0; + + const onLikeClick = (id) => { + setChatData(chatData.map(chat => { + if (chat.id === id){ + chat.liked = !chat.liked + if (chat.liked === true){ + setLikeCount(likeCount += 1) + }; + if (chat.liked === false){ + setLikeCount(likeCount -= 1) + }; + + return chat; + } + return chat; +})); +}; + + + return (

ChatBug

+

{likeCount} ❤️s

-
- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8ddf2d913..5183420d4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = ({id, sender, body, timeStamp, liked, onClick}) => { - const heartColor = liked === false ? '🤍' : '❤️'; + const heartColor = liked === false ? '🤍' : '❤️'; const likeButton = () => {onClick(id)}; return (
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 4fc1aacb4..e412b991c 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -11,12 +11,11 @@ const ChatLog = (props) => { body={chat.body} timeStamp={chat.timeStamp} liked={chat.liked} - onClick={chat.onClick} + onClick={props.onClick} key={chat.id} /> ) }) - console.log('Are we there yet?') return
{getChat}
}; @@ -30,7 +29,7 @@ ChatLog.propTypes = { liked: PropTypes.bool.isRequired, }) ).isRequired, - onClick: PropTypes.func + onClick: PropTypes.func.isRequired };