Skip to content

Commit 49fc3bc

Browse files
TLucas97TLucas97
committed
🔨 Code refactoring
1 parent 4342b52 commit 49fc3bc

File tree

5 files changed

+157
-125
lines changed

5 files changed

+157
-125
lines changed

‎src/App.vue

+32-108
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<div class="bg-dacxi-white h-full">
44
<Header />
55
<div
6-
class="flex justify-between align-center w-8/12 mx-auto height-adjust"
6+
class="flex justify-evenly flex-column flex-md-row align-center w-11/12 sm:w-11/12 mx-auto height-adjust"
77
>
88
<div>
99
<p class="text-center text-sm" @click="updateChart()">
10-
{{ priceTitle }} test
10+
{{ priceTitle }}
1111
</p>
1212
<div v-if="loading" class="flex justify-center mb-7">
1313
<v-progress-circular
@@ -70,11 +70,11 @@
7070
>{{ filterButton }}</v-btn
7171
>
7272
</div>
73-
<div>
73+
<div class="mt-10 mt-md-0">
7474
<div
75-
class="flex justify-end mb-5 font-weight-bold fade-in fade-out"
75+
class="flex justify-center mb-5 font-weight-bold fade-in fade-out"
7676
>
77-
<h3>
77+
<h3 class="text-base">
7878
<span class="text-capitalize">{{
7979
cripto.currentCripto
8080
}}</span>
@@ -84,29 +84,24 @@
8484
}}</span>
8585
</h3>
8686
</div>
87-
<apexchart
88-
width="650"
89-
type="area"
90-
:options="options"
91-
:series="series"
92-
class="fade-in fade-out"
93-
></apexchart>
87+
<div>
88+
<apexchart
89+
width="600"
90+
type="area"
91+
:options="options"
92+
:series="series"
93+
class="fade-in fade-out"
94+
></apexchart>
95+
</div>
9496
</div>
9597
</div>
9698
</div>
9799
</v-app>
98100
</template>
99101

