fix: remove old debounce usages

shopware · Feb 2, 2023 · ece79b0 · ece79b0
1 parent b3e1bce
commit ece79b0
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 44 deletions.
diff --git a/.changeset/few-beans-learn.md b/.changeset/few-beans-learn.md
@@ -0,0 +1,6 @@
+---
+"vue-demo-store": patch
+"@shopware-pwa/cms-base": patch
+---
+
+Removed old `_debounce` usage, we should use `useDebounceFn` from Vueuse
diff --git a/packages/cms-base/components/listing-filters/SwFilterPrice.vue b/packages/cms-base/components/listing-filters/SwFilterPrice.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ListingFilter } from "@shopware-pwa/types";
-import { _debounce } from "@shopware-pwa/helpers-next";
 import { reactive, ref, watch } from "vue";
 const emits = defineEmits<{
   (e: "select-value", value: { code: string; value: unknown }): void;
@@ -22,27 +21,25 @@ const toggle = () => {
 const dropdownElement = ref(null);
 onClickOutside(dropdownElement, () => (isFilterVisible.value = false));
 
-watch(
-  () => prices.min,
-  _debounce((newPrice: number, oldPrice: number) => {
-    if (newPrice == oldPrice) return;
-    emits("select-value", {
-      code: "min-price",
-      value: newPrice,
-    });
-  }, 1000)
-);
+function onMinPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice == oldPrice) return;
+  emits("select-value", {
+    code: "min-price",
+    value: newPrice,
+  });
+}
+const debounceMinPriceUpdate = useDebounceFn(onMinPriceChange, 1000);
+watch(() => prices.min, debounceMinPriceUpdate);
 
-watch(
-  () => prices.max,
-  _debounce((newPrice: number, oldPrice: number) => {
-    if (newPrice == oldPrice) return;
-    emits("select-value", {
-      code: "max-price",
-      value: newPrice,
-    });
-  }, 1000)
-);
+function onMaxPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice == oldPrice) return;
+  emits("select-value", {
+    code: "max-price",
+    value: newPrice,
+  });
+}
+const debounceMaxPriceUpdate = useDebounceFn(onMaxPriceChange, 1000);
+watch(() => prices.max, debounceMaxPriceUpdate);
 </script>
 
 <template>

diff --git a/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue b/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouterLink } from "vue-router";
-import { getProductUrl, _debounce } from "@shopware-pwa/helpers-next";
+import { getProductUrl } from "@shopware-pwa/helpers-next";
 
 import { onClickOutside, useFocus, useMagicKeys } from "@vueuse/core";
 
@@ -37,7 +37,7 @@ watch(typingQuery, (value) => {
 });
 
 // Defer the search request to prevent the search from being triggered too after typing
-const performSuggestSearch = _debounce((value) => {
+const performSuggestSearch = useDebounceFn((value) => {
   searchTerm.value = value;
   search();
 }, 300);

diff --git a/templates/vue-demo-store/components/listing-filters/ListingFiltersPrice.vue b/templates/vue-demo-store/components/listing-filters/ListingFiltersPrice.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ListingFilter } from "@shopware-pwa/types";
-import { _debounce } from "@shopware-pwa/helpers-next";
 
 const emits = defineEmits<{
   (e: "select-value", value: { code: string; value: unknown }): void;
@@ -20,27 +19,25 @@ const isOpen = ref<boolean>(false);
 const dropdownElement = ref(null);
 onClickOutside(dropdownElement, () => (isOpen.value = false));
 
-watch(
-  () => prices.min,
-  _debounce((newPrice: number, oldPrice: number) => {
-    if (newPrice == oldPrice) return;
-    emits("select-value", {
-      code: "min-price",
-      value: newPrice,
-    });
-  }, 1000)
-);
+function onMinPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice == oldPrice) return;
+  emits("select-value", {
+    code: "min-price",
+    value: newPrice,
+  });
+}
+const debounceMinPriceUpdate = useDebounceFn(onMinPriceChange, 1000);
+watch(() => prices.min, debounceMinPriceUpdate);
 
-watch(
-  () => prices.max,
-  _debounce((newPrice: number, oldPrice: number) => {
-    if (newPrice == oldPrice) return;
-    emits("select-value", {
-      code: "max-price",
-      value: newPrice,
-    });
-  }, 1000)
-);
+function onMaxPriceChange(newPrice: number, oldPrice: number) {
+  if (newPrice == oldPrice) return;
+  emits("select-value", {
+    code: "max-price",
+    value: newPrice,
+  });
+}
+const debounceMaxPriceUpdate = useDebounceFn(onMaxPriceChange, 1000);
+watch(() => prices.max, debounceMaxPriceUpdate);
 </script>
 
 <template>