clarify requirements in project docs

README.md

@@ -1,8 +1,8 @@
 # React Chat Log
-In this project you 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 and a color choosing feature. 
+In this project you 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. 
 
 ## Skills Assessed
-- Building React components that recieve data through props
+- Building React components that receive data through props
 - Building React container components that pass information to their subcomponents
 - Initializing and using state within a component
 - Passing callback functions to child components and using them to update state
@@ -11,7 +11,7 @@ In this project you will use core React concepts to build a chat messenger-style
 - 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.
+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-extras.png)
 
@@ -24,9 +24,9 @@ This project comes with a minimal scaffold based on the baseline React applicati
 
 ## Testing
 
-We will notice that 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 components names and props. The integration tests for Wave 03 allow for more freedom in the implementation details of this wave's feature. 
+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 components names and props. 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, reviewing these front-end tests gives us initial exposure to what unit tests and integrations tests look for front-end testing.
+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 and functionality. 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/)

project-docs/wave-01.md

@@ -4,15 +4,15 @@ Update the `ChatEntry` and `App` components to display a single chat message bub
 
 A good way to test this code as you write it would be to take the first chat message from the JSON data file and use it as the data for the `ChatEntry` component.
 
-`ChatEntry` should have props which match the elements from each chat message in the JSON data file: `sender`, `body`,  and `timeStamp`.
+`ChatEntry` should have props which match the elements from each chat message in the JSON data file: `sender`, `body`,  and `timeStamp`. Note: We do not need to include the `id` and `liked` fields for Wave 01.
 
 ## Styling
 
 The styles necessary to make an app which visually matches the demo above have been provided for you, but you will need to make use of them in your React components by adding classes to specific HTML elements in your JSX.
 
 There are several CSS classes for the different elements of a chat message. You should attempt to determine which classes should be applied to which HTML elements, however if you are stuck on this please ask a member of the instructional staff as the styling on this project is not the learning goal.
 
-Usually our convention for styles in React applications is to have a separate CSS file for every component (refer to the scaffold for React Timeline as an example). 
+Usually our convention for styles in React applications is to have a separate CSS file for every component. 
 
 **NOTE**: Unless you are working on the optional enhancement, make sure that your chat message's container element has both the classes "chat-entry" and "local".
 

project-docs/wave-02.md

@@ -4,7 +4,7 @@ Implement a `ChatLog` component and update the `App` component to display an ent
 
 `ChatLog` takes one prop named `entries` (which is an array).
 
-At this point, we can use the entire chat message data from the JSON file `entries.json` to test our code as you implement each component.
+At this point, we can use the entire chat message data from the JSON file `messages.json` to test our code as you implement each component. We may chose to update the `ChatEntry` to use the `id` field in this wave.
 
 ## Styling
 

project-docs/wave-03.md

@@ -1,20 +1,22 @@
 # Wave 03: Event Handling and Lifting Up State
 
-In this wave we will update to components to manage liking 
+In this wave we will update the components to manage a **like** feature. 
 
-- Add behavior to heart button in `ChatEntry` so that when it is clicked it toggles from an empty heart to a filled heart and from a filled heart to and empty heart.
-- Manage the click event and state of the chat messages such that when the like status of a chat message changes by clicking the heart button, it is tracked by the `App` such that the `App` reports the number of total messages that have been liked.
-
-🤍❤️
+- Add behavior to heart button in `ChatEntry` so that when it is clicked it toggles from an empty heart (🤍) to a filled heart (❤️) and from a filled heart (❤️) to and empty heart (🤍).
+- Manage the click event and state of the chat entries such that when the like status of a chat message changes by clicking the heart button, it is tracked by the `App` such that the `App` reports the number of total messages that have been liked.
+    - If the user has liked three messages, `3 ❤️s` will appear at the top of the screen.
 
 <details>
-    <summary>Hints</summary>
-
-- Note the class names in `ChatEntry.css` that are used to render a filled and unfilled heart
-- Consider writing a helper function in `App` to calculate the number of filled heart
+    <summary>Expand to see hints for implementing this feature</summary>
 
+- We will now need to update the `ChatEntry` component to use the `liked` field.
+- When we click a heart, the state of the `entries` will need to update in our `App` so that it can report the number of likes (❤️s). 
+- Consider implementing a helper function to calculate the number of likes (❤️s).
+- Consider using a ternary to display a 🤍 or a ❤️ as needed.
 </details>
 
 ## Tests
 
-The tests for this component don't make assumptions about the implementation details of like feature. They check that when you click on a 🤍 button it changes to a ❤️, and when you click on a ❤️ it changes to a 🤍. It also verifies that clicking on one `ChatEntry`'s like button (🤍) doesn't change other `ChatEntry`'s buttons. Finally, the tests check 
+The tests for this component are integration tests. They don't make assumptions about the implementation details of like feature. The tests verify the following functionality:
+- When the user click on a 🤍 button it changes to a ❤️, and when the user clicks on a ❤️ it changes to a 🤍. This test also verifies that clicking on one `ChatEntry`'s like button (🤍) doesn't change other `ChatEntry`'s buttons. 
+- The correct number of filled hearts is displayed at the top of the screen.