100102
<script>
101-
import {
102-
getCoinCurrentPrice,
103-
formatPriceBasedOnCoin,
104-
getCurrentCoinPriceBasedOnDate,
105-
convertDateToMiliseconds,
106-
validateDateBasedOnCrypto,
107-
disableFutureDates,
108-
getCoinMarketChart,
109-
} from './utils/methods'
103+
import * as gecko from './utils/methods'
104+
import { mockedData } from './utils/mockedData'
110105
import Header from './components/Header.vue'
111106
112107
export default {
@@ -127,75 +122,18 @@ export default {
127122
dateTime: '',
128123
progressValue: 0,
129124
progressView: true,
130-
options: {
131-
chart: {
132-
id: 'dacxi-cripto-chart',
133-
},
134-
xaxis: {
135-
categories: [],
136-
},
137-
},
138-
series: [
139-
{
140-
name: '',
141-
data: [],
142-
},
143-
],
144-
coin: {
145-
coins: [
146-
{
147-
text: 'USD',
148-
value: 'usd',
149-
},
150-
{
151-
text: 'EUR',
152-
value: 'eur',
153-
},
154-
{
155-
text: 'BRL',
156-
value: 'brl',
157-
},
158-
],
159-
currentCoin: 'usd',
160-
},
161-
cripto: {
162-
criptos: [
163-
{
164-
text: 'Ethereum',
165-
value: 'ethereum',
166-
},
167-
{
168-
text: 'Bitcoin',
169-
value: 'bitcoin',
170-
},
171-
{
172-
text: 'Luna',
173-
value: 'terra-luna',
174-
},
175-
{
176-
text: 'Dacxi',
177-
value: 'dacxi',
178-
},
179-
],
180-
currentCripto: 'bitcoin',
181-
},
125+
coin: mockedData[0],
126+
cripto: mockedData[1],
127+
options: mockedData[2].options,
128+
series: mockedData[2].series,
182129
}),
183-
async mounted() {
184-
this.loadChart()
130+
mounted() {
185131
this.setCripto()
186132
this.timerUpdate()
187133
},
188134
methods: {
189-
async loadChart() {
190-
const { prices } = await getCoinMarketChart(
191-
this.cripto.currentCripto,
192-
this.coin.currentCoin
193-
)
194-
this.series[0].data = prices.map((price) => price[1].toFixed(4))
195-
this.series[0].name = 'bitcoin $'
196-
},
197135
async updateChart() {
198-
const { prices } = await getCoinMarketChart(
136+
const { prices } = await gecko.getCoinMarketChart(
199137
this.cripto.currentCripto,
200138
this.coin.currentCoin
201139
)
@@ -210,7 +148,7 @@ export default {
210148
async setCripto() {
211149
this.loading = true
212150
this.progressValue = 0
213-
this.price = await getCoinCurrentPrice(
151+
this.price = await gecko.getCoinCurrentPrice(
214152
this.cripto.currentCripto,
215153
this.coin.currentCoin
216154
)
@@ -228,47 +166,33 @@ export default {
228166
}, 100)
229167
},
230168
formatCurrency(value, coin) {
231-
return formatPriceBasedOnCoin(value, coin)
169+
return gecko.formatPriceBasedOnCoin(value, coin)
232170
},
233171
async setDateTime() {
234172
if (this.currentTime.date === '' || this.currentTime.hour === '') {
235173
this.$toast.warning('Please select a date and hour')
236174
return
237175
}
238-
const fullDate = new Date(
239-
this.currentTime.date + ' ' + this.currentTime.hour
176+
const fullDate = gecko.mergeDateAndTime(
177+
this.currentTime.date,
178+
this.currentTime.hour
240179
)
241-
const dateValidation = disableFutureDates(fullDate)
242-
if (dateValidation) {
180+
if (gecko.disableFutureDates(fullDate)) {
243181
this.$toast.warning("You can't select a future date")
244182
return
245183
}
246184
this.progressView = false
247185
this.loading = true
248-
const dateResult = validateDateBasedOnCrypto(
186+
const dateResult = gecko.validateDateBasedOnCrypto(
249187
this.cripto.currentCripto,
250188
fullDate
251189
)
252-
const fulldatePlusOneHour = new Date(
253-
dateResult.getTime() + 300 * 300 * 1000
254-
)
255-
const fullDateMinusOneHour = new Date(
256-
dateResult.getTime() - 300 * 300 * 1000
257-
)
258-
const result = await getCurrentCoinPriceBasedOnDate(
190+
const result = await gecko.getCurrentCoinPriceBasedOnDate(
259191
this.cripto.currentCripto,
260192
this.coin.currentCoin,
261-
fullDateMinusOneHour,
262-
fulldatePlusOneHour
193+
dateResult
263194
)
264-
const currentDateTimeStamp = convertDateToMiliseconds(fullDate)
265-
const closestPrice = result.prices.reduce((prev, curr) => {
266-
return Math.abs(curr[0] - currentDateTimeStamp) <
267-
Math.abs(prev[0] - currentDateTimeStamp)
268-
? curr
269-
: prev
270-
})
271-
this.oldPrice = closestPrice[1]
195+
this.oldPrice = result[1]
272196
this.priceTitle = 'Closest available price'
273197
this.filterButton = 'Clear filters'
274198
this.loading = false

‎src/components/Header.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<div
3-
class="w-full bg-dacxi-blue px-5 h-17 flex justify-between align-center"
3+
class="w-full bg-dacxi-blue px-5 h-17 flex justify-between align-center mb-10 mb-sm-0"
44
>
5-
<img src="../assets/dacxi-logo.png" alt="" class="py-2" />
6-
<span class="white--text"
5+
<img src="../assets/dacxi-logo.png" alt="dacxi-logo" class="py-2 w-20 sm:w-64" />
6+
<span class="white--text text-smaller text-sm-subtitle-2"
77
>Application data provided by:
88
<a
99
href="https://www.coingecko.com/en/api/documentation"

‎src/utils/methods.js

+49-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import geckoApi from './geckoApi'
22

33
export const getCoinMarketChart = async (cripto, coin, days = 30) => {
4-
const { data } = await geckoApi.get(`/coins/${cripto}/market_chart?`, {
5-
params: {
6-
vs_currency: coin,
7-
days: days,
8-
interval: 'daily',
9-
},
10-
})
11-
return data
4+
try {
5+
const { data } = await geckoApi.get(`/coins/${cripto}/market_chart?`, {
6+
params: {
7+
vs_currency: coin,
8+
days: days,
9+
interval: 'daily',
10+
},
11+
})
12+
return data
13+
} catch (error) {
14+
console.log(error)
15+
}
1216
}
1317

1418
export const getCoinCurrentPrice = async (cripto, coin) => {
@@ -20,19 +24,46 @@ export const getCoinCurrentPrice = async (cripto, coin) => {
2024
}
2125
}
2226

27+
export const getPastFutureRange = (date, futureOrPast) => {
28+
const timeState = {
29+
future: new Date(date.getTime() + 300 * 300 * 1000),
30+
past: new Date(date.getTime() - 300 * 300 * 1000),
31+
}
32+
return timeState[futureOrPast]
33+
}
34+
2335
export const getCurrentCoinPriceBasedOnDate = async (
2436
cripto,
2537
coin,
26-
fromDate,
27-
toDate
38+
targetDate
2839
) => {
29-
const fromTimestamp = convertDateToMiliseconds(fromDate)
30-
const toTimestamp = convertDateToMiliseconds(toDate)
40+
const ranges = {
41+
pastDate: getPastFutureRange(targetDate, 'past'),
42+
futureDate: getPastFutureRange(targetDate, 'future'),
43+
}
44+
const timeStamps = {
45+
from: convertDateToMiliseconds(ranges.pastDate),
46+
to: convertDateToMiliseconds(ranges.futureDate),
47+
current: convertDateToMiliseconds(targetDate),
48+
}
3149
try {
3250
const { data } = await geckoApi.get(
33-
`/coins/${cripto}/market_chart/range?vs_currency=${coin}&from=${fromTimestamp}&to=${toTimestamp}`
51+
`/coins/${cripto}/market_chart/range?`,
52+
{
53+
params: {
54+
vs_currency: coin,
55+
from: timeStamps.from,
56+
to: timeStamps.to,
57+
},
58+
}
3459
)
35-
return data
60+
const closestPrice = data.prices.reduce((prev, curr) => {
61+
return Math.abs(curr[0] - timeStamps.current) <
62+
Math.abs(prev[0] - timeStamps.current)
63+
? curr
64+
: prev
65+
})
66+
return closestPrice
3667
} catch (error) {
3768
console.log(error)
3869
}
@@ -95,3 +126,7 @@ export const disableFutureDates = (date) => {
95126
const today = new Date()
96127
return date > today
97128
}
129+
130+
export const mergeDateAndTime = (date, time) => {
131+
return new Date(date + ' ' + time)
132+
}

‎src/utils/mockedData.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
export const mockedData = [
2+
{
3+
coins: [
4+
{
5+
text: 'USD',
6+
value: 'usd',
7+
},
8+
{
9+
text: 'EUR',
10+
value: 'eur',
11+
},
12+
{
13+
text: 'BRL',
14+
value: 'brl',
15+
},
16+
],
17+
currentCoin: 'usd',
18+
},
19+
{
20+
criptos: [
21+
{
22+
text: 'Ethereum',
23+
value: 'ethereum',
24+
},
25+
{
26+
text: 'Bitcoin',
27+
value: 'bitcoin',
28+
},
29+
{
30+
text: 'Luna',
31+
value: 'terra-luna',
32+
},
33+
{
34+
text: 'Dacxi',
35+
value: 'dacxi',
36+
},
37+
],
38+
currentCripto: 'bitcoin',
39+
},
40+
{
41+
options: {
42+
chart: {
43+
id: 'dacxi-cripto-chart',
44+
},
45+
xaxis: {
46+
categories: [],
47+
},
48+
responsive: [
49+
{
50+
breakpoint: 600,
51+
options: {
52+
chart: {
53+
width: 350,
54+
height: 400,
55+
},
56+
legend: {
57+
position: 'bottom',
58+
},
59+
},
60+
},
61+
],
62+
},
63+
series: [
64+
{
65+
name: '',
66+
data: [],
67+
},
68+
],
69+
},
70+
]

‎tailwind.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ module.exports = {
1414
'dacxi-blue': '#000032',
1515
},
1616
},
17+
fontSize: {
18+
'smaller': '0.5rem',
19+
}
1720
},
1821
variants: {
1922
extend: {},

0 commit comments

Comments
 (0)