From 37761074378c596f168947df9b81439f5d879e08 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Tue, 28 May 2024 17:45:20 +0300
Subject: [PATCH 1/2] Style: Fix loading contracts table

---
 .../src/weblets/tf_contracts_list.vue         | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index a1e005d31c..d58f930fc7 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -218,6 +218,18 @@ const nodeIDs = computed(() => {
   return [...new Set(allContracts.value.map(contract => contract.details.nodeId) || [])];
 });
 
+function updateLoadingTableValue(updateAllTables: boolean, loading = true, contractType?: ContractType) {
+  if (updateAllTables) {
+    isLoadingNode.value = loading;
+    isLoadingName.value = loading;
+    isLoadingRent.value = loading;
+    return;
+  } else if (contractType == ContractType.Name) isLoadingName.value = loading;
+  else if (contractType == ContractType.Node) isLoadingNode.value = loading;
+  else if (contractType == ContractType.Rent) isLoadingRent.value = loading;
+  return;
+}
+
 onMounted(onMount);
 
 async function onMount() {
@@ -272,20 +284,11 @@ async function onMount() {
       {},
     );
   }
-  isLoadingNode.value = false;
-  isLoadingName.value = false;
-  isLoadingRent.value = false;
+  updateLoadingTableValue(true, false);
 }
 
 async function loadContracts(options: { page: number; itemsPerPage: number; contractType: ContractType }) {
-  if (options.contractType == ContractType.Node) {
-    isLoadingNode.value = true;
-  } else if (options.contractType == ContractType.Name) {
-    isLoadingName.value = true;
-  } else {
-    isLoadingRent.value = true;
-  }
-
+  updateLoadingTableValue(false, true, options.contractType);
   try {
     const { count, data: dataContracts } = await gridProxyClient.contracts.list({
       twinId: profileManager.profile!.twinId,
@@ -322,9 +325,7 @@ async function loadContracts(options: { page: number; itemsPerPage: number; cont
     loadingErrorMessage.value = error.message;
     createCustomToast(`Error while listing contracts due: ${error.message}`, ToastType.danger, {});
   } finally {
-    isLoadingNode.value = false;
-    isLoadingName.value = false;
-    isLoadingRent.value = false;
+    updateLoadingTableValue(false, false, options.contractType);
   }
 }
 

From 3f7a12b1a4949100177ecb18b7db6aaffd978d25 Mon Sep 17 00:00:00 2001
From: kassem <omarksm09@gmail.com>
Date: Tue, 4 Jun 2024 09:51:07 +0300
Subject: [PATCH 2/2] Update: - replace elseif with switch case - use options
 object nstead of using named parameters

---
 .../src/weblets/tf_contracts_list.vue         | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index d58f930fc7..24a779f3d7 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -218,15 +218,26 @@ const nodeIDs = computed(() => {
   return [...new Set(allContracts.value.map(contract => contract.details.nodeId) || [])];
 });
 
-function updateLoadingTableValue(updateAllTables: boolean, loading = true, contractType?: ContractType) {
-  if (updateAllTables) {
-    isLoadingNode.value = loading;
-    isLoadingName.value = loading;
-    isLoadingRent.value = loading;
+type ContractsLoadingOptions = { updateAllTables: boolean; loading: boolean; contractType?: ContractType };
+
+function updateLoadingTableValue(options: ContractsLoadingOptions) {
+  if (options.updateAllTables) {
+    isLoadingNode.value = options.loading;
+    isLoadingName.value = options.loading;
+    isLoadingRent.value = options.loading;
     return;
-  } else if (contractType == ContractType.Name) isLoadingName.value = loading;
-  else if (contractType == ContractType.Node) isLoadingNode.value = loading;
-  else if (contractType == ContractType.Rent) isLoadingRent.value = loading;
+  }
+
+  switch (options.contractType) {
+    case ContractType.Name:
+      isLoadingName.value = options.loading;
+      break;
+    case ContractType.Node:
+      isLoadingNode.value = options.loading;
+      break;
+    case ContractType.Rent:
+      isLoadingRent.value = options.loading;
+  }
   return;
 }
 
@@ -284,11 +295,15 @@ async function onMount() {
       {},
     );
   }
-  updateLoadingTableValue(true, false);
+  updateLoadingTableValue({ updateAllTables: true, loading: false });
 }
 
 async function loadContracts(options: { page: number; itemsPerPage: number; contractType: ContractType }) {
-  updateLoadingTableValue(false, true, options.contractType);
+  updateLoadingTableValue({
+    updateAllTables: false,
+    loading: true,
+    contractType: options.contractType,
+  });
   try {
     const { count, data: dataContracts } = await gridProxyClient.contracts.list({
       twinId: profileManager.profile!.twinId,
@@ -325,7 +340,11 @@ async function loadContracts(options: { page: number; itemsPerPage: number; cont
     loadingErrorMessage.value = error.message;
     createCustomToast(`Error while listing contracts due: ${error.message}`, ToastType.danger, {});
   } finally {
-    updateLoadingTableValue(false, false, options.contractType);
+    updateLoadingTableValue({
+      updateAllTables: false,
+      loading: false,
+      contractType: options.contractType,
+    });
   }
 }