Merge pull request #31 from AdaGold/be/c17-update-wave-directions

Adds Wave 03 (like feature) and tests, update project directions and components scaffold

.prettierrc

@@ -0,0 +1 @@
+{ "singleQuote": true}

README.md

@@ -1,30 +1,36 @@
 # React Chat Log
-In this project you will use core React concepts to build a chat messenger-style application which 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 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. 
 
 ## Skills Assessed
-- Building React components which recieve data through props
-- Building React container components which pass information to their subcomponents
+- 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 use them to update state
-- Practice reading and running tests
+- Passing callback functions to child components and using them to update state
+- Practicing reading and running tests
 - 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.
+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.gif)
+![React Chat Log demo](./images/react-chatlog-demo-extras.png)
 
 ## Project Directions
 - [Planning and Setup](./project-docs/setup.md)
-- [Wave 01](./project-docs/wave-01.md)
-- [Wave 02](./project-docs/wave-02.md)
-- [Wave 03](./project-docs/wave-03.md)
-- [Wave 04](./project-docs/wave-04.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/)
 
 
 

package.json

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "moment": "^2.29.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1"
+    "react-scripts": "4.0.1",
+    "luxon": "^2.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -28,6 +28,5 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
-  "devDependencies": {  }
+  ]
 }

project-docs/optional-enhancements.md

@@ -5,8 +5,15 @@ At this point you should have a chat log which shows chat messages from two diff
 
 In order to do this you will need to figure out a way, without modifying the JSON file itself, to determine whether each message is "local" or "remote". There are different ways to decide that, and because this is not a real-world application you should feel free to pick whatever way suits you.
 
-Once you can designate each message as either local or remote, you should modify your chat message component(s) to include the CSS class "local" or "remote" as appropriate. This class should be added to whatever HTML element has the "chat-entry" class.
+Once you can designate each message as either local or remote, you should modify your `ChatEntry` component(s) to include the CSS class "local" or "remote" as appropriate. This class should be added to whatever HTML element has the "chat-entry" class.
+
+## Color Choice
+Now that we have designated `ChatEntry`s as `"local"` or `"remote"`, let's add a feature to style the entries from different senders with different colors. Take a look at the image our solution for one suggestion on how to implement a color picking feature. 
+
+### Hints
+Our solution uses a `ColorChoice` component with a `setColorCallback` prop that sets the color in the `App`. Once the color in the `App` is set, it is passed as a prop through the `ChatLog` to the `ChatEntry` components.
 
 ## Header title
-One last finishing touch, the application title in the header. The text of the title should be determined dynamically based on the names of the participants in the chat log data. Consult the demo above for an example of what the title might contain.
+For one last finishing touch, consider updating the application title in the header. The text of the title should be determined dynamically based on the names of the participants in the chat log data. Consult the image of the example solution for what the title might contain.
 
+![React Chat Log demo](../images/react-chatlog-demo-extras.png)

project-docs/setup.md

@@ -1,17 +1,27 @@
 ## Baseline
+
 Examine the JSON file located at `src/data/messages.json` to familiarize yourself with the data you will be using.
 
-What properties comprise an individual chat message? What are their data types? How are the chat messages organized? Are they sorted in a particular way?
+**Now consider the following:**
+- What properties comprise an individual chat message?
+- What are their data types?
+- How are the chat messages organized?
+- Are they sorted in a particular way?
 
 After considering the data, you should begin to explore how React components might be used to transform that data into a static chat log web page. Specifically, what components will be needed? Are any of the components nested within another component? Are there any components which appear on the page multiple times?
 
 Next, link the data to the components. Take a look at the JSON file again. Each piece of data (e.g. a string or date) will be used through the `props` for a particular component, so try to match the correct component for every piece of data in the JSON file. Keep in mind that components can use multiple pieces of data.
 
+Now, examine the components inside `src/components` to familiarize yourself with the components listed inside.
+
 Once you've identified which data will be used by which components, consider the structure of the data. Which pieces of data are grouped together into data structures? This is often a sign that those pieces of data will be used by the same component. Are there any nested data structures? This is usually a sign that components should be nested as well, with the more deeply nested components using the more deeply nested data.
 
-Finally, after analyzing the provided data and designing a set of components and their relationships to the data, you should write down your proposed design and discuss it with your chair pair. Is their design different from yours? If so, discuss the reasoning for each of yours designs and determine any possible pros/cons for both approaches.
+Finally, after analyzing the provided data and designing a set of components and their relationships to the data, you should write down your proposed design.
+
 
-At the end we will discuss the design choices as a whole class.
+Consider discussing your design with a classmate. Is their design different from yours? If so, discuss the reasoning for each of yours designs and determine any possible pros/cons for both approaches.
 
 ## Setup
