From d97d8bdcd186889880534c19bc9be79b188dc3a6 Mon Sep 17 00:00:00 2001 From: Ying Ye Date: Wed, 22 Jun 2022 22:10:57 -0400 Subject: [PATCH 1/2] finished wave1 and wave2, still working on wave3 --- src/App.js | 46 ++++++++++++++++++++++++++++++-- src/components/ChatEntry.css | 3 ++- src/components/ChatEntry.js | 46 ++++++++++++++++++++++++++++---- src/components/ChatLog.js | 47 +++++++++++++++++++++++++++++++++ src/components/ChatLog.test.js | 48 +++++++++++++++++----------------- 5 files changed, 158 insertions(+), 32 deletions(-) create mode 100644 src/components/ChatLog.js diff --git a/src/App.js b/src/App.js index c10859093..cfde98903 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,61 @@ import React from 'react'; import './App.css'; +// import ChatEntry from './components/ChatEntry'; import chatMessages from './data/messages.json'; +import ChatLog from './components/ChatLog'; const App = () => { + const [messages, setMessages] = React.useState([]); + // + React.useEffect(() => { + // populate message state with stored messages + setMessages(chatMessages); + }, []); + + const heartToggling = (updatedMessage) => { + const updatedMessages = messages.map((message) => { + if (message.id === updatedMessage.id) { + return updatedMessage; + } else { + return message; + } + }); + + setMessages(updatedMessages); + }; + + //counting red hearts~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + const countingLikes = (messages) => { + let heartCount = 0; + for (const eachMessage of messages) { + if (eachMessage.liked) { + heartCount += 1; + } + } + return heartCount; + }; + //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + // remove it later !!!!!!!!!!!!!!!!!!!!! + // console.log(chatEntryComp); return (
-

Application title

+

+ Chat between {chatMessages[0]['sender']} and{' '} + {chatMessages[1]['sender']} +

+

{countingLikes}❤️s

{/* Wave 01: Render one ChatEntry component - Wave 02: Render ChatLog component */} + // Wave 02: Render ChatLog component */} +
); }; export default App; + +//create count state in the app comp, pass down the updated message to the chatEntry comp, +//every time a heart is clicked, increase the count by 1 diff --git a/src/components/ChatEntry.css b/src/components/ChatEntry.css index 05c3baa44..d0e8d6539 100644 --- a/src/components/ChatEntry.css +++ b/src/components/ChatEntry.css @@ -97,4 +97,5 @@ button { .chat-entry.remote .entry-bubble:hover::before { background-color: #a9f6f6; -} \ No newline at end of file +} + diff --git a/src/components/ChatEntry.js b/src/components/ChatEntry.js index b92f0b7b2..4cfb56481 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,20 +3,56 @@ import './ChatEntry.css'; import PropTypes from 'prop-types'; const ChatEntry = (props) => { + //display tomes as ..years ago + let currentYear = new Date().getFullYear(); + let pastYear = parseInt(props.timeStamp.slice(0, 4)); + console.log(pastYear); + const agoTime = currentYear - pastYear; + + //event handler for like button click + const handleHeartClick = () => { + const messageUpdated = { + id: props.id, + sender: props.sender, + body: props.body, + timeStamp: props.timeStamp, + liked: !props.liked, + }; + props.heartToggling(messageUpdated); + }; + + const button = props.liked ? ( + + ) : ( + + ); + return (
-

Replace with name of sender

+

