From 1ae791d99758020663700ad98dfcd00a00a2e6d9 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Wed, 28 Dec 2022 16:26:11 -0400 Subject: [PATCH 01/15] imported components into App --- src/App.js | 7 ++++++- src/components/ChatEntry.js | 12 ++++++++++++ src/components/Chatlog.js | 13 +++++++++++++ src/components/TimeStamp.js | 1 + 4 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/components/Chatlog.js diff --git a/src/App.js b/src/App.js index c10859093..7477da70e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ import React from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry.js'; +import ChatLog from './components/ChatLog.js'; +import TimeStamp from './components/TimeStamp.js'; const App = () => { return ( @@ -9,6 +11,9 @@ const App = () => {

Application title

+ + + {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..b67302ee3 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -20,3 +20,15 @@ ChatEntry.propTypes = { }; export default ChatEntry; + +// const ChatEntry = (props) => { +// const timeStamp = newDate.return(props.timeStamp) +//
+//

{props.sender}

+//

{props.body}

+//

TIME STAMP

+// {/* `sender`, `body`, and `timeStamp` */} +//
+// +// ); +// }; diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js new file mode 100644 index 000000000..47c720380 --- /dev/null +++ b/src/components/Chatlog.js @@ -0,0 +1,13 @@ +import React from 'react'; +import './Chatlog.css'; +import PropTypes from 'prop-types'; + +const ChatLog = (props) => { + return ( +
+

SENDER

+

MESSAGE TEXT

+

TIME STAMP

+
+ ); +}; diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index 51232778b..b29a1fdac 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -1,3 +1,4 @@ +import React from 'react'; import { DateTime } from 'luxon'; const TimeStamp = (props) => { From 24e3c0a837d70c9f6f030016746da8c53b9076d3 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sat, 14 Jan 2023 21:21:13 -0500 Subject: [PATCH 02/15] add json mssages into chatlog --- README.md | 1 - project-docs/wave-01.md | 1 + src/components/ChatEntry.js | 21 ++++++++++++------- src/components/Chatlog.js | 42 ++++++++++++++++++++++++++++++++----- src/components/TimeStamp.js | 9 ++++++++ 5 files changed, 61 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 71851feea..caac25c4c 100644 --- a/README.md +++ b/README.md @@ -33,4 +33,3 @@ Follow your curiosity to learn more about front-end testing: - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - diff --git a/project-docs/wave-01.md b/project-docs/wave-01.md index 8444d2c5a..19b13e687 100644 --- a/project-docs/wave-01.md +++ b/project-docs/wave-01.md @@ -21,3 +21,4 @@ Usually our convention for styles in React applications is to have a separate CS ## Tests This component has a set of tests that ensure that props passed to the component appear in the browser. To pass the tests, the component must be named `ChatEntry` with props `sender`, `body`, and `timeStamp`. + diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b67302ee3..bdf46092d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,14 +4,13 @@ import PropTypes from 'prop-types'; const ChatEntry = (props) => { return ( -
-

Replace with name of sender

-
-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +
+
+

SENDER

+

MESSAGE TEXT

+

TIME STAMP

-
+ ); }; @@ -21,6 +20,14 @@ ChatEntry.propTypes = { export default ChatEntry; +ChatEntry.propTypes = { + message: PropTypes.arrayOf( + PropTypes.shape({ + messageContent: PropTypes.number.isRequired, + }) + ), +}; + // const ChatEntry = (props) => { // const timeStamp = newDate.return(props.timeStamp) //
diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index 47c720380..6dc8cdfac 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -1,13 +1,45 @@ import React from 'react'; import './Chatlog.css'; import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; const ChatLog = (props) => { return ( -
-

SENDER

-

MESSAGE TEXT

-

TIME STAMP

-
+
+

Vladimir

+
+

why are you arguing with me

+

"2018-05-29T22:49:06+00:00"

+ + +

Estragon

+

"Because you are wrong."

+

"2018-05-29T22:49:33+00:00"

+ +

Vladimir

+

"because I am what"

+

"2018-05-29T22:50:22+00:00"

+ +

"Estragon

+

"A robot.""

+

"2018-05-29T22:52:21+00:00"

+ +

Vladimir

+

"how did you know""

+

"2018-05-29T22:52:58+00:00"

+ +

"Estragon

+

"A robot.""

+

"2018-05-29T22:52:21+00:00"

+
+
); }; + +ChatLog.propTypes = { + message: PropTypes.arrayOf( + PropTypes.shape({ + messageContent: PropTypes.string.isRequired, + }) + ), +}; diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index b29a1fdac..22e7d1b34 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -1,5 +1,6 @@ import React from 'react'; import { DateTime } from 'luxon'; +import PropTypes from 'prop-types'; const TimeStamp = (props) => { const time = DateTime.fromISO(props.time); @@ -10,3 +11,11 @@ const TimeStamp = (props) => { }; export default TimeStamp; + +TimeStamp.propTypes = { + timeStampmessage: PropTypes.arrayOf( + PropTypes.shape({ + messageContent: PropTypes.number, + }) + ), +}; From b66738142a86d3c41a00b798383a10cb7f808c99 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sat, 14 Jan 2023 22:15:45 -0500 Subject: [PATCH 03/15] add usestate to app --- src/App.js | 5 ++++ src/components/ChatEntry.js | 18 ++++++++++--- src/components/Chatlog.js | 50 ++++++++++++++----------------------- src/components/TimeStamp.js | 7 +++--- 4 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/App.js b/src/App.js index 7477da70e..c1294d90d 100644 --- a/src/App.js +++ b/src/App.js @@ -3,9 +3,14 @@ import './App.css'; import ChatEntry from './components/ChatEntry.js'; import ChatLog from './components/ChatLog.js'; import TimeStamp from './components/TimeStamp.js'; +import chatMessages from './data/messages.json'; +import { useState } from 'react'; const App = () => { + const [pieceOfState, setPieceOfState] = useState('Initial value for pieceOfState.'); +} return ( +

Application title

diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index bdf46092d..1227d00b7 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,28 +1,38 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp.js'; + +const filledHeart = '❤️'; +const emptyHeart = '🤍'; const ChatEntry = (props) => { + const heartOrNot = props.liked ? filledHeart : emptyHeart; + return (

SENDER

MESSAGE TEXT

TIME STAMP

+ + onClick={(event) => props.handleLiked(props.id)}>
); }; -ChatEntry.propTypes = { - //Fill with correct proptypes -}; - export default ChatEntry; ChatEntry.propTypes = { message: PropTypes.arrayOf( PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + handleLiked: PropTypes.func.isRequired, messageContent: PropTypes.number.isRequired, }) ), diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index 6dc8cdfac..a25c9aafb 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -2,44 +2,32 @@ import React from 'react'; import './Chatlog.css'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; +import timeStamp from './TimeStamp.js'; const ChatLog = (props) => { - return ( -
-

Vladimir

-
-

why are you arguing with me

-

"2018-05-29T22:49:06+00:00"

- - -

Estragon

-

"Because you are wrong."

-

"2018-05-29T22:49:33+00:00"

- -

Vladimir

-

"because I am what"

-

"2018-05-29T22:50:22+00:00"

- -

"Estragon

-

"A robot.""

-

"2018-05-29T22:52:21+00:00"

- -

Vladimir

-

"how did you know""

-

"2018-05-29T22:52:58+00:00"

- -

"Estragon

-

"A robot.""

-

"2018-05-29T22:52:21+00:00"

-
-
- ); + const jsonMessages = props.entries.map((messages) => { + return ( + + id = {messages.id} + sender={messages.sender} + timeStamp={messages.timeStamp} + liked={messages.liked} + + ); + }); + return
{jsonMessages}
; }; ChatLog.propTypes = { message: PropTypes.arrayOf( PropTypes.shape({ - messageContent: PropTypes.string.isRequired, + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, + handleLiked: PropTypes.func.isRequired, + messageContent: PropTypes.number.isRequired, }) ), }; diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index 22e7d1b34..e9368fdbe 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -2,7 +2,7 @@ import React from 'react'; import { DateTime } from 'luxon'; import PropTypes from 'prop-types'; -const TimeStamp = (props) => { +const timeStamp = (props) => { const time = DateTime.fromISO(props.time); const absolute = time.toFormat('MMMM Do YYYY, h:mm:ss a'); const relative = time.toRelative(); @@ -10,12 +10,11 @@ const TimeStamp = (props) => { return {relative}; }; -export default TimeStamp; - -TimeStamp.propTypes = { +timeStamp.propTypes = { timeStampmessage: PropTypes.arrayOf( PropTypes.shape({ messageContent: PropTypes.number, }) ), }; +export default timeStamp; From a429e5e23cf2b989c6d375973e311a5b4ff89fa4 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 15 Jan 2023 22:39:11 -0500 Subject: [PATCH 04/15] updated chatentry --- src/App.js | 5 ----- src/components/ChatEntry.js | 17 +++++++++-------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index c1294d90d..2e2600c55 100644 --- a/src/App.js +++ b/src/App.js @@ -7,10 +7,7 @@ import chatMessages from './data/messages.json'; import { useState } from 'react'; const App = () => { - const [pieceOfState, setPieceOfState] = useState('Initial value for pieceOfState.'); -} return ( -

Application title

@@ -19,8 +16,6 @@ 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 1227d00b7..e3b6c0b42 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,23 +1,24 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import TimeStamp from './TimeStamp.js'; +import timeStamp from './TimeStamp.js'; +import { messages } from './src/data'; const filledHeart = '❤️'; const emptyHeart = '🤍'; const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; + // const [pieceOfState, setPieceOfState] = useState('Initial value for pieceOfState.'); return (
-
-

SENDER

-

MESSAGE TEXT

-

TIME STAMP

- - onClick={(event) => props.handleLiked(props.id)}> -
+
+

{props.sender}

+

{props.body}

+

{props.timeStamp}

+ +
); }; From e3342b495a9c959dbb9d0502e4ea2747889c0f77 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 15 Jan 2023 22:40:54 -0500 Subject: [PATCH 05/15] updated chatlog --- src/components/Chatlog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index a25c9aafb..408a37a10 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -7,7 +7,7 @@ import timeStamp from './TimeStamp.js'; const ChatLog = (props) => { const jsonMessages = props.entries.map((messages) => { return ( - + id = {messages.id} sender={messages.sender} timeStamp={messages.timeStamp} From 50f45761974cf084feebdd3cf8e643cafc4fb4fd Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Wed, 18 Jan 2023 15:33:19 -0500 Subject: [PATCH 06/15] updated app.js --- src/App.js | 28 +++++++++++++++++++++++----- src/components/ChatEntry.js | 18 ++---------------- src/components/Chatlog.js | 12 +++++++----- 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 2e2600c55..c730903a8 100644 --- a/src/App.js +++ b/src/App.js @@ -5,20 +5,38 @@ import ChatLog from './components/ChatLog.js'; import TimeStamp from './components/TimeStamp.js'; import chatMessages from './data/messages.json'; import { useState } from 'react'; +import messages from './data/messages.json'; const App = () => { + const [chatJson, setchatJson] = useState(chatMessages); + + const updatechatJson = (id) => { + const updatedChat = chatJson.map((chat) => { + if (chat.id === id) { + return { ...chat, liked: !chat.liked }; + } else { + return chat; + } + }); + setchatJson(updatedChat); + }; + + const Hearts = (id) => { + return chatJson.reduce((total, message) => { + return message.liked ? total + 1 : total; + }, 0); + }; + return (
-

Application title

+

Chat Bots

+

LikeCount: {Hearts()} ❤️

- - - +
); }; - export default App; diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index e3b6c0b42..84ab8eb84 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -13,7 +13,7 @@ const ChatEntry = (props) => { return (
-
+

{props.sender}

{props.body}

{props.timeStamp}

@@ -23,8 +23,6 @@ const ChatEntry = (props) => { ); }; -export default ChatEntry; - ChatEntry.propTypes = { message: PropTypes.arrayOf( PropTypes.shape({ @@ -33,20 +31,8 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - handleLiked: PropTypes.func.isRequired, - messageContent: PropTypes.number.isRequired, }) ), }; -// const ChatEntry = (props) => { -// const timeStamp = newDate.return(props.timeStamp) -//
-//

{props.sender}

-//

{props.body}

-//

TIME STAMP

-// {/* `sender`, `body`, and `timeStamp` */} -//
-// -// ); -// }; +export default ChatEntry; diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index 408a37a10..61fa31771 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -7,12 +7,14 @@ import timeStamp from './TimeStamp.js'; const ChatLog = (props) => { const jsonMessages = props.entries.map((messages) => { return ( - - id = {messages.id} + + key={messages.id} + > ); }); return
{jsonMessages}
; @@ -26,8 +28,8 @@ ChatLog.propTypes = { body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool.isRequired, - handleLiked: PropTypes.func.isRequired, - messageContent: PropTypes.number.isRequired, }) ), }; + +export default ChatLog; From 9de32fc543e4ddba2d710874f8592a1a9639db5c Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Wed, 18 Jan 2023 15:38:33 -0500 Subject: [PATCH 07/15] removed proptypes in app.js and chatlog --- src/App.js | 2 +- src/components/ChatEntry.js | 4 +++- src/components/Chatlog.js | 12 ------------ 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index c730903a8..3cbdf448c 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,7 @@ const App = () => { setchatJson(updatedChat); }; - const Hearts = (id) => { + const Hearts = () => { return chatJson.reduce((total, message) => { return message.liked ? total + 1 : total; }, 0); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 84ab8eb84..013e405ac 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -17,7 +17,9 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

{props.timeStamp}

- + + }
); diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index 61fa31771..6546521d8 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -20,16 +20,4 @@ const ChatLog = (props) => { return
{jsonMessages}
; }; -ChatLog.propTypes = { - message: 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; From 6aeee5941ad30301443de3fd6568a164eee88d2f Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Wed, 18 Jan 2023 17:21:13 -0500 Subject: [PATCH 08/15] can't see app --- src/App.js | 4 ++-- src/components/ChatEntry.js | 21 +++++++-------------- src/components/Chatlog.js | 15 ++++++++++++++- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index 3cbdf448c..3c8c266b9 100644 --- a/src/App.js +++ b/src/App.js @@ -30,11 +30,11 @@ const App = () => { return (
-

Chat Bots

+

Human & Robot

LikeCount: {Hearts()} ❤️

- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 013e405ac..c2438be92 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -9,32 +9,25 @@ const emptyHeart = '🤍'; const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; - // const [pieceOfState, setPieceOfState] = useState('Initial value for pieceOfState.'); return (
-
+

{props.sender}

{props.body}

{props.timeStamp}

- - } +
); }; ChatEntry.propTypes = { - message: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.number.isRequired, - sender: PropTypes.string.isRequired, - body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool.isRequired, - }) - ), + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired, }; export default ChatEntry; diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index 6546521d8..779428094 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -13,11 +13,24 @@ const ChatLog = (props) => { body={messages.body} timeStamp={messages.timeStamp} liked={messages.liked} - key={messages.id} + key={messages.key} > ); }); return
{jsonMessages}
; }; +ChatEntry.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, + key: PropTypes.number.isRequired, + }) + ), +}; + export default ChatLog; From 0d433ecc9530188891603fba45d43d241257c00d Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Wed, 18 Jan 2023 22:26:38 -0500 Subject: [PATCH 09/15] react is loading yay --- src/App.js | 12 +++++++----- src/components/ChatEntry.js | 8 ++++++-- src/components/Chatlog.js | 10 ++++++++-- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 3c8c266b9..9fee3b94a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,13 @@ import React from 'react'; import './App.css'; -import ChatEntry from './components/ChatEntry.js'; -import ChatLog from './components/ChatLog.js'; -import TimeStamp from './components/TimeStamp.js'; -import chatMessages from './data/messages.json'; import { useState } from 'react'; -import messages from './data/messages.json'; +import chatMessages from './data/messages.json'; +import ChatLog from './components/Chatlog'; + +// import ChatEntry from './components/ChatEntry.js'; +// import TimeStamp from './components/TimeStamp.js'; +// import { useState } from 'react'; +// import messages from './data/messages.json'; const App = () => { const [chatJson, setchatJson] = useState(chatMessages); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index c2438be92..a529ab9d8 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,8 +1,12 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import timeStamp from './TimeStamp.js'; -import { messages } from './src/data'; + +// import React from 'react'; +// import './ChatEntry.css'; +// import PropTypes from 'prop-types'; +// import timeStamp from './TimeStamp.js'; +// import { messages } from '../data/messages.json'; const filledHeart = '❤️'; const emptyHeart = '🤍'; diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index 779428094..b5defde06 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -1,8 +1,14 @@ import React from 'react'; -import './Chatlog.css'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; -import timeStamp from './TimeStamp.js'; +import './ChatLog.css'; +// import ChatLog from './ChatLog'; + +// import React from 'react'; +// import './Chatlog.css'; +// import PropTypes from 'prop-types'; +// import ChatEntry from './ChatEntry'; +// import timeStamp from './TimeStamp.js'; const ChatLog = (props) => { const jsonMessages = props.entries.map((messages) => { From aac047623de50e745fe2195573bb7e909c4a6f47 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 19 Jan 2023 14:43:39 -0500 Subject: [PATCH 10/15] fixed name format and time is smaller --- src/components/ChatEntry.js | 12 ++++++------ src/components/Chatlog.js | 7 ------- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index a529ab9d8..03bf6d956 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -15,14 +15,14 @@ const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; return ( -
-
-

