List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <span>
    <span>{{ userCurrency?.symbol || '$' }}</span>
    <span>{{ currencyOut.toLocaleString() }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useCurrencyStore } from "@/stores/currency";
import { usePreferencesStore } from "@/stores/preferences";

// TODO: use props to make the symbol and name optional

const props = defineProps(["currencyIn", "showSymbol"]);

const currencyStore = useCurrencyStore();
const preferences = usePreferencesStore();

// Make userCurrency reactive to both currencies loading and preference changes
const userCurrency = computed(() => {
  return currencyStore.currencies.find(
    (e) => e.refId == preferences.currency,
  ) || { symbol: "$", name: "USD" };
});

const currencyOut = computed(() => {
  const rate = currencyStore.exchangeRates.find(
    (e) => e.quoteCurrency == preferences.currency,
  ) || { rate: 1 };
  const morePrecise = Number(props.currencyIn) * Number(rate.rate);
  return Math.ceil(morePrecise);
});

onMounted(async () => {
  await currencyStore.getCurrencies();
  await currencyStore.getRates();
});
</script>