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

Remove useSelectShippingRate hook and adjust how local state works for PackageRates #5802

Merged
merged 7 commits into from
Feb 10, 2022

Conversation

mikejolley
Copy link
Member

While looking at #5734 I've established that we do need local state, but we can make some improvements so it's more clear as to why.

If the radio buttons are controlled inputs, without a local state you click on shipping options and get no UI feedback until the request completes and the shipping methods update. This is poor UX.

if the radio buttons are uncontrolled inputs, you get instant feedback when selecting a shipping option, but if the shipping method changes elsewhere (on the server, or on another tab) it becomes out of sync with the data stores.

Therefore, the best solution is to store the checked option in local state, and update it both on click, and when the data stores update post-update.

You can see in this PR I was able to remove useSelectShippingRate, remove it's local state, and move the logic to useSelectShippingRates.

I've moved the Radio button local state into PackageRates. There it just stores the value of the selected option. This also reacts to updates from the server using useEffect.

RadioControl has also been changed to TypeScript.

Closes #5734

Testing

How to test the changes in this Pull Request:

  1. Ensure your store has multiple shipping methods setup
  2. Add something to your cart that requires shipping
  3. Go to the cart block
  4. Select a shipping option. Confirm the UI updates instantly, and the option remains checked once totals are updated
  5. Open 2 tabs with a cart block in each
  6. In tab 1, select a shipping method
  7. In tab 2, change an item qty. Confirm that once the update completes, the correct shipping method is selected.

@mikejolley mikejolley added skip-changelog PRs that you don't want to appear in the changelog. status: needs review block: checkout Issues related to the checkout block. labels Feb 9, 2022
@mikejolley mikejolley self-assigned this Feb 9, 2022
@rubikuserbot rubikuserbot requested review from a team and opr and removed request for a team February 9, 2022 16:11
@github-actions
Copy link
Contributor

github-actions bot commented Feb 9, 2022

Size Change: +375 B (0%)

Total Size: 813 kB

Filename Size Change
build/active-filters.js 7.05 kB +2 B (0%)
build/all-products-frontend.js 18.8 kB +25 B (0%)
build/all-products.js 34 kB +64 B (0%)
build/all-reviews.js 8.06 kB -2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.69 kB +29 B (+1%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB +1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 6.94 kB +47 B (+1%)
build/atomic-block-components/add-to-cart.js 6.5 kB +42 B (+1%)
build/atomic-block-components/button-frontend.js 1.54 kB +2 B (0%)
build/atomic-block-components/price.js 1.69 kB -7 B (0%)
build/atomic-block-components/summary.js 924 B -2 B (0%)
build/atomic-block-components/title-frontend.js 1.21 kB -1 B (0%)
build/atomic-block-components/title.js 934 B -1 B (0%)
build/attribute-filter-frontend.js 16.8 kB +5 B (0%)
build/blocks-checkout.js 17.6 kB +11 B (0%)
build/cart-blocks/checkout-button-frontend.js 1.15 kB +14 B (+1%)
build/cart-blocks/order-summary-frontend.js 8.86 kB -71 B (-1%)
build/cart-frontend.js 45.6 kB +96 B (0%)
build/cart.js 43.7 kB -16 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB +16 B (+1%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB -9 B (0%)
build/checkout-blocks/billing-address-frontend.js 888 B +1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.94 kB -8 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.46 kB -1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 11.3 kB -91 B (-1%)
build/checkout-blocks/payment-frontend.js 7.75 kB +38 B (0%)
build/checkout-blocks/shipping-address-frontend.js 976 B +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.8 kB -119 B (-2%)
build/checkout-frontend.js 47.7 kB +83 B (0%)
build/checkout.js 45.2 kB -42 B (0%)
build/featured-category.js 8.61 kB -1 B (0%)
build/featured-product.js 9.62 kB +2 B (0%)
build/handpicked-products.js 7.09 kB +1 B (0%)
build/mini-cart-component-frontend.js 14.3 kB +28 B (0%)
build/mini-cart-frontend.js 1.81 kB +32 B (+2%)
build/price-filter-frontend.js 12.6 kB +1 B (0%)
build/price-filter.js 8.51 kB +2 B (0%)
build/product-best-sellers.js 7.37 kB +2 B (0%)
build/product-new.js 7.67 kB +3 B (0%)
build/product-on-sale.js 7.99 kB +2 B (0%)
build/product-top-rated.js 7.9 kB +1 B (0%)
build/products-by-attribute.js 8.39 kB +2 B (0%)
build/reviews-by-category.js 11.5 kB -1 B (0%)
build/reviews-by-product.js 12.6 kB -3 B (0%)
build/reviews-frontend.js 7.34 kB -1 B (0%)
build/single-product-frontend.js 22.2 kB +27 B (0%)
build/stock-filter.js 6.69 kB +6 B (0%)
build/wc-blocks-editor-style-rtl.css 4.84 kB +51 B (+1%)
build/wc-blocks-editor-style.css 4.84 kB +50 B (+1%)
build/wc-blocks-style-rtl.css 22 kB +30 B (0%)
build/wc-blocks-style.css 22 kB +29 B (0%)
build/wc-blocks-vendors.js 69.7 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.37 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 255 B
build/atomic-block-components/button.js 914 B
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 459 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/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 624 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 468 B
build/atomic-block-components/stock-indicator-frontend.js 939 B
build/atomic-block-components/stock-indicator.js 623 B
build/atomic-block-components/summary-frontend.js 1.24 kB
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 459 B
build/attribute-filter.js 13.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 324 B
build/legacy-template.js 2.18 kB
build/mini-cart-contents.js 3.82 kB
build/mini-cart.js 6.39 kB
build/price-format.js 1.18 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-search.js 2.18 kB
build/product-tag.js 7.8 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.61 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 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-data.js 8.84 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.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

This works well, thanks for taking care of this Mike! I left a few TS comments and one about naming, but those are non-blocking.

assets/js/base/components/radio-control/types.ts Outdated Show resolved Hide resolved
assets/js/base/components/radio-control/option.tsx Outdated Show resolved Hide resolved
@mikejolley
Copy link
Member Author

There was an idea to use loading states from @tarhi-saad which could also work, but I think we should avoid this for now until #5365 has had a proper review. I don't think we should introduce more loading states until existing have been reviewed.

@mikejolley mikejolley merged commit 5545c38 into trunk Feb 10, 2022
@mikejolley mikejolley deleted the refactor/radio-control-component branch February 10, 2022 11:59
@sunyatasattva sunyatasattva added the type: enhancement The issue is a request for an enhancement. label Feb 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Selected shipping rate shouldn't have local state
3 participants