{props.sender}

-

{props.body}

+
+

{props.sender}

+
+ .

{props.body}

.

{props.timeStamp}

-
-
+ +
); }; diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index b5defde06..ee9a0c0c5 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -2,13 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import ChatEntry from './ChatEntry'; import './ChatLog.css'; -// import ChatLog from './ChatLog'; - -// import React from 'react'; -// import './Chatlog.css'; -// import PropTypes from 'prop-types'; -// import ChatEntry from './ChatEntry'; -// import timeStamp from './TimeStamp.js'; const ChatLog = (props) => { const jsonMessages = props.entries.map((messages) => { From bd6104482b671855f40cc8158b09113b16c2741a Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 19 Jan 2023 14:48:49 -0500 Subject: [PATCH 11/15] text boxes are showing but local n remote are too --- 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 03bf6d956..382054539 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -15,11 +15,12 @@ const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; return ( -
+
+ {props.sender === 'Estragon' ? 'remote' : 'local'}

{props.sender}

.

{props.body}

. -

{props.timeStamp}

+

{props.timeStamp}

From c1a36a794265e81ccc42181a41054d613c606a7c Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 19 Jan 2023 15:42:48 -0500 Subject: [PATCH 12/15] fix heart buttons --- src/components/ChatEntry.js | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 382054539..89732234d 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 { useState } from 'react'; // import React from 'react'; // import './ChatEntry.css'; @@ -13,15 +14,21 @@ const emptyHeart = '🤍'; const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; + const className = props.sender === 'Estragon' ? 'remote' : 'local'; + const [hearted, setHearts] = useState(props.liked); + + const handleClick = () => { + setHearts(!hearted); + }; return ( -
- {props.sender === 'Estragon' ? 'remote' : 'local'} +

