diff --git a/src/App.js b/src/App.js index c10859093..3b8bb67cc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,71 @@ 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); + }; + + let heartCount = 0; + for (const eachMessage of messages) { + if (eachMessage.liked) { + heartCount += 1; + } + } + + //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 (
-

Application title

+

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

+

{heartCount} ❤️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..b586b4ef3 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -3,20 +3,63 @@ 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; + console.log(props.sender); + + //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 ? ( + + ) : ( + + ); + + //optional decide local and remote~~~~~~~~~~~~~~~~~~~~~ + const chatEntry = props.sender === props.local ? 'local' : 'remote'; + // console.log('Entry', props.chatEntry); + //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + 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..41e7bcc7f --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,53 @@ +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); + // }; + + //optional: decide local and remote~~~~~~~~~~~~~ + // console.log('Log', props.local); + //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + + return ( +
  • + +
    • + ); + }); + return ( +
    +
      {chatEntryComp}
    +
    + ); +}; + +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(); });