From 9f848d15b0c6336c09ee339c439addbc614260a4 Mon Sep 17 00:00:00 2001 From: cathos Date: Tue, 21 Jun 2022 21:39:29 -0700 Subject: [PATCH 1/4] finished wave 1, implemented single chat response --- src/App.js | 4 +++- src/components/ChatEntry.js | 30 +++++++++++++++++++++++++----- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index c1085909..63e72c18 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,7 @@ import React from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; +// import chatMessages from './data/messages.json'; const App = () => { return ( @@ -9,6 +10,7 @@ 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 b92f0b7b..39034d73 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,42 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import chatMessages from '../data/messages.json'; +import { DateTime } from 'luxon'; + +const messageIndex = 0; + +const timeSince = (messageIndex) => { + // return message time or how long ago message was sent if more than 1 year ago? + const timeNow = DateTime.now(); + const messageDate = new Date(chatMessages[messageIndex].timeStamp); + // 31557600000 ms / year, returns the number of years since message was sent, rounded down. + const resultTime = Math.floor((timeNow - messageDate) / 31557600000); + console.log(resultTime); + return resultTime; +}; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{chatMessages[messageIndex].sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{chatMessages[messageIndex].body}

+

{timeSince(messageIndex)} years ago

+
); }; ChatEntry.propTypes = { - //Fill with correct proptypes + id: PropTypes.number, + sender: PropTypes.string, + body: PropTypes.string, + timeStamp: PropTypes.string, + liked: PropTypes.bool, }; export default ChatEntry; From 56f04eefff76f62d812b6dcf30cc4aa2f4e670d4 Mon Sep 17 00:00:00 2001 From: cathos Date: Mon, 27 Jun 2022 17:26:38 -0700 Subject: [PATCH 2/4] finished wave 2 --- src/App.js | 7 +++++-- src/components/ChatEntry.js | 36 +++++++++++++++++++----------------- src/components/ChatLog.js | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 19 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 63e72c18..8dac192b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React from 'react'; import './App.css'; import ChatEntry from './components/ChatEntry'; -// import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; +import chatMessages from './data/messages.json'; const App = () => { return ( @@ -10,7 +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 39034d73..6721da4d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,30 +2,32 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import chatMessages from '../data/messages.json'; -import { DateTime } from 'luxon'; +// import { DateTime } from 'luxon'; +import TimeStamp from './TimeStamp'; -const messageIndex = 0; +// const messageIndex = 0; -const timeSince = (messageIndex) => { - // return message time or how long ago message was sent if more than 1 year ago? - const timeNow = DateTime.now(); - const messageDate = new Date(chatMessages[messageIndex].timeStamp); - // 31557600000 ms / year, returns the number of years since message was sent, rounded down. - const resultTime = Math.floor((timeNow - messageDate) / 31557600000); - console.log(resultTime); - return resultTime; -}; +// const timeSince = (messageIndex) => { +// // return message time or how long ago message was sent if more than 1 year ago? +// const timeNow = DateTime.now(); +// const messageDate = new Date(chatMessages[messageIndex].timeStamp); +// // 31557600000 ms / year, returns the number of years since message was sent, rounded down. +// const resultTime = Math.floor((timeNow - messageDate) / 31557600000); +// console.log(resultTime); +// return resultTime; +// }; const ChatEntry = (props) => { return (
-

{chatMessages[messageIndex].sender}

+

{props.sender}

-

{chatMessages[messageIndex].body}

-

{timeSince(messageIndex)} years ago

- +

{props.body}

+ {/*

{timeSince(messageIndex)} years ago

*/} +

+ +

+
); diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 00000000..60e92908 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +// const messageIndex = 0; + +const ChatLog = (props) => { + const chatComponents = props.entries.map((chat, index) => { + return ( + + ); + }); + return ( +
+ {/* use a ul to render chat entries? */} +
{chatComponents}
+
+ ); +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf(PropTypes.object), +}; + +export default ChatLog; From 0c81ee57d435914d440131282482242affe28ff6 Mon Sep 17 00:00:00 2001 From: cathos Date: Mon, 27 Jun 2022 20:07:26 -0700 Subject: [PATCH 3/4] passed wave 3 tests --- src/App.js | 39 +++++++++++++++++++++++++++-------- src/components/ChatEntry.js | 21 ++++++++++++------- src/components/ChatLog.js | 4 ++-- src/components/TotalHearts.js | 22 ++++++++++++++++++++ 4 files changed, 68 insertions(+), 18 deletions(-) create mode 100644 src/components/TotalHearts.js diff --git a/src/App.js b/src/App.js index 8dac192b..52a516d6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; -import ChatEntry from './components/ChatEntry'; +// import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; -import chatMessages from './data/messages.json'; +import TotalHearts from './components/TotalHearts'; +import chatMessagesJSON from './data/messages.json'; + +const calcTotalLikes = (chatMessages) => { + return chatMessages.reduce((total, message) => { + return total + message.liked; + }, 0); +}; const App = () => { + const [chatMessages, setMessages] = useState(chatMessagesJSON); + + const onLike = (id) => { + const newMessages = chatMessages.map((message) => { + if (message.id === id) { + return { ...message, liked: !message.liked }; + } else { + return message; + } + }); + setMessages(newMessages); + }; + + const totalLikes = calcTotalLikes(chatMessages); + return (
-