{props.sender}

-
- .

{props.body}

. +
+

{props.body}

{props.timeStamp}

- + + {heartOrNot}
); @@ -36,3 +43,19 @@ ChatEntry.propTypes = { }; export default ChatEntry; + +// const ChatEntry = (props) => { +// const heartOrNot = props.liked ? filledHeart : emptyHeart; + +// return ( +//
+// {props.sender === 'Estragon' ? 'remote' : 'local'} +//

{props.sender}

+//
+// .

{props.body}

. +//

{props.timeStamp}

+// +//
+//
+// ); +// }; From cac776246fdd46a70f590dad1c9d44bb6b97baf0 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 19 Jan 2023 16:12:50 -0500 Subject: [PATCH 13/15] hearts are showing in text but not inc. count --- 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 89732234d..a13fefa50 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -27,8 +27,9 @@ const ChatEntry = (props) => {

{props.body}

{props.timeStamp}

- - {heartOrNot} +
); From 621aa910a53ca97323df7e752c15e9f4142d7ac6 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 19 Jan 2023 18:22:06 -0500 Subject: [PATCH 14/15] finit --- src/components/ChatEntry.js | 9 ++++----- src/components/Chatlog.js | 1 + 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index a13fefa50..27f51e782 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -15,19 +15,18 @@ const emptyHeart = '🤍'; const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; const className = props.sender === 'Estragon' ? 'remote' : 'local'; - const [hearted, setHearts] = useState(props.liked); + // const [hearted, setHearts] = useState(props.liked); - const handleClick = () => { - setHearts(!hearted); + const handleClick = (id) => { + props.handleLike(id); }; - return (

