Cart - routing and Add to cart

[phillipsja97]

DevStory

• As a developer, I need to set up a route to hold my current cart information.

UserStory

• As a user, I want to be able to add a product to my cart from the products page, and also go to my cart and view the list of items in my cart and my checkout options.

AC

WHEN a user clicks on the add cart button THEN the item will be added to the cart AND as a user WHEN I click on the cart page THEN I should be lead to the page where I can view items in my cart, and checkout options.

DevNotes

IN EAST & BARLEY API:

• [x] Create a method in the controller to get Open Cart by userId:

  [HttpGet("openCart/{userId}")]
      public IActionResult GetOpenCart(int userId)
  
      {
          var openCart = _repository.FindOpenCarts(userId);
          var noOpenCart= !openCart.Any();
          if (noOpenCart)
          {
              return NotFound("There are currently no open carts.");
          }
          return Ok(openCart);
      }

IN EAST & BARLEY.UI

• [x] In App.js, in the existing route for the Cart, add the existing user Prop to the route.
• [x] If it hasn't already been created, create a cartData.js folder in the data folder of Helpers.
• [x] In cartData.js create a function to getLineItemsByInvoiceId();

  
  import axios from 'axios';
  // import { baseUrl } from '../apiKeys.json';

const getLineItemsByInvoiceId = (invoiceId) => new Promise((resolve, reject) => { axios.get(https://localhost:44319/api/invoices/lineitems/${invoiceId}) .then((result) => resolve(result.data)) .catch((error) => reject(error)); });

export default { getLineItemsByInvoiceId };

- [x] In ```cartData.js```, create a function to create a new cart, or add to new cart:

const addToExistingOrNewCart = (product) => axios.post(axios.get('https://localhost:44319/api/invoices/newCart/${userId}), newOrder);

- [x] Also in ```cartData.js```, add a method to check for a cart:

const checkForCart = (userId) => new Promise((resolve, reject) => { axios.get(https://localhost:44319/api/invoice/openCart/${userId}) .then((result) => resolve(result.data)) .catch((error) => reject(error)); });

- [x] In ```Cart.js```, add these states:

state = { openCart: [ ], lineItems: [ ], }

- [x] In ```Cart.js```, in the componentDidMount(), use the checkForCart from ```cartData.js```

componentDidMount() { const checkForOpenCart = () => { const { user } = this.props; cartData.checkForCart(user.userId) .then((openCart) => { this.setState({ openCart }); }); }; }

- [x] Next, chain this function to follow the checkForOpenCart function in the componentDidMount():

.then((invoice) => cartData.getLineItemsByInvoiceId(openCart.invoiceId) .then((lineItems) => { this.setState({ lineItems: lineItems }); }) .catch((errorFromCart) => console.error(errorFromCart)); }

- [ ] Use whatever card/list you want form semantic UI to build out the render on in Cart.js.
- [ ] In ```ProductModal.js```, create an createNewOrder function that will use the addToExistingOrNewCart data function from above. The function will create an order with these data points: ProductId, Price, and Quantity. The new order will be passed along with the userId to the function.
- [ ] Create an onChange function that will take the value from the quantity input field to use for the data point in the createNewOrder function.
- [ ] On the button in the modal for adding to cart, create an onclick function and pass the createNewOrder function into the onClick.
- [ ] Test it and see if works in the database and shows up in Cart.js.

[gseals]

• if a cart exists, clicking add to cart on the product modal will add to the cart

• if a cart does not exist, clicking add to cart on the product will create a new cart with quantity, price,

• display the cart and add to the cart