-
Notifications
You must be signed in to change notification settings - Fork 1
/
Root.jsx
120 lines (112 loc) · 4.32 KB
/
Root.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { useEffect, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAppState, useTranslation, Section, Search, Cell, Placeholder, Button, CurrencyInput } from '../../Components/index'
import { server } from '../../API'
import { smartRound, formatNumber } from '../../functions'
const Root = () => {
const {
amount, setAmount,
selectedCcy, setSelectedCcy,
favorites, setFavorites,
homeData, setHomeData,
searchQuery, setSearchQuery,
searchResult, setSearchResult,
loading, setLoading,
fetching, setFetching
} = useAppState()
const navigate = useNavigate()
const { t } = useTranslation()
const getData = useCallback(async () => {
setLoading(true)
try {
const { data } = await server.get('/home')
if (data.favorites) {
setFavorites(data.favorites)
delete data.favorites
}
setHomeData(data)
setSelectedCcy(data.popular.data[0])
} catch (e) {
console.error(e)
} finally {
setLoading(false)
}
}, [setHomeData, setFavorites, setSelectedCcy, setLoading])
useEffect(() => {
if (!Object.keys(homeData).length) {
getData()
}
}, [homeData, getData])
const searchData = useCallback(async (query) => {
setFetching(true)
try {
const { data } = await server.get('/search', { params: { query } })
setSearchResult(data)
} catch (e) {
console.error(e)
} finally {
setFetching(false)
}
}, [setSearchResult, setFetching])
useEffect(() => {
if (searchQuery) {
searchData(searchQuery)
}
}, [searchQuery, searchData])
const renderCells = useCallback((arr) => arr.map((e) => (
<Cell
key={e.instId}
icon={e.baseCcy.logoLink}
title={e.baseCcy.ccy}
subtitle={`${e.baseCcy.name}`}
info1={formatNumber(e.last * Number(amount))}
info2={Number(amount) === 1 && `${e.last > e.open24h ? '+' : (e.last < e.open24h ? '-' : '')}${Math.abs(smartRound(e.last - e.open24h))}`}
info3={Number(amount) === 1 && `${e.last > e.open24h ? '+' : (e.last < e.open24h ? '-' : '')}${Math.abs(smartRound(e.last * 100 / e.open24h - 100))}%`}
type={e.last > e.open24h ? '+' : e.last < e.open24h ? '-' : ''}
onClick={() => {
navigate(`/ccy/${e.instId}`, { state: e })
window.scrollTo(0, 0)
}}
/>
)), [navigate, amount])
return (
<>
<Search setDebounceInput={setSearchQuery} param='cur' />
{loading ? (
<Section title={t('loading')} loading={true}>
{[...Array(7)].map((_, i) => <Cell key={i} loading={true} />)}
</Section>
) : searchQuery ? (
searchResult.length > 0 ? renderCells(searchResult) : (
<Placeholder
title={fetching ? t('searching') : t('empty')}
description={fetching ? t('lookingForInfo') : t('nothingFound')}
icon={fetching ? '👀' : '😔'}
action={fetching && <Button onClick={() => getData()}>{t('reload')}</Button>}
/>
)
) : (
<>
{favorites.length > 0 && (
<Section title={t('favorites')}>
{renderCells(favorites)}
</Section>
)}
{Object.keys(homeData).map((key) => (
<Section key={key} title={t(homeData[key].name)}>
{renderCells(homeData[key].data)}
</Section>
))}
<CurrencyInput
loading={loading}
title={loading ? t('loading') : selectedCcy.quoteCcy.ccy}
amount={loading ? '...' : amount}
setAmount={setAmount}
icon={selectedCcy.quoteCcy.logoLink}
/>
</>
)}
</>
)
}
export default Root