{props.sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{props.body}

+

{agoTime} years ago

+ {/* */} + {button}
); }; 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, + heartToggling: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..31248ca20 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,47 @@ +import React from 'react'; +import ChatEntry from './ChatEntry'; +import './ChatLog.css'; +import PropTypes from 'prop-types'; + +const ChatLog = (props) => { + const chatEntryComp = props.entries.map((chatMessage, index) => { + // const updateMessage = (updatedMessage) => { + // //update only the current message + // const allMessages = [...props.messages]; + // allMessages[index] = updatedMessage; + // props.setMessages(allMessages); + // }; + return ( +
  • + +
    • + ); + }); + return ( +
    + +
    + ); +}; + +ChatLog.propTypes = { + messages: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string.isRequired, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool, + }) + ), + heartToggling: PropTypes.func.isRequired, +}; + +export default ChatLog; diff --git a/src/components/ChatLog.test.js b/src/components/ChatLog.test.js index 96f89ebc3..5bafee291 100644 --- a/src/components/ChatLog.test.js +++ b/src/components/ChatLog.test.js @@ -1,49 +1,49 @@ -import React from "react"; -import "@testing-library/jest-dom/extend-expect"; -import ChatLog from "./ChatLog"; -import { render, screen } from "@testing-library/react"; +import React from 'react'; +import '@testing-library/jest-dom/extend-expect'; +import ChatLog from './ChatLog'; +import { render, screen } from '@testing-library/react'; const LOG = [ { - sender: "Vladimir", - body: "why are you arguing with me", - timeStamp: "2018-05-29T22:49:06+00:00", + sender: 'Vladimir', + body: 'why are you arguing with me', + timeStamp: '2018-05-29T22:49:06+00:00', }, { - sender: "Estragon", - body: "Because you are wrong.", - timeStamp: "2018-05-29T22:49:33+00:00", + sender: 'Estragon', + body: 'Because you are wrong.', + timeStamp: '2018-05-29T22:49:33+00:00', }, { - sender: "Vladimir", - body: "because I am what", - timeStamp: "2018-05-29T22:50:22+00:00", + sender: 'Vladimir', + body: 'because I am what', + timeStamp: '2018-05-29T22:50:22+00:00', }, { - sender: "Estragon", - body: "A robot.", - timeStamp: "2018-05-29T22:52:21+00:00", + sender: 'Estragon', + body: 'A robot.', + timeStamp: '2018-05-29T22:52:21+00:00', }, { - sender: "Vladimir", - body: "Notabot", - timeStamp: "2019-07-23T22:52:21+00:00", + sender: 'Vladimir', + body: 'Notabot', + timeStamp: '2019-07-23T22:52:21+00:00', }, ]; -describe("Wave 02: ChatLog", () => { +describe('Wave 02: ChatLog', () => { beforeEach(() => { render(); }); - test("renders without crashing and shows all the names", () => { + test('renders without crashing and shows all the names', () => { [ { - name: "Vladimir", + name: 'Vladimir', numChats: 3, }, { - name: "Estragon", + name: 'Estragon', numChats: 2, }, ].forEach((person) => { @@ -56,7 +56,7 @@ describe("Wave 02: ChatLog", () => { }); }); - test("renders an empty list without crashing", () => { + test('renders an empty list without crashing', () => { const element = render(); expect(element).not.toBeNull(); }); From ecf09da749323df9513a091562cfa2541d97018f Mon Sep 17 00:00:00 2001 From: Ying Ye Date: Thu, 23 Jun 2022 01:29:57 -0400 Subject: [PATCH 2/2] finished wave 3 and optional besides colorChoice --- src/App.js | 42 +++++++++++++++++++++++-------------- src/components/ChatEntry.js | 11 ++++++++-- src/components/ChatLog.js | 6 ++++++ 3 files changed, 41 insertions(+), 18 deletions(-) diff --git a/src/App.js b/src/App.js index cfde98903..3b8bb67cc 100644 --- a/src/App.js +++ b/src/App.js @@ -24,32 +24,42 @@ const App = () => { setMessages(updatedMessages); }; - //counting red hearts~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - const countingLikes = (messages) => { - let heartCount = 0; - for (const eachMessage of messages) { - if (eachMessage.liked) { - heartCount += 1; - } + let heartCount = 0; + for (const eachMessage of messages) { + if (eachMessage.liked) { + heartCount += 1; } - return heartCount; - }; - //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - // remove it later !!!!!!!!!!!!!!!!!!!!! - // console.log(chatEntryComp); + } + + //optional:decide local and remote~~~~~~~~~~~~~~~~~~~~~~~~~ + const local = chatMessages[0].sender; + let remote; + for (const eachMessage of chatMessages) { + if (eachMessage.sender !== local) { + remote = eachMessage.sender; + } + } + // console.log('App', local); + //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + return (

    - Chat between {chatMessages[0]['sender']} and{' '} - {chatMessages[1]['sender']} + {/* Chat between {chatMessages[0]['sender']} and{' '} + {chatMessages[1]['sender']} */} + Chat between {local} and {remote}

    -

    {countingLikes}❤️s

    +

    {heartCount} ❤️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 4cfb56481..b586b4ef3 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -6,8 +6,9 @@ const ChatEntry = (props) => { //display tomes as ..years ago let currentYear = new Date().getFullYear(); let pastYear = parseInt(props.timeStamp.slice(0, 4)); - console.log(pastYear); + // console.log(pastYear); const agoTime = currentYear - pastYear; + console.log(props.sender); //event handler for like button click const handleHeartClick = () => { @@ -31,8 +32,14 @@ const ChatEntry = (props) => { ); + //optional decide local and remote~~~~~~~~~~~~~~~~~~~~~ + const chatEntry = props.sender === props.local ? 'local' : 'remote'; + // console.log('Entry', props.chatEntry); + //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + return ( -
    + //
    +

    {props.sender}

    {props.body}

    diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js index 31248ca20..41e7bcc7f 100644 --- a/src/components/ChatLog.js +++ b/src/components/ChatLog.js @@ -11,6 +11,11 @@ const ChatLog = (props) => { // allMessages[index] = updatedMessage; // props.setMessages(allMessages); // }; + + //optional: decide local and remote~~~~~~~~~~~~~ + // console.log('Log', props.local); + //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + return (
  • { timeStamp={chatMessage.timeStamp} liked={chatMessage.liked} heartToggling={props.heartToggling} + local={props.local} >
    • );