diff --git a/README.md b/README.md index 71851feea..2d460c4b2 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # React Chat Log -In this project we will use core React concepts to build a chat messenger-style application that displays a log of chat messages between two people, using static data from a JSON file. We will build user interaction with a like feature. +Chat messenger-style application that displays a log of chat messages between two people, using static data from a JSON file. User interaction is built in with a like feature. ## Skills Assessed - Building React components that receive data through props @@ -10,27 +10,6 @@ In this project we will use core React concepts to build a chat messenger-style - Using git as part of the development workflow - Demonstrating understanding of the front-end layer, and the relationship between user interaction and the UI -## Project Outline -This project comes with a minimal scaffold based on the baseline React application generated by `create-react-app`. We provide the JSON file with static chat message data and the CSS styles, and you will need to implement all of the components except for the provided `TimeStamp` component. - -![React Chat Log demo](./images/react-chatlog-demo.png) - -## Project Directions -- [Planning and Setup](./project-docs/setup.md) -- [Wave 01: Presentational Component](./project-docs/wave-01.md) -- [Wave 02: Container Component](./project-docs/wave-02.md) -- [Wave 03: Event Handling and Lifting Up State](./project-docs/wave-03.md) -- [Optional Enhancements](./project-docs/optional-enhancements.md) - -## Testing - -The tests for this project are a mix of unit tests (Waves 01 and 02) and integration tests (Wave 03). The directions for each wave include a section about the tests for that wave. The unit tests provided for Wave 01 and Wave 02 require us to be prescriptive around component and prop names. The integration tests for Wave 03 allow for more freedom in the implementation details of this wave's feature. - -Writing front-end tests is outside the scope of the core curriculum. We provide minimal tests for this project for a few reasons. We can use these tests to partially verify the correctness of our code. Tests support the refactoring process and enforce consistency in implementation details. Additionally, by reviewing these front-end tests, we have some exposure to what unit tests and integration tests look like in front-end testing. - -Follow your curiosity to learn more about front-end testing: -- [Front End Testing: A Complete Conceptual Overview](https://www.testim.io/blog/front-end-testing-complete-overview/) -- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - - +## +react-chatlog diff --git a/src/App.js b/src/App.js index c10859093..e93e4d816 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,44 @@ import React from 'react'; import './App.css'; +import ChatLog from './components/ChatLog'; import chatMessages from './data/messages.json'; +import { useState } from 'react'; const App = () => { + const [entryData, setEntryData] = useState(chatMessages); + + const updateLikedMessage = (id) => { + const allEntries = entryData.map((entry) => { + if (entry.id === id) { + return { ...entry, liked: !entry.liked }; + } else { + return entry; + } + }); + setEntryData(allEntries); + }; + + const totalLikes = () => { + const allLikes = entryData.reduce((likeCount, entry) => + likeCount + entry.liked, 0); + return allLikes + }; + + const allLikes = totalLikes(); + return (
-

Application title

+

Chat between Vladimir and Estragon

+
+
{allLikes} ❤️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 b92f0b7b2..39928391d 100644 --- a/src/components/ChatEntry.js +++ b/src/components/ChatEntry.js @@ -1,22 +1,43 @@ import React from 'react'; import './ChatEntry.css'; import PropTypes from 'prop-types'; +import TimeStamp from './TimeStamp'; const ChatEntry = (props) => { + const id = props.id; + const sender = props.sender; + const body = props.body; + const timeStamp = props.timeStamp; + const liked = props.liked; + + const senderSide = + sender === 'Vladimir' ? 'chat-entry local' : 'chat-entry remote'; + + const heart = liked ? '❤️' : '🤍'; + return ( -
-

Replace with name of sender

+
+

{sender}

-

Replace with body of ChatEntry

-

Replace with TimeStamp component

- +

{body}

+

+ +

+
); }; 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.isRequired, + onUpdateLikedMessage: PropTypes.func.isRequired, }; export default ChatEntry; diff --git a/src/components/ChatLog.js b/src/components/ChatLog.js new file mode 100644 index 000000000..45694ec90 --- /dev/null +++ b/src/components/ChatLog.js @@ -0,0 +1,40 @@ +import React from 'react'; +import './ChatLog.css'; +import './ChatEntry.css'; +import PropTypes from 'prop-types'; +import ChatEntry from './ChatEntry'; + +const ChatLog = (props) => { + const messages = props.entries.map((message) => { + return ( +
+ +
+ + ); + }); + + return
{messages}
; +}; + +ChatLog.propTypes = { + entries: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + sender: PropTypes.string.isRequired, + body: PropTypes.string, + timeStamp: PropTypes.string.isRequired, + liked: PropTypes.bool.isRequired + }) + ), + onUpdateLikedMessage: PropTypes.func.isRequired +}; + +export default ChatLog;