CODEWITHSUNDEEP
javascriptreactjs
gracie catherine
gracie catherine

Reputation: 25

ReactJs functions that need refractoring (if possible)

I have a few functions I've written for a basic e-commerce store, but both seem a little lengthy to me.

Perhaps someone out there has some suggestions on how I might be able to refractor them?

Cheers.

1 - a function that had adds an item to the cart or wishlist based on an action:

 addToFunnelHandler = (uuid, price, title, action) => {
  let productToAdd = {}
      productToAdd.uuid = uuid
      productToAdd.price = price
      productToAdd.title = title
      if (action === 'bag') {
        let productsInBag = [...this.state.productsInBag]
        productsInBag.push(productToAdd)
        this.setState({ productsInBag: productsInBag, bagCount: this.state.bagCount + 1, bagTotal: this.state.bagTotal + price })
    } else if (action === 'wishlist') {
        let productsInWishlist = [...this.state.productsInWishlist]
        productsInWishlist.push(productToAdd)
        this.setState({ productsInWishlist: productsInWishlist, wishlistCount: this.state.wishlistCount + 1})
    }
  }

2 - Same but in reverse, removing an item from the funnel:

removeFromFunnelHandler = (uuid, price, action) => {
    if (action === 'bag') {
      let productsInBag = [...this.state.productsInBag]
      productsInBag.forEach((product, index) => {
      if (product.uuid === uuid) { productsInBag.splice(index, 1) }
     })
    this.setState({ productsInBag: productsInBag, bagCount: this.state.bagCount - 1, bagTotal: this.state.bagTotal - price  })
  } else if (action === 'wishlist') {
      let productsInWishlist = [...this.state.productsInWishlist]
      productsInWishlist.forEach( (product, index) => {
      if (product.uuid === uuid) { productsInWishlist.splice(index, 1) }
     })
    this.setState({ productsInWishlist: productsInWishlist, wishlistCount: this.state.wishlistCount - 1 })
    }
  }

Upvotes: 0

Views: 48

Answers (1)

Kobe
Kobe

Reputation: 6446

As for the first function, you could remove most of the declarations:

  1. Declare productToAdd in one go
  2. Rather than pushing, just include the value in the array

addToFunnelHandler = (uuid, price, title, action) => {
  let productToAdd = { uuid, price, title }
  if (action === 'bag') {
    this.setState({ productsInBag: [...this.state.productsInBag, productToAdd], bagCount: this.state.bagCount + 1, bagTotal: this.state.bagTotal + price })
  } else if (action === 'wishlist') {
    this.setState({ productsInWishlist: [...this.state.productsInWishlist, productToAdd], wishlistCount: this.state.wishlistCount + 1 })
  }
}

For the second, there's not much to refactor without more context:

  1. Use inline if statements
  2. Use shorthand property assiging
  3. Use filter over forEach

removeFromFunnelHandler = (uuid, price, action) => {
  if (action === 'bag') {
    const productsInBag = [...this.state.productsInBag].filter(product => product.uuid !== uuid)    
    this.setState({ productsInBag, bagCount: this.state.bagCount - 1, bagTotal: this.state.bagTotal - price })
  } else if (action === 'wishlist') {
    const productsInWishlist = [...this.state.productsInWishlist].filter(product => product.uuid !== uuid)
    this.setState({ productsInWishlist, wishlistCount: this.state.wishlistCount - 1 })
  }
}

Upvotes: 2

Related Questions