Application title

+

Chat Log

+

+ +

- - {/* - */} - {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 6721da4d..14b623ac 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import chatMessages from '../data/messages.json'; +// import chatMessages from '../data/messages.json'; // import { DateTime } from 'luxon'; import TimeStamp from './TimeStamp'; @@ -18,6 +18,10 @@ import TimeStamp from './TimeStamp'; // }; const ChatEntry = (props) => { + const handleLike = () => { + props.onLike(props.id); + }; + return (

{props.sender}

@@ -27,18 +31,21 @@ const ChatEntry = (props) => {

- +
); }; ChatEntry.propTypes = { - id: PropTypes.number, - sender: PropTypes.string, - body: PropTypes.string, - timeStamp: PropTypes.string, + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, liked: PropTypes.bool, + onLike: PropTypes.func, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 60e92908..013cbb4a 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -4,7 +4,7 @@ import ChatEntry from './ChatEntry'; // const messageIndex = 0; -const ChatLog = (props) => { +const ChatLog = (props, onLikeCallback) => { const chatComponents = props.entries.map((chat, index) => { return ( { body={chat.body} timeStamp={chat.timeStamp} liked={chat.liked} + onLike={props.onLike} /> ); }); return (
- {/* use a ul to render chat entries? */}
{chatComponents}
); diff --git a/src/components/TotalHearts.js b/src/components/TotalHearts.js new file mode 100644 index 00000000..7cebbb7c --- /dev/null +++ b/src/components/TotalHearts.js @@ -0,0 +1,22 @@ +// import React from 'react'; +import PropTypes from 'prop-types'; + +const TotalHearts = (props) => { + const hearts = (numberOfLikes) => { + // let heartString = ''; + // for (let i = 0; i < numberOfLikes; i++) { + // heartString = `${heartString}❤️`; + // } + // console.log(numberOfLikes, heartString); + // return `${numberOfLikes} ❤️ s ${heartString}`; + return `${numberOfLikes} ❤️s`; + }; + + return
{hearts(props.totalLikes)}
; +}; + +TotalHearts.propTypes = { + totalLikes: PropTypes.number.isRequired, +}; + +export default TotalHearts; From d9100107ece1e373e593bb92d63d9c44019a982b Mon Sep 17 00:00:00 2001 From: cathos Date: Mon, 27 Jun 2022 20:32:32 -0700 Subject: [PATCH 4/4] cleaned up after wave 3 --- src/components/ChatEntry.js | 2 +- src/components/TotalHearts.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 14b623ac..897a77b5 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; // import chatMessages from '../data/messages.json'; diff --git a/src/components/TotalHearts.js b/src/components/TotalHearts.js index 7cebbb7c..3133be4a 100644 --- a/src/components/TotalHearts.js +++ b/src/components/TotalHearts.js @@ -1,4 +1,4 @@ -// import React from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; const TotalHearts = (props) => {