From eb75c5511ba34e8b4b4d5eeba9f243a20f799042 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 15 Dec 2022 13:56:00 -0800 Subject: [PATCH 01/12] added "avoidEscape": true; --- src/components/ChatEntry.test.js | 2 ++ src/components/ChatLog.test.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js index b69270c0..82b966b2 100644 --- a/src/components/ChatEntry.test.js +++ b/src/components/ChatEntry.test.js @@ -1,3 +1,5 @@ +"avoidEscape": true; + import React from "react"; import "@testing-library/jest-dom/extend-expect"; import ChatEntry from "./ChatEntry"; diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc..aa2f97f0 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -1,3 +1,5 @@ +"avoidEscape": true; + import React from "react"; import "@testing-library/jest-dom/extend-expect"; import ChatLog from "./ChatLog"; From 7e82efcebc4cf112b859459f37175043db0a3d34 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Mon, 19 Dec 2022 20:30:01 -0800 Subject: [PATCH 02/12] initial commit --- src/App.js | 9 +++++++-- src/components/ChatEntry.js | 5 +++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index c1085909..a1734f99 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,21 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const App = () => { return (
-
-

Application title

+
+

ChatLog Wave 01

{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} +

ChatEntry #1 Here:

+ +

ChatEntry #2 Here:

+
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b..875d6ec5 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,6 +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.instanceOf(Date).isRequired, + liked: PropTypes.bool.isRequired, }; export default ChatEntry; From 9121f06e136058a1e57e6029111890272061192b Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Wed, 21 Dec 2022 21:09:01 -0800 Subject: [PATCH 03/12] wave 01 (minus timestamp) --- src/App.js | 37 +++++++++++++++++++++++++++----- src/components/ChatEntry.js | 19 +++++++++------- src/components/ChatEntry.test.js | 2 +- src/components/ChatLog.test.js | 2 +- 4 files changed, 45 insertions(+), 15 deletions(-) diff --git a/src/App.js b/src/App.js index a1734f99..31f12f2c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,26 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; +const CHATS = [chatMessages[0], chatMessages[1]]; + const App = () => { + const [chats, setChats] = useState(CHATS); + + const updateChat = (id) => { + const likeCount = chats.timeStamp(chat => { + if (chat.id === id) { + return {...chat.liked + 1}; + } else { + return chat; + } + }); + + setChats(likeCount); + + }; + return (
@@ -12,10 +29,20 @@ const App = () => {
{/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */} -

ChatEntry #1 Here:

- -

ChatEntry #2 Here:

- +
+

ChatEntry #1 Here:

+ +
+
+

ChatEntry #2 Here:

+ +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 875d6ec5..8ecb687b 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 PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { + // const convertedTimeStamp = TimeStamp(props.timeStamp); + return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

{props.timeStamp}

@@ -16,12 +19,12 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes - id: PropTypes.number.isRequired, + // id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.instanceOf(Date).isRequired, - liked: PropTypes.bool.isRequired, + timeStamp: PropTypes.string.isRequired, + // liked: PropTypes.bool, }; + export default ChatEntry; diff --git a/src/components/ChatEntry.test.js b/src/components/ChatEntry.test.js index 82b966b2..85d8a53f 100644 --- a/src/components/ChatEntry.test.js +++ b/src/components/ChatEntry.test.js @@ -1,4 +1,4 @@ -"avoidEscape": true; +// "avoidEscape": true; import React from "react"; import "@testing-library/jest-dom/extend-expect"; diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index aa2f97f0..61a31857 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -1,4 +1,4 @@ -"avoidEscape": true; +// "avoidEscape": true; import React from "react"; import "@testing-library/jest-dom/extend-expect"; From fe02f47bddfdc301bc856418f7a65dc10896668f Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Wed, 21 Dec 2022 23:26:01 -0800 Subject: [PATCH 04/12] checkpoint(ish) in the middle of wave 02 --- src/App.js | 45 ++++++++++++++----------------------- src/components/ChatEntry.js | 9 ++++---- src/components/ChatLog.js | 35 +++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 32 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 31f12f2c..5f8eeb7b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,46 +1,35 @@ import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; - -const CHATS = [chatMessages[0], chatMessages[1]]; +import ChatLog from './components/ChatLog'; const App = () => { - const [chats, setChats] = useState(CHATS); + const [chatData, setChatData] = useState(chatMessages); - const updateChat = (id) => { - const likeCount = chats.timeStamp(chat => { - if (chat.id === id) { - return {...chat.liked + 1}; - } else { - return chat; - } - }); + // const toggleLikeButton = (id) => { + // const likeCount = chats.timeStamp(chat => { + // if (chat.id === id) { + // return {...chat.liked + 1}; + // } else { + // return chat; + // } + // }); - setChats(likeCount); + // setChatData(likeCount); - }; + // }; return (
-

ChatLog Wave 01

+

ChatLog Wave 02

- {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} -
-

ChatEntry #1 Here:

- -
-

ChatEntry #2 Here:

- ChatLog Here:

+
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8ecb687b..531dfc7f 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,8 +4,8 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { - // const convertedTimeStamp = TimeStamp(props.timeStamp); - + // const convertedTimeStamp = TimeStamp(props.chat.timeStamp); + return (

{props.sender}

@@ -19,11 +19,12 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - // id: PropTypes.number.isRequired, + id: PropTypes.number.isRequired, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - // liked: PropTypes.bool, + liked: PropTypes.bool, + // onLiked: PropTypes.func.isRequired, }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 00000000..e6d6c6d6 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,35 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; + +const ChatLog = (entries) => { + const getChatLogJSX = (chats) => { + return chats.map((chat) => { + return ( + + ); + }); + }; + return
{getChatLogJSX(entries.chats)}
+}; + +ChatLog.propTypes = { + chats: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, + }) + ).isRequired, +}; + +export default ChatLog; \ No newline at end of file From 471d0ea55133482fe2f5e56b44f68910cda9c601 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Wed, 21 Dec 2022 23:29:15 -0800 Subject: [PATCH 05/12] first successful render --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 5f8eeb7b..87ad8a6c 100644 --- a/src/App.js +++ b/src/App.js @@ -28,7 +28,7 @@ const App = () => {

ChatLog Here:

From ec7049aa171b7b1d9e30ee310888b3fa35bc0a89 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 22 Dec 2022 00:41:18 -0800 Subject: [PATCH 06/12] like button registers in console --- src/App.js | 27 +++++++++++++++------------ src/components/ChatEntry.js | 7 +++---- src/components/ChatLog.js | 10 ++++++---- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 87ad8a6c..fefc29cc 100644 --- a/src/App.js +++ b/src/App.js @@ -6,18 +6,21 @@ import ChatLog from './components/ChatLog'; const App = () => { const [chatData, setChatData] = useState(chatMessages); - // const toggleLikeButton = (id) => { - // const likeCount = chats.timeStamp(chat => { - // if (chat.id === id) { - // return {...chat.liked + 1}; - // } else { - // return chat; - // } - // }); + const toggleLikeButton = (id) => { + setChatData(chatData => chatData.map(chat => { + if (chat.id === id) { + return {...chat, liked: !chat.liked} + } else { + return chat; + } + })) + console.log("Hey I'm here!!") + }; - // setChatData(likeCount); - - // }; + // calculate function here + const displayTotalLikes = (chatData) => { + let skip = 0; + } return (
@@ -29,7 +32,7 @@ const App = () => {

ChatLog Here:

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 531dfc7f..ddf7c784 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,7 +1,7 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import TimeStamp from './TimeStamp.js'; +// import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { // const convertedTimeStamp = TimeStamp(props.chat.timeStamp); @@ -12,7 +12,7 @@ const ChatEntry = (props) => {

{props.body}

{props.timeStamp}

- +
); @@ -23,8 +23,7 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool, - // onLiked: PropTypes.func.isRequired, + liked: PropTypes.bool.isRequired, }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index e6d6c6d6..785eef58 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -12,7 +12,9 @@ const ChatLog = (entries) => { sender={chat.sender} body={chat.body} timeStamp={chat.timeStamp} - // liked={chat.liked} + liked={chat.liked} + key={chat.id} + onLiked={entries.onLiked} /> ); }); @@ -27,9 +29,9 @@ ChatLog.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool, - }) - ).isRequired, + liked: PropTypes.bool.isRequired, + })), + onLiked: PropTypes.func.isRequired, }; export default ChatLog; \ No newline at end of file From fe99714d11b45fd07f8ea7b5d19e6a3edf59d5f7 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 22 Dec 2022 00:50:22 -0800 Subject: [PATCH 07/12] implemented heart/like toggle --- src/components/ChatEntry.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index ddf7c784..ecb886df 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; const ChatEntry = (props) => { // const convertedTimeStamp = TimeStamp(props.chat.timeStamp); + const heart = props.liked ? '❤️' : '🤍'; return (
@@ -12,7 +13,7 @@ const ChatEntry = (props) => {

{props.body}

{props.timeStamp}

- +
); From a0036b8e246b2ca94555ce6087c8078f2166eaf4 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 22 Dec 2022 01:16:26 -0800 Subject: [PATCH 08/12] first attempt at heart counting --- src/App.css | 6 ++++++ src/App.js | 23 +++++++++++++++++++---- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/App.css b/src/App.css index d97beb4e..946df38e 100644 --- a/src/App.css +++ b/src/App.css @@ -49,6 +49,12 @@ display: inline-block } +.likes-counter { + text-align: left; + padding-left: 20px; + font-size: 1em; +} + .red { color: #b22222 } diff --git a/src/App.js b/src/App.js index fefc29cc..1353a57c 100644 --- a/src/App.js +++ b/src/App.js @@ -17,15 +17,30 @@ const App = () => { console.log("Hey I'm here!!") }; - // calculate function here - const displayTotalLikes = (chatData) => { - let skip = 0; - } + const calcTotalLikes = (chatData) => { + let everyHeart = '' + const total = chatData.reduce((likeTotal, chat) => { + let numberOfHearts = 0 + if (chat.liked) { + numberOfHearts += 1 + } + return numberOfHearts; + }); + + for (let i=0; i

ChatLog Wave 02

+

Likes: {displayTotalLikes}

From 5995dc4740e3fda342ab9e9401c008dcabc2e288 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 22 Dec 2022 09:00:10 -0800 Subject: [PATCH 09/12] off-by-one like counter implemented --- src/App.js | 16 ++++------------ src/components/ChatEntry.js | 2 +- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 1353a57c..8fec1ebc 100644 --- a/src/App.js +++ b/src/App.js @@ -14,24 +14,16 @@ const App = () => { return chat; } })) - console.log("Hey I'm here!!") }; const calcTotalLikes = (chatData) => { let everyHeart = '' - const total = chatData.reduce((likeTotal, chat) => { - let numberOfHearts = 0 + return chatData.reduce((likeTotal, chat) => { if (chat.liked) { - numberOfHearts += 1 + everyHeart += '❤️' } - return numberOfHearts; + return everyHeart; }); - - for (let i=0; i {

ChatLog Wave 02

-

Likes: {displayTotalLikes}

+

Likes: {displayTotalLikes}

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index ecb886df..28a06c91 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; // import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { - // const convertedTimeStamp = TimeStamp(props.chat.timeStamp); + // const convertedTimeStamp = TimeStamp(props); const heart = props.liked ? '❤️' : '🤍'; return ( From 6fd7f53508fce7ab2239833874d1ae02405dfbf6 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 22 Dec 2022 09:13:30 -0800 Subject: [PATCH 10/12] adjusted likes display --- src/App.js | 10 +++++----- src/App.test.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 8fec1ebc..84ac77dc 100644 --- a/src/App.js +++ b/src/App.js @@ -17,12 +17,13 @@ const App = () => { }; const calcTotalLikes = (chatData) => { - let everyHeart = '' + let everyHeart = '❤️' + let numberOfHearts = 0 return chatData.reduce((likeTotal, chat) => { if (chat.liked) { - everyHeart += '❤️' + numberOfHearts += 1 } - return everyHeart; + return `${numberOfHearts}${everyHeart}`; }); }; @@ -31,12 +32,11 @@ const App = () => { return (
-

ChatLog Wave 02

+

Between Bots

Likes: {displayTotalLikes}

-

ChatLog Here:

{ let buttons = container.querySelectorAll('button.like') // Act - fireEvent.click(buttons[0]) + fireEvent.click(buttons[5]) fireEvent.click(buttons[1]) fireEvent.click(buttons[10]) From 481fc94ebe3760db122bcf714157df7a08063b55 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Thu, 22 Dec 2022 09:26:30 -0800 Subject: [PATCH 11/12] fixed off-by-one error --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 84ac77dc..f13ff659 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,7 @@ const App = () => { numberOfHearts += 1 } return `${numberOfHearts}${everyHeart}`; - }); + }, 1); }; const displayTotalLikes = calcTotalLikes(chatData); From a1ab30e706801de575267fba11ea3bf17fd758eb Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 24 Dec 2022 12:57:57 -0800 Subject: [PATCH 12/12] pseudo-wireframing/planning --- src/App.css | 13 +++++-------- src/App.js | 24 ++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/App.css b/src/App.css index 946df38e..0d788155 100644 --- a/src/App.css +++ b/src/App.css @@ -21,13 +21,16 @@ } #App h1 { - font-size: 1.5em; + font-size: 2em; text-align: center; display: inline-block; } #App header section { - background-color: #e0ffff; + background-color: rgb(73, 18, 18); + text-align: left; + padding-left: 20px; + font-size: 1em; } #App .widget { @@ -49,12 +52,6 @@ display: inline-block } -.likes-counter { - text-align: left; - padding-left: 20px; - font-size: 1em; -} - .red { color: #b22222 } diff --git a/src/App.js b/src/App.js index f13ff659..027c9ba3 100644 --- a/src/App.js +++ b/src/App.js @@ -32,8 +32,28 @@ const App = () => { return (
-

Between Bots

-

Likes: {displayTotalLikes}

+

Ghibli Jabber

+
+

Likes: {displayTotalLikes}

+

Movie: + +

+

+ Textbox (or heart?) color: + +

+