diff --git a/apps/currencia/app/components/chart/CryptoCard.vue b/apps/currencia/app/components/chart/CryptoCard.vue index 8636b86..437ca68 100644 --- a/apps/currencia/app/components/chart/CryptoCard.vue +++ b/apps/currencia/app/components/chart/CryptoCard.vue @@ -1,4 +1,5 @@ @@ -36,15 +51,43 @@ const crypto = reactive({ {{ crypto.name }} {{ crypto.symbol }} -
+
- {{ crypto.price.toLocaleString() }} - $ -
-
- {{ crypto.change }}% + +
+ + +
+
+
+ + +
diff --git a/apps/currencia/app/composables/useCrypto.ts b/apps/currencia/app/composables/useCrypto.ts index 5971fbf..9717933 100644 --- a/apps/currencia/app/composables/useCrypto.ts +++ b/apps/currencia/app/composables/useCrypto.ts @@ -4,7 +4,15 @@ export const usePublicCrypto = () => { return useState('cryptos', () => []) } -export function useCrypto() { +export function useCryptoPrice(symbol: string) { + return useState(`crypto-${symbol}-price`) +} + +export function useCryptoPrices(symbol: string) { + return useState(`crypto-${symbol}-prices`) +} + +export function useCryptoService() { const publicCryptos = usePublicCrypto() const { user } = useUserSession() @@ -51,11 +59,12 @@ export function useCrypto() { async function deleteCrypto(id: number) { deleteLoading.value = true try { - const response = await $fetch(`/api/admin/crypto/${id}`, { + await $fetch(`/api/admin/crypto/${id}`, { method: 'DELETE', }) + const index = cryptos.value.findIndex((crypto) => crypto.id === id) + cryptos.value.splice(index, 1) toast.success('Crypto deleted successfully.') - if (response.value) cryptos.value = response.value } catch (error) { toast.error('Whoops! Something went wrong.') } diff --git a/apps/currencia/app/pages/app.vue b/apps/currencia/app/pages/app.vue index 2d76c54..74dcb16 100644 --- a/apps/currencia/app/pages/app.vue +++ b/apps/currencia/app/pages/app.vue @@ -3,7 +3,7 @@ definePageMeta({ layout: 'app', }) -await useCrypto().fetchPublicCryptos() +await useCryptoService().fetchPublicCryptos()