fix: refactor - replace computed setter with function

VirtoCommerce · Oct 1, 2024 · f1e259f · f1e259f
1 parent be2f0b6
commit f1e259f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 56 deletions.
diff --git a/client-app/core/composables/index.ts b/client-app/core/composables/index.ts
@@ -7,9 +7,11 @@ export * from "./useErrorsTranslator";
 export * from "./useGoogleAnalytics";
 export * from "./useHistoricalEvents";
 export * from "./useImpersonate";
+export * from "./useMutationBatcher";
 export * from "./useNavigations";
 export * from "./usePageHead";
 export * from "./useProductsRoutes";
 export * from "./useRouteQueryParam";
+export * from "./useSyncMutationBatchers";
 export * from "./useThemeContext";
 export * from "./useWhiteLabeling";
diff --git a/client-app/pages/cart.vue b/client-app/pages/cart.vue
@@ -32,7 +32,7 @@
         :items-grouped-by-vendor="lineItemsGroupedByVendor"
         :selected-item-ids="selectedItemIds"
         :validation-errors="cart.validationErrors"
-        :disabled="changeItemQuantityBatchedOverflowed"
+        :disabled="changeItemQuantityBatchedOverflowed || selectionOverflowed"
         @change:item-quantity="changeItemQuantityBatched($event.itemId, $event.quantity)"
         @select:items="handleSelectItems"
         @remove:items="handleRemoveItems"
@@ -137,7 +137,7 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty, without, union } from "lodash";
+import { isEmpty } from "lodash";
 import { computed, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { recentlyBrowsed } from "@/core/api/graphql";
@@ -179,9 +179,12 @@ const {
   forceFetch,
   changeItemQuantityBatched,
   changeItemQuantityBatchedOverflowed,
+  selectionOverflowed,
   removeItems,
   toggleGift,
   openClearCartModal,
+  selectCartItems,
+  unselectCartItems,
 } = useFullCart();
 const { loading: loadingCheckout, comment, isValidShipment, isValidPayment, initialize } = useCheckout();
 const { couponCode, couponIsApplied, couponValidationError, applyCoupon, removeCoupon, clearCouponValidationError } =
@@ -214,9 +217,11 @@ async function handleRemoveItems(itemIds: string[]): Promise<void> {
 
 function handleSelectItems(value: { itemIds: string[]; selected: boolean }) {
   if (!value.selected) {
-    selectedItemIds.value = without(selectedItemIds.value, ...value.itemIds);
+    console.log("unselect", value.itemIds);
+    unselectCartItems(value.itemIds);
   } else {
-    selectedItemIds.value = union(selectedItemIds.value, value.itemIds);
+    console.log("select", value.itemIds);
+    selectCartItems(value.itemIds);
   }
 }
 

diff --git a/client-app/shared/cart/composables/useCart.ts b/client-app/shared/cart/composables/useCart.ts
@@ -181,8 +181,10 @@ export function _useFullCart() {
   const { mutate: _unselectCartItemsMutation } = useUnselectCartItemsMutation(cart);
   const selectCartBatcher = useMutationBatcher(_selectCartItemsMutation, { debounce: 0 });
   const unselectCartBatcher = useMutationBatcher(_unselectCartItemsMutation, { debounce: 0 });
-  const { add: _selectCartItems, loading: selectLoading } = selectCartBatcher;
-  const { add: _unselectCartItems, loading: unselectLoading } = unselectCartBatcher;
+  const { add: _selectCartItems, loading: selectLoading, overflowed: selectOverflowed } = selectCartBatcher;
+  const { add: _unselectCartItems, loading: unselectLoading, overflowed: unselectOverflowed } = unselectCartBatcher;
+  const selectionOverflowed = computed(() => selectOverflowed.value || unselectOverflowed.value);
+
   useSyncMutationBatchers(selectCartBatcher, unselectCartBatcher, ({ args, anotherBatcher }) => {
     if (!anotherBatcher.loading.value) {
       return;
@@ -201,54 +203,23 @@ export function _useFullCart() {
     }
   });
 
-  const selectedItemIds = computed({
-    get: () => selectedLineItems.value.map((item) => item.id),
-    set: (newValue) => {
-      const oldValue = selectedItemIds.value;
-
-      const newlySelectedLineItemIds = difference(newValue, oldValue);
-      const newlyUnselectedLineItemIds = difference(oldValue, newValue);
-
-      const hasNewlySelected = newlySelectedLineItemIds.length > 0;
-      const hasNewlyUnselected = newlyUnselectedLineItemIds.length > 0;
-      if (hasNewlySelected) {
-        void _selectCartItems(
-          {
-            command: {
-              lineItemIds: newlySelectedLineItemIds,
-            },
-          },
-          {
-            optimisticResponse: {
-              selectCartItems: merge({}, cart.value!, {
-                items: cart.value!.items.map((item) => ({
-                  selectedForCheckout: newlySelectedLineItemIds.includes(item.id) || item.selectedForCheckout,
-                })),
-              }),
-            },
-          },
-        );
-      }
-      if (hasNewlyUnselected) {
-        void _unselectCartItems(
-          {
-            command: {
-              lineItemIds: newlyUnselectedLineItemIds,
-            },
-          },
-          {
-            optimisticResponse: {
-              unSelectCartItems: merge({}, cart.value!, {
-                items: cart.value!.items.map((item) => ({
-                  selectedForCheckout: !newlyUnselectedLineItemIds.includes(item.id) && item.selectedForCheckout,
-                })),
-              }),
-            },
-          },
-        );
-      }
-    },
-  });
+  const selectedItemIds = computed(() => selectedLineItems.value.map((item) => item.id));
+
+  function selectCartItems(ids: string[]): void {
+    void _selectCartItems({
+      command: {
+        lineItemIds: ids,
+      },
+    });
+  }
+
+  function unselectCartItems(ids: string[]): void {
+    void _unselectCartItems({
+      command: {
+        lineItemIds: ids,
+      },
+    });
+  }
 
   const { mutate: _clearCart, loading: clearCartLoading } = useClearCartMutation(cart);
   async function clearCart(): Promise<void> {
@@ -441,6 +412,9 @@ export function _useFullCart() {
     changeItemQuantity,
     changeItemQuantityBatched,
     changeItemQuantityBatchedOverflowed,
+    selectCartItems,
+    unselectCartItems,
+    selectionOverflowed,
     removeItems,
     validateCartCoupon,
     addCartCoupon,

diff --git a/client-app/shared/checkout/composables/useCheckout.ts b/client-app/shared/checkout/composables/useCheckout.ts
@@ -75,7 +75,7 @@ export function _useCheckout() {
     refetch: refetchCart,
     cart,
     selectedLineItems,
-    selectedItemIds,
+    selectCartItems,
     shipment,
     payment,
     availableShippingMethods,
@@ -450,7 +450,7 @@ export function _useCheckout() {
       await refetchCart();
 
       if (themeContext.value?.storeSettings?.defaultSelectedForCheckout) {
-        selectedItemIds.value = cart.value!.items.map((item) => item.id);
+        selectCartItems(cart.value!.items.map((item) => item.id));
       }
 
       clearState();