Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Update item quantity if server result is different from client #5352

Merged
merged 2 commits into from
Dec 10, 2021

Conversation

senadir
Copy link
Member

@senadir senadir commented Dec 9, 2021

Our cart's quantity input (as well as our checkout inputs) have a data direction issues, they only bubble up updates, but don't take updates from the server, meaning once the input mounts, its internal state will not reset, even if the server returns a different result.

Such systemic issues are fixed in two ways:

  • Having a useEffect that watch the server state and update the local state accordingly (what we did here).
  • Having the local state and server state be the same thing (what react-query uses) so you update the cache you have while you wait for the server to respond. This was complicated to do in this PR, and would probably need an additional action. It's worth exploring nevertheless.

Fixes #5239

How to test the changes in this Pull Request:
You can test this with two methods, recieveCart and server updates.

  1. Copy the code in Cart item quantities not re-rendered when new values are passed down via the API #5239 into the bottom of woocommerce-gutenberg-products-block.php

  2. Add two products, Hoodie and Belt to your cart.

  3. Updating once quantity should update the other when the server responds.

  4. Add an item to your cart, go to cart.

  5. In console, run this code:

const cartData = wp.data.select('wc/store/cart').getCartData()
wp.data.dispatch('wc/store/cart').changeCartItemQuantity(cartData.items[0].key, 5)

It should update your item quantity to 5.

Changelog

Respect implicit quantity updates coming from server or directly from data stores.

@senadir senadir self-assigned this Dec 9, 2021
@rubikuserbot rubikuserbot requested review from a team and nielslange and removed request for a team December 9, 2021 16:16
@senadir senadir added type: bug The issue/PR concerns a confirmed bug. block: cart Issues related to the cart block. labels Dec 9, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Dec 9, 2021

Size Change: +31 B (0%)

Total Size: 840 kB

Filename Size Change
build/cart-blocks/line-items-frontend.js 5.15 kB +10 B (0%)
build/cart-frontend.js 45.5 kB -1 B (0%)
build/cart.js 44 kB +15 B (0%)
build/mini-cart-component-frontend.js 37.6 kB +8 B (0%)
build/wc-blocks-data.js 8.84 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.06 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 34.4 kB
build/all-reviews.js 8.35 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.88 kB
build/atomic-block-components/add-to-cart.js 6.42 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 848 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 553 B
build/atomic-block-components/rating.js 553 B
build/atomic-block-components/sale-badge-frontend.js 626 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 385 B
build/atomic-block-components/stock-indicator-frontend.js 585 B
build/atomic-block-components/stock-indicator.js 586 B
build/atomic-block-components/summary-frontend.js 875 B
build/atomic-block-components/summary.js 872 B
build/atomic-block-components/tag-list-frontend.js 459 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.6 kB
build/attribute-filter.js 12.7 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.87 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 297 B
build/cart-blocks/order-summary-frontend.js 8.96 kB
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/actions-frontend.js 1.45 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.25 kB
build/checkout-blocks/billing-address-frontend.js 887 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.17 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.48 kB
build/checkout-blocks/shipping-address-frontend.js 973 B
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.5 kB
build/checkout.js 47 kB
build/featured-category.js 8.55 kB
build/featured-product.js 9.9 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.05 kB
build/mini-cart-contents.js 3.46 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.66 kB
build/price-filter-frontend.js 12.4 kB
build/price-filter.js 8.61 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.51 kB
build/product-categories.js 3.47 kB
build/product-category.js 8.36 kB
build/product-new.js 7.67 kB
build/product-on-sale.js 8.05 kB
build/product-search.js 2.47 kB
build/product-tag.js 7.77 kB
build/product-top-rated.js 7.63 kB
build/products-by-attribute.js 8.49 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.23 kB
build/single-product-frontend.js 22 kB
build/single-product.js 10.4 kB
build/stock-filter-frontend.js 6.8 kB
build/stock-filter.js 6.83 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 18.9 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 6.81 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-editor-style-rtl.css 4.27 kB
build/wc-blocks-editor-style.css 4.28 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.1 kB
build/wc-blocks-style.css 21.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.4 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 820 B
build/wc-payment-method-cheque.js 816 B
build/wc-payment-method-cod.js 912 B
build/wc-payment-method-paypal.js 838 B
build/wc-payment-method-stripe.js 11.1 kB
build/wc-settings.js 2.6 kB

compressed-size-action

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🚢

@github-actions github-actions bot added this to the 6.6.0 milestone Dec 10, 2021
@senadir senadir merged commit 4852f7f into trunk Dec 10, 2021
@senadir senadir deleted the fix/initiate-quantity-selector-state branch December 10, 2021 15:26
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Cart item quantities not re-rendered when new values are passed down via the API
2 participants