From d4a4d450448405536f8e9a8f7040e23d6a7cfeda Mon Sep 17 00:00:00 2001 From: Ada Date: Tue, 21 Jun 2022 13:59:45 -0700 Subject: [PATCH 1/4] Saving this for now. Messing with wave 2, still figuring out Timestamp. --- src/App.js | 11 +++++++++-- src/components/ChatEntry.js | 26 ++++++++++++++++++++------ src/components/ChatLog.js | 11 +++++++++++ 3 files changed, 40 insertions(+), 8 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..27512efb6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,23 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; +import ChatEntry from './components/ChatEntry'; + const App = () => { + const chatData = { + sender:'Vladimir', + body:'why are you arguing with me', + timeStamp:'2018-05-29T22:49:06+00:00' + }; return (

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..2b6cb4586 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,36 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import { DateTime } from 'luxon'; const ChatEntry = (props) => { + // const TimeStamp = (props) => { + // const time = DateTime.fromISO(props.timeStamp); + // const relative = time.toRelative(); + // return relative; + // }; + const heartToggle = () => { + console.log('to do: make red/white heart toggle'); + }; + return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

{props.timeStamp}

+
); -}; +} ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..7991f223b --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,11 @@ +import React from 'react'; +import './ChatLog.css'; +import ChatEntry from './ChatEntry'; + + +const ChatLog = (entries) => { + const chatComponents = entries.ChatEntry +} + +export default ChatLog; + From 8f6073dfe132c8dd020877fa1d009dd38f834538 Mon Sep 17 00:00:00 2001 From: Ada Date: Thu, 23 Jun 2022 16:52:16 -0700 Subject: [PATCH 2/4] Fixed issues with heartToggle and ChatLog.js props. All tests pass. --- src/App.js | 30 +++++++++++++++++++++++------- src/components/ChatEntry.js | 16 +++++----------- src/components/ChatLog.js | 26 ++++++++++++++++++++++++-- 3 files changed, 52 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 27512efb6..fb7197b7a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,22 +2,38 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatLog from './components/ChatLog'; -import ChatEntry from './components/ChatEntry'; +import { useState } from 'react'; const App = () => { - const chatData = { - sender:'Vladimir', - body:'why are you arguing with me', - timeStamp:'2018-05-29T22:49:06+00:00' + const [entries, setEntries] = useState(chatMessages); + let [likeCount, setLikes] = useState(0); + + const changeHeartColor = (id) => { + const newEntries = entries.map((entry) => ({...entry})); + for (const entry of newEntries) { + if (entry.id === id) { + entry.liked = !entry.liked; + if (entry.liked) { + likeCount += 1; + } + } + } + setEntries(newEntries); + setLikes(likeCount); }; + return (
-

Application title

+

Chat Log

+
{likeCount} ❤️s
- +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 2b6cb4586..55ffc9f40 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,16 +1,10 @@ -import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import { DateTime } from 'luxon'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { - // const TimeStamp = (props) => { - // const time = DateTime.fromISO(props.timeStamp); - // const relative = time.toRelative(); - // return relative; - // }; const heartToggle = () => { - console.log('to do: make red/white heart toggle'); + props.heartCallback(props.id); }; return ( @@ -18,8 +12,8 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

-

{props.timeStamp}

- + +
); @@ -30,7 +24,7 @@ ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - liked: PropTypes.bool + liked: PropTypes.bool, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 7991f223b..f3c02a30b 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,11 +1,33 @@ import React from 'react'; import './ChatLog.css'; import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; -const ChatLog = (entries) => { - const chatComponents = entries.ChatEntry +const ChatLog = (props) => { + const chatComponents = props.entries.map((entry) => { + return ( + + ); + }); + return ( +
+ {chatComponents} +
+ ) } +ChatLog.propTypes = { + entries: PropTypes.array.isRequired, +}; + export default ChatLog; From b5129d1bcfc4d3c6280be350ba83521e474f2255 Mon Sep 17 00:00:00 2001 From: Ada Date: Thu, 23 Jun 2022 17:05:12 -0700 Subject: [PATCH 3/4] fixed key issue. --- src/App.js | 2 +- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 19 ++++++++++--------- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index fb7197b7a..5711460b3 100644 --- a/src/App.js +++ b/src/App.js @@ -27,7 +27,7 @@ const App = () => {

Chat Log

-
{likeCount} ❤️s
+

{likeCount} ❤️s

{ } ChatEntry.propTypes = { - id: PropTypes.number.isRequired, + id: PropTypes.number, sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index f3c02a30b..403bdd2df 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -7,15 +7,16 @@ import PropTypes from 'prop-types'; const ChatLog = (props) => { const chatComponents = props.entries.map((entry) => { return ( - +
+ +
); }); return ( From 8917064b4c69f769074de21f5d4a069831f73553 Mon Sep 17 00:00:00 2001 From: Ada Date: Thu, 23 Jun 2022 17:11:03 -0700 Subject: [PATCH 4/4] fixed key issue for real this time --- src/components/ChatLog.test.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc3..3c19b4e5a 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -5,26 +5,31 @@ import { render, screen } from "@testing-library/react"; const LOG = [ { + id: 0, sender: "Vladimir", body: "why are you arguing with me", timeStamp: "2018-05-29T22:49:06+00:00", }, { + id: 1, sender: "Estragon", body: "Because you are wrong.", timeStamp: "2018-05-29T22:49:33+00:00", }, { + id: 2, sender: "Vladimir", body: "because I am what", timeStamp: "2018-05-29T22:50:22+00:00", }, { + id: 3, sender: "Estragon", body: "A robot.", timeStamp: "2018-05-29T22:52:21+00:00", }, { + id: 4, sender: "Vladimir", body: "Notabot", timeStamp: "2019-07-23T22:52:21+00:00",