Fix reload domains function (#4069)

* Fix reload domains function

* Remove the unnecessary getNodePageCount request

* Restore `pageCountTask`

* Remove unwanted checks and vars

* Reload nodes instead of just loading node in case interfaces changed

Author: samaradel

packages/playground/src/components/node_selector/TfDomainName.vue

@@ -104,14 +104,11 @@
 <script lang="ts">
 import { type FarmInfo, Features, type FilterOptions, type NodeInfo } from "@threefold/grid_client";
 import { noop } from "lodash";
-import { computed, getCurrentInstance, nextTick, onUnmounted, type PropType, ref, watch } from "vue";
-import { onMounted } from "vue";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { VInput } from "vuetify/components/VInput";
+import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { type InputValidatorService, useInputRef } from "@/hooks/input_validator";
 
-import { useAsync, usePagination, useWatchDeep } from "../../hooks";
+import { useAsync, usePagination } from "../../hooks";
 import { useForm, useFormRef, ValidatorStatus } from "../../hooks/form_validator";
 import { useGrid } from "../../stores";
 import type { DomainInfo, NetworkFeatures, SelectionDetailsFilters } from "../../types/nodeSelector";
@@ -157,9 +154,10 @@ export default {
     const pagination = usePagination();
 
     const enableCustomDomain = ref(false);
+    const size = ref(window.env.PAGE_SIZE);
     const filters = computed<FilterOptions>(() => ({
       gateway: true,
-      size: window.env.PAGE_SIZE,
+      size: size.value,
       page: Math.max(1, pagination.value.page),
       farmId: enableCustomDomain.value ? props.farm?.farmId : undefined,
       availableFor: gridStore.client?.twinId,
@@ -170,47 +168,52 @@ export default {
     const loadDomains = () => domainsTask.value.run(gridStore, filters.value);
 
     const domainInput = useInputRef();
-    const reloadDomains = async (_filters: FilterOptions = filters.value) => {
+    const reloadDomains = async () => {
       domainInput.value?.reset();
       if (selectedDomain.value) {
         selectedDomain.value = null;
         bindModelValue();
       }
-      await pageCountTask.value.run(gridStore, _filters);
+      await pageCountTask.value.run(gridStore, filters.value);
       pagination.value.reset(pageCountTask.value.data as number);
-      await nextTick();
       loadedDomains.value = [];
+      await nextTick();
       return loadDomains();
     };
-    let previousFilters = JSON.stringify(filters.value);
-    useWatchDeep(
-      filters,
-      newFilters => {
-        const currentFilters = JSON.stringify(newFilters);
-        if (currentFilters !== previousFilters) {
-          reloadDomains();
-          previousFilters = currentFilters;
-        }
+
+    watch(
+      [() => props.farm?.farmId, () => gridStore.client?.twinId, () => props.interfaces],
+      () => {
+        reloadDomains();
       },
-      { immediate: true, deep: true, ignoreFields: ["page"] },
+      { deep: true },
     );
+
+    onMounted(() => {
+      loadDomains();
+    });
+
     const customDomain = ref("");
     const domainFormRef = useFormRef();
 
     const disableSelectedDomain = computed(() => enableCustomDomain.value && props.filters.ipv4 === true);
     const useFQDN = computed(() => enableCustomDomain.value && (props.useFqdn || props.filters.ipv4 === false));
 
-    const domain = computed<DomainInfo>(() => {
-      return {
-        selectedDomain: disableSelectedDomain.value ? null : selectedDomain.value,
-        enableSelectedDomain: !disableSelectedDomain.value,
-        enabledCustomDomain: enableCustomDomain.value,
-        customDomain: enableCustomDomain.value ? customDomain.value : "",
-        useFQDN: useFQDN.value,
-      };
-    });
+    const domain = computed<DomainInfo>(() => ({
+      selectedDomain: disableSelectedDomain.value ? null : selectedDomain.value,
+      enableSelectedDomain: !disableSelectedDomain.value,
+      enabledCustomDomain: enableCustomDomain.value,
+      customDomain: enableCustomDomain.value ? customDomain.value : "",
+      useFQDN: useFQDN.value,
+    }));
 
-    useWatchDeep(domain, bindModelValue, { immediate: true, deep: true });
+    watch(
+      domain,
+      newDomain => {
+        bindModelValue(newDomain);
+      },
+      { immediate: true },
+    );
 
     onUnmounted(() => {
       bindModelValue();
@@ -278,6 +281,7 @@ export default {
       selectedDomain,
       loadDomains,
       reloadDomains,
+      size,
 
       domainFormRef,
       domainInput,