From b551d8b133c0ed128d09bfece7e3bdc8d33167f3 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 20 Dec 2022 18:09:41 -0800 Subject: [PATCH 1/7] Modified some of wave 1 --- src/App.js | 12 ++++++++++++ src/components/ChatEntry.js | 10 ++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index c10859093..590a3b7d3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,26 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; +import ChatEntry from './components/ChatEntry'; const App = () => { return (

Application title

+ {console.log(chatMessages[0]['timeStamp'])}
+ + {/* 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..8716b46b4 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -5,10 +5,10 @@ import PropTypes from 'prop-types'; const ChatEntry = (props) => { return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

+

{props.body}

+

{props.timeStamp}

@@ -16,7 +16,9 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - //Fill with correct proptypes + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; From 1b714f55c20e41796eae6bc08464e29d60bdd977 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 20 Dec 2022 21:28:28 -0800 Subject: [PATCH 2/7] Finished wave 1, had to modify timeStamp --- .vscode/settings.json | 7 +++++++ src/App.js | 22 ++++++++++++---------- src/components/ChatEntry.js | 6 ++++-- src/components/ChatLog.js | 20 ++++++++++++++++++++ 4 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/components/ChatLog.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..406bf3d80 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "python.testing.pytestArgs": [ + "node_modules" + ], + "python.testing.unittestEnabled": false, + "python.testing.pytestEnabled": true +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 590a3b7d3..e4c35a74d 100644 --- a/src/App.js +++ b/src/App.js @@ -2,27 +2,29 @@ import React from 'react'; import './App.css'; import chatMessages from './data/messages.json'; import ChatEntry from './components/ChatEntry'; +import ChatLog from './components/ChatLog'; const App = () => { return (

Application title

- {console.log(chatMessages[0]['timeStamp'])}
+ + + + console.log("This is the chatList" + + ); - + {/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + Wave 02: Render ChatLog component */}{' '}
); diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index 8716b46b4..c83b13010 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 TimeStamp from './TimeStamp'; const ChatEntry = (props) => { return ( @@ -8,7 +9,8 @@ const ChatEntry = (props) => {

{props.sender}

{props.body}

-

{props.timeStamp}

+ {/*

{TimeStamp(props.timeStamp)}

*/} +
@@ -16,7 +18,7 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - sender: PropTypes.string.isRequired, + sender: PropTypes.string, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, }; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..0f3e26568 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,20 @@ +import React from 'react'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; + +const ChatLog = (entries) => { + console.log(entries); + return ( + + ); +}; + +ChatLog.propTypes = { + id: PropTypes.number.isRequired, +}; + +export default ChatLog; From 935ba8cebc3f30f33cc2bfaee1a444bbf007ceb7 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 20 Dec 2022 21:36:07 -0800 Subject: [PATCH 3/7] Modifed line 15 to include class name --- src/App.js | 9 +++++---- src/components/ChatEntry.js | 6 ++++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index e4c35a74d..ce1117489 100644 --- a/src/App.js +++ b/src/App.js @@ -13,10 +13,11 @@ const App = () => {
- - console.log("This is the chatList" - - ); + {

{props.sender}

{props.body}

- {/*

{TimeStamp(props.timeStamp)}

*/} - +

+ +

+ {/* */}
From 35ddeeb923a58eb994170286a22f4224424e91d2 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 20 Dec 2022 22:13:13 -0800 Subject: [PATCH 4/7] Wave 2 is half passed --- src/components/ChatEntry.js | 2 +- src/components/ChatLog.js | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index dcd28ea2a..3c736cb50 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -12,7 +12,6 @@ const ChatEntry = (props) => {

- {/* */} @@ -20,6 +19,7 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { + id: PropTypes.number.isRequired, sender: PropTypes.string, body: PropTypes.string.isRequired, timeStamp: PropTypes.string.isRequired, diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 0f3e26568..ceeaeff95 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -3,18 +3,17 @@ import './ChatLog.css'; import PropTypes from 'prop-types'; const ChatLog = (entries) => { - console.log(entries); - return ( -
    -
  • sender:Jess
    • -
  • body:Hey
    • -
  • timeStamp:2018-05-29T22:49:06+00:00
    • -
- ); + return

Student List

; + //
    + //
  • {sender=entries}
    • + //
  • sender:en
    • + //
  • body:Hey
    • + //
  • timeStamp:2018-05-29T22:49:06+00:00
    • + //
+ // ); }; ChatLog.propTypes = { - id: PropTypes.number.isRequired, + entries: PropTypes.array, }; - export default ChatLog; From 75cdee99e46ca37775bc3dbebf3d520eba370100 Mon Sep 17 00:00:00 2001 From: Jessica Date: Thu, 22 Dec 2022 09:48:31 -0800 Subject: [PATCH 5/7] Found error in ChatLog and error in timestamp in chatEntry --- src/App.js | 18 +++-------------- src/components/ChatEntry.js | 17 +++++++++------- src/components/ChatLog.js | 39 +++++++++++++++++++++++++++---------- src/components/TimeStamp.js | 1 + yarn.lock | 13 ++++--------- 5 files changed, 47 insertions(+), 41 deletions(-) diff --git a/src/App.js b/src/App.js index ce1117489..98d773b4e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,29 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; import './App.css'; import chatMessages from './data/messages.json'; -import ChatEntry from './components/ChatEntry'; import ChatLog from './components/ChatLog'; const App = () => { + const [chatLogList, setchatLogList] = useState([]); 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 3c736cb50..f54e44375 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,16 +1,20 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; -import TimeStamp from './TimeStamp'; +import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { + const sender = props.sender; + console.log(props.timeStamp); + const senderBody = props.body; + return (
-

{props.sender}

+

{sender}

-

{props.body}

+

{senderBody}

- +

{TimeStamp(props.timeStamp)}

@@ -19,10 +23,9 @@ const ChatEntry = (props) => { }; ChatEntry.propTypes = { - id: PropTypes.number.isRequired, - sender: PropTypes.string, + sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.string.isRequired, + timeStamp: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index ceeaeff95..81cb3c900 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,19 +1,38 @@ import React from 'react'; import './ChatLog.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; +import ChatEntry from './ChatEntry'; -const ChatLog = (entries) => { - return

Student List

; - //
    - //
  • {sender=entries}
    • - //
  • sender:en
    • - //
  • body:Hey
    • - //
  • timeStamp:2018-05-29T22:49:06+00:00
    • - //
- // ); +const ChatLog = (props) => { + console.log(props); + const chatLogComponents = []; + const chatLogList = props.chatLogList; + + for (const chat of chatLogList) { + chatLogComponents.push( + + ); + } + + return
{chatLogComponents}
; }; ChatLog.propTypes = { - entries: PropTypes.array, + chatLogList: 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; diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index 51232778b..bb77f8138 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -4,6 +4,7 @@ const TimeStamp = (props) => { const time = DateTime.fromISO(props.time); const absolute = time.toFormat('MMMM Do YYYY, h:mm:ss a'); const relative = time.toRelative(); + console.log(TimeStamp('2018-05-29T22:49:33+00:00')); return {relative}; }; diff --git a/yarn.lock b/yarn.lock index b09a8b80b..80f5cc1d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3864,15 +3864,10 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001332: - version "1.0.30001344" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz#8a1e7fdc4db9c2ec79a05e9fd68eb93a761888bb" - integrity sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g== - -caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426: - version "1.0.30001439" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb" - integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A== +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426: + version "1.0.30001441" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz" + integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg== case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" From c9c28c50dde66859ecc140b77eef21a21f5b088b Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 4 Jan 2023 16:32:06 -0800 Subject: [PATCH 6/7] Got timestamp to work --- src/components/ChatEntry.js | 11 ++++++----- src/components/ChatLog.js | 4 +--- src/components/TimeStamp.js | 1 - 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index f54e44375..d2b807b28 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -4,18 +4,19 @@ import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp.js'; const ChatEntry = (props) => { - const sender = props.sender; console.log(props.timeStamp); + const sender = props.sender; const senderBody = props.body; + const timeStamp = props.timeStamp; return (

{sender}

{senderBody}

-

-

{TimeStamp(props.timeStamp)}

-

+
+ +
@@ -25,7 +26,7 @@ const ChatEntry = (props) => { ChatEntry.propTypes = { sender: PropTypes.string.isRequired, body: PropTypes.string.isRequired, - timeStamp: PropTypes.func.isRequired, + timeStamp: PropTypes.string.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 81cb3c900..3c2af7ad5 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -1,11 +1,9 @@ import React from 'react'; import './ChatLog.css'; import PropTypes from 'prop-types'; -import TimeStamp from './TimeStamp'; import ChatEntry from './ChatEntry'; const ChatLog = (props) => { - console.log(props); const chatLogComponents = []; const chatLogList = props.chatLogList; @@ -15,7 +13,7 @@ const ChatLog = (props) => { key={chat.id} sender={chat.sender} body={chat.body} - timeStamp={TimeStamp} + timeStamp={chat.timeStamp} /> ); } diff --git a/src/components/TimeStamp.js b/src/components/TimeStamp.js index bb77f8138..51232778b 100644 --- a/src/components/TimeStamp.js +++ b/src/components/TimeStamp.js @@ -4,7 +4,6 @@ const TimeStamp = (props) => { const time = DateTime.fromISO(props.time); const absolute = time.toFormat('MMMM Do YYYY, h:mm:ss a'); const relative = time.toRelative(); - console.log(TimeStamp('2018-05-29T22:49:33+00:00')); return {relative}; }; From 36a61d6c3e51d2ba2c3a4855c03cbd6f9e9fa747 Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 4 Jan 2023 17:00:20 -0800 Subject: [PATCH 7/7] Modified the button --- src/components/ChatEntry.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index d2b807b28..99349c557 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -2,12 +2,17 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; import TimeStamp from './TimeStamp.js'; +import { useState } from 'react'; const ChatEntry = (props) => { - console.log(props.timeStamp); const sender = props.sender; const senderBody = props.body; const timeStamp = props.timeStamp; + const [isLiked, setIsLiked] = useState(false); + + const changeColorHeart = () => { + setIsLiked(!isLiked); + }; return (
@@ -17,7 +22,10 @@ const ChatEntry = (props) => {
- + +
);