{props.sender}

{props.body}

{props.timeStamp}

-
diff --git a/src/components/Chatlog.js b/src/components/Chatlog.js index ee9a0c0c5..3573f4dd6 100644 --- a/src/components/Chatlog.js +++ b/src/components/Chatlog.js @@ -13,6 +13,7 @@ const ChatLog = (props) => { timeStamp={messages.timeStamp} liked={messages.liked} key={messages.key} + handleLike={props.setchatJson} > ); }); From a4aa3c05d811024ddf39437f2832b6fc31785939 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 19 Jan 2023 21:34:36 -0500 Subject: [PATCH 15/15] final draft- deleted comments --- src/App.js | 5 ----- src/components/ChatEntry.js | 24 ------------------------ 2 files changed, 29 deletions(-) diff --git a/src/App.js b/src/App.js index 9fee3b94a..20bab6949 100644 --- a/src/App.js +++ b/src/App.js @@ -4,11 +4,6 @@ import { useState } from 'react'; import chatMessages from './data/messages.json'; import ChatLog from './components/Chatlog'; -// import ChatEntry from './components/ChatEntry.js'; -// import TimeStamp from './components/TimeStamp.js'; -// import { useState } from 'react'; -// import messages from './data/messages.json'; - const App = () => { const [chatJson, setchatJson] = useState(chatMessages); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 27f51e782..d3a68d75d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,13 +1,6 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import { useState } from 'react'; - -// import React from 'react'; -// import './ChatEntry.css'; -// import PropTypes from 'prop-types'; -// import timeStamp from './TimeStamp.js'; -// import { messages } from '../data/messages.json'; const filledHeart = '❤️'; const emptyHeart = '🤍'; @@ -15,7 +8,6 @@ const emptyHeart = '🤍'; const ChatEntry = (props) => { const heartOrNot = props.liked ? filledHeart : emptyHeart; const className = props.sender === 'Estragon' ? 'remote' : 'local'; - // const [hearted, setHearts] = useState(props.liked); const handleClick = (id) => { props.handleLike(id); @@ -43,19 +35,3 @@ ChatEntry.propTypes = { }; export default ChatEntry; - -// const ChatEntry = (props) => { -// const heartOrNot = props.liked ? filledHeart : emptyHeart; - -// return ( -//
-// {props.sender === 'Estragon' ? 'remote' : 'local'} -//

{props.sender}

-//
-// .

{props.body}

. -//

{props.timeStamp}

-// -//
-//
-// ); -// };