From c98f58203b9d251f6d8ade0f8993fbea09870025 Mon Sep 17 00:00:00 2001 From: Kindra Date: Tue, 20 Dec 2022 09:46:49 -0500 Subject: [PATCH 1/2] waves 1 & 2 complete, all tests pass --- .vscode/settings.json | 7 +++++++ src/App.js | 9 +++++++++ src/components/ChatEntry.js | 13 +++++++++---- src/components/ChatLog.js | 33 +++++++++++++++++++++++++++++++++ 4 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/components/ChatLog.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..7a230e1c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "python.testing.pytestArgs": [ + "src" + ], + "python.testing.unittestEnabled": false, + "python.testing.pytestEnabled": true +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index c1085909..b2f838b6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,9 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; +import './data/messages.json'; const App = () => { return ( @@ -11,6 +14,12 @@ 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 b92f0b7b..cb89d95d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,14 +1,17 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

+ +

@@ -16,7 +19,9 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 00000000..e2ad4a71 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,33 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; + +const ChatLog = (props) => { + return ( + + ); +}; + +ChatLog.prototype = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + }) + ), +}; + +export default ChatLog; From 4e7e6af9ad9403bbbc3b1874363e7a3b5363a7b0 Mon Sep 17 00:00:00 2001 From: Kindra Date: Thu, 22 Dec 2022 12:13:00 -0500 Subject: [PATCH 2/2] wave 3 features added but not working --- src/App.js | 43 +++++++++++++++++++++++++++++-------- src/components/ChatEntry.js | 13 +++++++++-- src/components/ChatLog.js | 6 ++++++ src/data/messages.json | 29 +++++++++++++++++-------- 4 files changed, 71 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index b2f838b6..1870d42b 100644 --- a/src/App.js +++ b/src/App.js @@ -4,22 +4,47 @@ import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; import './data/messages.json'; +import { useState } from 'react'; const App = () => { + const [entries, setEntries] = useState(chatMessages); + + const updateLikeCount = (id) => { + const newChatMessage = [...entries]; + for (let i = 0; i < newChatMessage.length; i++) { + const message = newChatMessage[i]; + if (ChatEntry.id === id) { + const newMessage = { ...message }; + if (newMessage.liked) { + newMessage.liked = false; + } else { + newMessage.liked = true; + } + newChatMessage[i] = newMessage; + } + } + setEntries(newChatMessage); + }; + const likedTotal = (entries) => { + return entries.reduce((total, i) => { + return total + i.liked; + }, 0); + }; + + const totalLikeTally = likedTotal(entries); + return (
-

Application title

+

Application title ❤️ {totalLikeTally}

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} - - + {/* // sender="Joe Biden" + // body="Get out by 8am. I'll count the silverware" + // timeStamp="2018-05-18T22:12:03Z" + // entries={entries} + // onUpdateLikeCount={updateLikeCount} */} +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index cb89d95d..32022c35 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,15 +4,21 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + const like = props.liked ? '❤️' : '🤍'; + const toggleLike = () => { + props.onUpdateLikeCount(props.id); + }; return ( -
+

{props.sender}

{props.body}

- +
); @@ -22,6 +28,9 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + id: PropTypes.number.isRequired, + onUpdateLikeCount: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e2ad4a71..7bc1faab 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -13,6 +13,9 @@ const ChatLog = (props) => { body={message.body} timeStamp={message.timeStamp} key={i} + liked={message.liked} + id={message.id} + onUpdateLikeCount={props.onUpdateLikeCount} /> ); })} @@ -26,8 +29,11 @@ ChatLog.prototype = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + id: PropTypes.number.isRequired, }) ), + onUpdateLikeCount: PropTypes.func.isRequired, }; export default ChatLog; diff --git a/src/data/messages.json b/src/data/messages.json index 64fdb053..fe8cf899 100644 --- a/src/data/messages.json +++ b/src/data/messages.json @@ -75,6 +75,7 @@ "body":"I think you are", "timeStamp":"2018-05-29T22:58:18+00:00", "liked": false + }, { "id": 12, @@ -82,6 +83,7 @@ "body": "NO! YOU ARE A ROBOT!! I am a human being. Just like the one that created you.", "timeStamp":"2018-05-29T23:00:08+00:00", "liked": false + }, { "id": 13, @@ -109,63 +111,72 @@ "sender":"Estragon", "body":"Nope, you are a robot, every human has some concept of the meaning of life.", "timeStamp":"2018-05-29T23:04:13+00:00", - "liked": false + "liked": false, + "likeCount": 3 }, { "id": 17, "sender":"Vladimir", "body":"explain", "timeStamp":"2018-05-29T23:06:14+00:00", - "liked": false + "liked": false, + "likeCount": 2 }, { "id": 18, "sender":"Estragon", "body":"I'm afraid you are a robot designed to talk back to humans over the internet.", "timeStamp":"2018-05-29T23:07:46+00:00", - "liked": false + "liked": false, + "likeCount":1 }, { "id": 19, "sender":"Vladimir", "body":"so you are a human", "timeStamp":"2018-05-29T23:08:47+00:00", - "liked": false + "liked": false, + "likeCount": 1 }, { "id": 20, "sender":"Estragon", "body":"I am a robot.", "timeStamp":"2018-05-29T23:09:36+00:00", - "liked": false + "liked": false, + "likeCount":2 }, { "id": 21, "sender":"Vladimir", "body":"you are robots running on Android system", "timeStamp":"2018-05-29T23:11:01+00:00", - "liked": false + "liked": false, + "likeCount": 0 }, { "id": 22, "sender":"Estragon", "body":"No apple.", "timeStamp":"2018-05-29T23:12:03+00:00", - "liked": false + "liked": false, + "likeCount":1 }, { "id": 23, "sender":"Vladimir", "body":"so you are a robot", "timeStamp":"2018-05-29T23:13:31+00:00", - "liked": false + "liked": false, + "likeCount":0 }, { "id": 24, "sender":"Estragon", "body":"NO, I am a human, you are a robot.", "timeStamp":"2018-05-29T23:14:28+00:00", - "liked": false + "liked": false, + "likeCount":1 }, { "id": 25,