JL master - README Updates.

README.md

@@ -2,9 +2,9 @@
 
 # Project Summary
 
-In this project, we'll introduce how to use axios inside of a React project. We'll cover full CRUD in this project ( GET, PUT, POST, DELETE ) and also cover how to use .then(). Majority of the React application will already be built for you. If you're finding it hard to dive into an existing code base and understand exactly what is going on, that's perfectly normal. Try to focus only on how we're interacting with the API using axios.
+In this project, we'll introduce how to use `axios` inside of a React project. We'll cover full `CRUD` in this project ( GET, PUT, POST, DELETE ) and also cover how to use .then(). Majority of the React application will already be built for you. If you're finding it hard to dive into an existing code base and understand exactly what is going on, that's perfectly normal. Try to focus only on how we're interacting with the API using `axios`.
 
-This project is also incorporating toast notifications to help visualize successful or failed API requests. Therefore when building out our axios requests, we will add an additional line of code for successful and failed API requests.
+This project is also incorporating toast notifications to help visualize successful or failed API requests. Therefore when building out our `axios` requests, we will add an additional line of code for successful and failed API requests.
 
 * Success: `toast.success("Success!");`
 * Failure: `toast.error("Failed!");`
@@ -24,24 +24,143 @@ Please reference this API documentation when completing the project steps.
 
 ## Step 1
 
-GET
+### Summary
+
+In this step, we'll make use of `axios` to get the `Get All Vehicles` button to work. When fetching data from a server you should always use a GET request.
+
+### Instructions
+
+* Open `./src/App.js`.
+* Locate the pre-made `getVehicles` method.
+* Using `axios` and the API documentation make a GET request to receive all the vehicles.
+  * If the request is successful, use `this.setState()` to update the value of `vehiclesToDisplay` and use `toast.success`.
+    * Hint: Inspect the returned data object.
+  * If the request is unsuccessful, use `toast.error`.
+
+
+### Solution
+
+<details>
+
+<summary> <code> ./src/App.js ( getVehicles method ) </code> </summary>
+
+```js
+getVehicles() {
+  axios.get('https://joes-autos.herokuapp.com/api/vehicles').then( results => {
+    toast.success("Successfully got Vehicles.");
+    this.setState({ 'vehiclesToDisplay': results.data });
+  }).catch( () => toast.error("Failed at fetching Vehicles") );
+}
+```
+
+</details>
 
 ## Step 2
 
-PUT
+### Summary
+  In this step, we'll make use of `axios` to get the `Increase Price` and `Decrease Price` buttons to work. When modifying/updating data on a server you always use a PUT request.
+
+### Instructions
+
+* Open `./src/App.js`.
+* Locate the pre-made `updatePrice` method.
+* Using `axios` and the API documentation make a PUT request to either increase or decrease the price.
+  * If the request is successful, use `this.setState()` to update the value of `vehiclesToDisplay` and use `toast.success`.
+    * Hint: Inspect the returned data object.
+  * If the request is unsuccessful, use `toast.error`.
+
+### Solution
+
+<details>
+
+<summary> <code> ./src/App.js ( updatePrice method ) </code> </summary>
+
+```js
+updatePrice( priceChange, id ) {
+  axios.put(`https://joes-autos.herokuapp.com/api/vehicles/${ id }/${ priceChange }`).then( results => {
+    toast.success("Successfully updated price.");
+    this.setState({ 'vehiclesToDisplay': results.data.vehicles });
+  }).catch( () => toast.error("Failed at updating price") );
+}
+```
+
+</details>
 
 ## Step 3
 
-POST
+### Summary
+
+In this step, we'll make use of `axios` to get the `Add vehicle` button to work. When creating new data on a server you should always use a POST request.
+
+### Instructions
+
+* Open `./src/App.js`.
+* Locate the pre-made `addCar` method.
+* Using `axios` and the API documentation make a POST request to create a new vehicle.
+  * If the request is successful, use `this.setState()` to update the value of `vehiclesToDisplay` and use `toast.success`.
+    * Hint: Inspect the returned data object.
+  * If the request is unsuccessful, use `toast.error`.
+
+### Solution
+
+<details>
+
+<summary> <code> ./src/App.js ( addCar method ) </code> </summary>
+
+```js
+addCar() {
+  let newCar = {
+    make: this.refs.make.value,
+    model: this.refs.model.value,
+    color: this.refs.color.value,
+    year: this.refs.year.value,
+    price: this.refs.price.value
+  };
+
+  axios.post('https://joes-autos.herokuapp.com/api/vehicles', newCar).then( results => {
+    toast.success("Successfully added vehicle.");
+    this.setState({ vehiclesToDisplay: results.data.vehicles });
+  }).catch( () => toast.error('Failed at adding new vehicle.') );
+}
+```
+
+</details>
 
 ## Step 4
 
-DELETE
+### Summary
 
-## Black Diamond
+In this step, we'll make use of `axios` to get the `SOLD!` button to work. When deleting data on a server you should always use a DELETE request.
 
-Complete the remaining methods..
+### Instructions
+
+* Open `./src/App.js`.
+* Locate the pre-made `sellCar` method.
+* Using `axios` and the API documentation make a DELETE request to delete ( "sell" ) a vehicle.
+  * If the request is successful, use `this.setState()` to update the value of `vehiclesToDisplay` and use `toast.success`.
+    * Hint: Inspect the returned data object.
+  * If the request is unsuccessful, use `toast.error`.
+
+### Solution
+
+<details>
+
+<summary> <code> ./src/App.js ( sellCar method ) </code> </summary>
+
+```js
+sellCar( id ) {
+  axios.delete(`https://joes-autos.herokuapp.com/api/vehicles/${ id }`).then( results => {
+    toast.success("Successfully sold car.");
+    this.setState({ 'vehiclesToDisplay': results.data.vehicles });
+  }).catch( () => toast.error("Failed at selling car.") );
+}
+```
+
+</details>
+
+## Black Diamond
 
+If there is extra time during the lecture, try to complete the remaining methods. The remaining methods can also be used as `axios` and `CRUD` practice on your own time.
 
 ## Contributions