refactor: onUserId

src/pages/Ecomerce/PendingOrders.vue

@@ -10,8 +10,8 @@ import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 import useNotify from 'src/composables/useNotify.js';
 import { useAppStore } from 'stores/app';
-import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
+import { onUserId } from 'src/utils/onUserId';
 
 const jApi = inject('jApi');
 const api = inject('api');
@@ -19,19 +19,16 @@ const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
 const appStore = useAppStore();
-const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 const router = useRouter();
 
 const loading = ref(false);
 const orders = ref([]);
 
-const getOrders = async () => {
+const getOrders = async (clientFk) => {
     try {
         loading.value = true;
 
-        const clientFk = userStore?.user?.id;
-
         const filter = {
           where: {
             clientFk,
@@ -99,15 +96,7 @@ const loadOrder = orderId => {
     router.push({ name: 'catalog' });
 };
 
-watch(
+onUserId(getOrders);
-  () => userStore?.user?.id,
-  async userId => {
-    if (userId) {
-      getOrders();
-    }
-  },
-  { immediate: true }
-);
 
 </script>
 

src/utils/onUserId.js

@@ -0,0 +1,19 @@
+import { watch } from 'vue';
+
+import { useUserStore } from 'stores/user';
+
+const userStore = useUserStore();
+
+export const onUserId = (cb) => watch(
+  () => userStore?.user?.id,
+  async userId => {
+    if (userId) {
+      try {
+        await cb(userId);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  },
+  { immediate: true }
+);