Project Summary

In this project, we'll introduce axios, which is a JavaScript library used to make HTTP requests, we'll learn how to use it inside of a React project. We'll cover full CRUD ( GET, PUT, POST, DELETE ) and also cover how to use .then(). The 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. It's most important to focus only on how we're interacting with the API using axios.

To help you understand wether or not you API requests are failing or successful, we've used a UI tool to build in the ability to visualize notifications in the app. The specific style we use is referred to as a "toast" notification. To take advantage of this capability to visualize successful and failed API requests, an additional line of code will need to be added to axios requests, examples of which can be found below.

• Success: toast.success("Success!");
• Failure: toast.error("Failed!");

Live Example: https://boomcamp.github.io/react-3-mini

Setup

1. Fork and clone this repository.
2. cd into the project directory.
3. Run npm install.
4. Run npm start.
5. In a seperate terminal, cd into the project directory.

API Documentation

Docs Here

The Base API url is: joes-autos.herokuapp.com/api

Please reference this API documentation when completing the project steps.

Axios Documentation

Axios Docs

Step 1

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

./src/App.js ( getVehicles method )

getVehicles() {
  axios
    .get('https://joes-autos.herokuapp.com/api/vehicles')
    .then(response => {
      toast.success('Successfully got vehicles');
      this.setState({ vehiclesToDisplay: response.data })
    })
    .catch(() => toast.error('Failed to fetch vehicles'))
}

Step 2

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, typically, you'll 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

./src/App.js ( updatePrice method )

updatePrice( priceChange, id ) {
  axios
    .put(`https://joes-autos.herokuapp.com/api/vehicles/${id}/${priceChange}`)
    .then(response => {
      toast.success('Successfully updated price');
      this.setState({ vehiclesToDisplay: response.data.vehicles });
    })
    .catch(() => toast.error('Failed to update price'));
}

Step 3

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

./src/App.js ( addCar method )

addCar() {
  let newCar = {
    make: this.make.value,
    model: this.model.value,
    color: this.color.value,
    year: this.year.value,
    price: this.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 to add new vehicle.'));
}

Step 4

Summary

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.

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

./src/App.js ( sellCar method )

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.'));
}

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.