components(exchange-rate-card-item): refactor

ozgurg · Mar 30, 2024 · 835e28c · 835e28c
1 parent 663fce9
commit 835e28c
Showing 1 changed file with 29 additions and 44 deletions.
diff --git a/components/exchange-rate-card-item.vue b/components/exchange-rate-card-item.vue
@@ -1,37 +1,27 @@
 <template>
-    <v-card
-        elevation="0"
-        class="pa-4">
-        <v-card-text class="pa-0">
+    <v-card elevation="0">
+        <v-card-subtitle class="pb-0">
             {{ currencyCode }}
-        </v-card-text>
+        </v-card-subtitle>
 
-        <template v-if="isLoading">
-            <v-skeleton-loader
-                class="mb-0"
-                max-width="68"
-                max-height="32"
-                width="100%"
-                type="image" />
-        </template>
-        <template v-else>
-            <v-card-title class="pa-0">
-                <template v-if="exchangeRate">
-                    <span class="tabular-nums">
-                        {{ moneyFormat(exchangeRate.rate, "TRY") }}
-                    </span>
-                </template>
-                <template v-else>
-                    <!--
-                    Wrapping with "div" makes height same as "v-skeleton-loader".
-                    This prevents layout shifting.
-                    -->
-                    <div class="red--text">
-                        Hata 😊
-                    </div>
-                </template>
-            </v-card-title>
-        </template>
+        <v-card-title class="pt-0">
+            <template v-if="isLoading">
+                <v-skeleton-loader
+                    class="mb-0"
+                    max-width="68"
+                    max-height="32"
+                    width="100%"
+                    type="image" />
+            </template>
+            <template v-else-if="exchangeRate !== null">
+                <span class="tabular-nums">
+                    {{ moneyFormat(exchangeRate.rate, "TRY") }}
+                </span>
+            </template>
+            <template v-else>
+                Hata 😊
+            </template>
+        </v-card-title>
     </v-card>
 </template>
 
@@ -51,20 +41,15 @@ export default {
     },
     methods: {
         moneyFormat,
-        _load() {
+        async _load() {
             const vm = this;
-            vm.$store.dispatch("exchange-rates/loadExchangeRateFromApi", vm.currencyCode)
-                .then(exchangeRate => {
-                    vm.exchangeRate = exchangeRate;
-                })
-                .catch(() => {
-                    vm.exchangeRate = null;
-                })
-                .finally(() => {
-                    setTimeout(() => {
-                        vm.isLoading = false;
-                    }, 195);
-                });
+            try {
+                vm.exchangeRate = await vm.$store.dispatch("exchange-rates/loadExchangeRateFromApi", vm.currencyCode);
+            } catch (error) {
+                vm.exchangeRate = null;
+            } finally {
+                vm.isLoading = false;
+            }
         }
     },
     mounted() {