From 9bf9aaec3d82edf40f8226729c777ced311cbb15 Mon Sep 17 00:00:00 2001 From: IzzyBravo Date: Tue, 20 Jun 2023 17:05:06 -0700 Subject: [PATCH 1/4] updating wave 1 --- src/components/ChatEntry.js | 3 ++- src/components/TimeStamp.js | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..913767fe1 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -8,7 +8,8 @@ const ChatEntry = (props) => {

Replace with name of sender

Replace with body of ChatEntry

-

Replace with TimeStamp component

+ {/*

Replace with TimeStamp component

*/} +
diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index e8892b4d4..5f4759573 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -2,11 +2,11 @@ import { DateTime } from 'luxon'; import PropTypes from 'prop-types'; const TimeStamp = (props) => { - const time = DateTime.fromISO(props.time); - const absolute = time.toFormat('MMMM Do YYYY, h:mm:ss a'); - const relative = time.toRelative(); + const compTime = DateTime.fromISO(props.time); + const absolute = compTime.toFormat('MMMM Do YYYY, h:mm:ss a'); + const relative = compTime.toRelative(); - return {relative}; + return {relative}; }; TimeStamp.propTypes = { From dddf414a2f3b945f6069ea3203f65f1027409d9e Mon Sep 17 00:00:00 2001 From: IzzyBravo Date: Tue, 20 Jun 2023 17:31:48 -0700 Subject: [PATCH 2/4] bubble showed up --- src/App.js | 2 ++ src/components/ChatEntry.js | 13 ++++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..833d5cb86 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'; 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 913767fe1..d49434608 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,15 +1,15 @@ 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}

+
@@ -17,7 +17,10 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes + body: PropTypes.string.isRequired, + sender: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + }; export default ChatEntry; From ea350fa15903ec35a57ef7d60716299c9cf00cde Mon Sep 17 00:00:00 2001 From: IzzyBravo Date: Thu, 22 Jun 2023 17:54:40 -0700 Subject: [PATCH 3/4] updating --- src/App.js | 6 +++--- src/components/ChatLog.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index 833d5cb86..34d9779e0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React from 'react'; import './App.css'; -import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; +import entries from './data/messages.json'; +import ChatLog from './components/ChatLog'; const App = () => { return ( @@ -10,7 +10,7 @@ const App = () => {

Application title

- + {/* Wave 01: Render one ChatEntry component Wave 02: Render ChatLog component */}
diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..21f90c377 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,34 @@ +import ChatEntry from './ChatEntry'; +import PropTypes from 'prop-types'; + + +const ChatLog = (props) => { + const data = props.entries.map((entry, index) => { + return ( +
  • + +
    • + ); + }); + return ( +
    +
      + {data} +
    +
    + + ); +}; +ChatLog.propTypes = { + entries: PropTypes.arrayOf(PropTypes.shape({ + body: PropTypes.string.isRequired, + sender: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired + })) +}; + +export default ChatLog; From fa699e810fb26ce2836df44286f4840647cb1e23 Mon Sep 17 00:00:00 2001 From: IzzyBravo Date: Fri, 23 Jun 2023 12:41:21 -0700 Subject: [PATCH 4/4] done done --- src/App.js | 31 ++++++++++++++++++++++++++----- src/components/ChatEntry.js | 19 ++++++++++++------- src/components/ChatLog.js | 6 +++++- 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/App.js b/src/App.js index 34d9779e0..e206d524d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,39 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import entries from './data/messages.json'; import ChatLog from './components/ChatLog'; +import ChatEntry from './components/ChatEntry'; + + const App = () => { + const [messages, setMessages] = useState(entries) + + const numLikes = messages.filter((message) => message.liked).length; + + // going to write a helper function for messages + const setLikes = (id) => { + const newMessages = messages.map((message) => { + if (id === message.id){ + return {...message, liked: !message.liked}; + + } + + return message + }); + + setMessages(newMessages) + + } + return (
    -

    Application title

    +

    chit chat

    +

    number of likes {numLikes} ❤️s

    - - {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} +
    ); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index d49434608..59e3d8d66 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,18 +1,23 @@ -import React from 'react'; +import React, { useState } from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { - return ( -
    + + + const heart = props.liked? '❤️': '🤍'; + + + return( +

    {props.sender}

    {props.body}

    - - + +
    -
    +
    ); }; @@ -20,7 +25,7 @@ ChatEntry.propTypes = { body: PropTypes.string.isRequired, sender: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, - + id: PropTypes.number.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 21f90c377..a69cde1f6 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -10,6 +10,9 @@ const ChatLog = (props) => { body={entry.body} sender={entry.sender} timeStamp={entry.timeStamp} + liked={entry.liked} + setLikes={props.setLikes} + id={entry.id} > ); @@ -27,7 +30,8 @@ ChatLog.propTypes = { entries: PropTypes.arrayOf(PropTypes.shape({ body: PropTypes.string.isRequired, sender: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired })) };