-After forking and cloning this repo you must run `npm install` in the project directory. This will download and install all of the necessary NPM modules required by the project. After that finishes successfully you can run `npm start` to begin the local development server.
+
+After forking and cloning this repo you must run `npm install` in the project directory. This will download and install all of the necessary NPM modules required by the project. After that finishes successfully, run `npm start` to begin the local development server.
+

project-docs/wave-01.md

@@ -1,17 +1,21 @@
-# Wave 1
-For wave 1 implement the component(s) necessary to display a single chat message bubble with the message text and relative timestamp, plus the sender's name above it.  
+# Wave 01: Presentational Component
 
-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 component(s) you are implementing.
+Update the `ChatEntry` and `App` components to display a single chat message bubble with the message text and relative timestamp, plus the sender's name above it.  
 
-## Tests
+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.
 
-This component has a set of tests that ensure that props passed to the component appear in the browser.  To pass the tests you should name this component **ChatEntry** and give it props which match, (including the name of the props) the elements from each chat message in the JSON data file.  Otherwise the tests will not pass.  Alternatively you can adjust the tests to use the proper props.
+`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.
+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 yourself. However, if you are stuck on this, please reach out for help as the styling is not the primary learning goal of this project.
+
+Usually our convention for styles in React applications is to have a separate CSS file for every component. 
 
-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). 
+**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".
+
+## Tests
 
-**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".
+This component has a set of tests that ensure that props passed to the component appear in the browser. To pass the tests, the component must be named `ChatEntry` with props `sender`, `body`,  and `timeStamp`.

project-docs/wave-02.md

@@ -1,9 +1,15 @@
-# Wave 2
+# Wave 02: Container Component
 
-In this wave you will extend from displaying a single chat message to an entire chat log. The focus here should be on creating component(s) that can display a sequence of individual chat message components.
+Implement a `ChatLog` component and update the `App` component to display an entire chat log. `ChatLog` should display a sequence of individual `ChatEntry` components.
 
-At this point you should be able to use the entire chat message data from the JSON file to test your code as you implement each component.
+`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 `messages.json` to test our code as you implement each component. We may choose to update the `ChatEntry` to use the `id` field in this wave.
+
+## Styling
+
+Note the rule set in `ChatLog.css` and consider how to apply it to the `ChatLog` component. Remember, applying the provided styles is not one of the main learning goals for this project.
 
 ## Tests
 
-The tests as written for this component assume that the component is named `ChatLog` and takes one prop named `chatMessages` (which is an array).
+The tests for this component assume that the component is named `ChatLog` and takes one prop named `entries` (which is an array).

project-docs/wave-03.md

@@ -1 +1,23 @@
-# Wave 03 - Like
+# Wave 03: Event Handling and Lifting Up State
+
+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 an 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` and the `App` reports the number of total messages that have been liked.
+    - Example: If the user has liked three messages, `3 ❤️s` will appear at the top of the screen.
+
+<details>
+    <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 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.
+- If you make a design decision to use a different emoji, you will need to change the tests accordingly.

src/App.css

@@ -9,14 +9,66 @@
   position: fixed;
   width: 100%;
   z-index: 100;
+  text-align: center;
+  align-items: center;
 }
 
 #App main {
+  padding-left: 2em;
+  padding-right: 2em;
   padding-bottom: 5rem;
-  padding-top: 7rem;
+  padding-top: 10rem;
 }
 
 #App h1 {
   font-size: 1.5em;
   text-align: center;
+  display: inline-block;
+}
+
+#App header section {
+  background-color: #e0ffff;
 }
+
+#App .widget {
+  display: inline-block;
+  line-height: 0.5em;
+  border-radius: 10px;
+  color: black;
+  font-size:0.8em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+#App #heartWidget {
+  font-size: 1.5em;
+  margin: 1em
+}
+
+#App span {
+  display: inline-block
+}
+
+.red {
+  color: #b22222
+}
+
+.orange {
+  color: #e6ac00
+}
+
+.yellow {
+  color: #e6e600
+}
+
+.green {
+  color: green
+}
+
+.blue {
+  color: blue
+}
+
+.purple {
+  color: purple
+}

src/App.js

@@ -3,15 +3,14 @@ import './App.css';
 import chatMessages from './data/messages.json';
 
 const App = () => {
-  console.log(chatMessages);
-
   return (
     <div id="App">
       <header>
         <h1>Application title</h1>
       </header>
       <main>
-
+        {/* Wave 01: Render one ChatEntry component
+        Wave 02: Render ChatLog component */}
       </main>
     </div>
   );