51 app/components/CoinList.js → app/components/CoinList/CoinList.js
View file
@@ -1,85 +1,84 @@
// @flow
import React, { Component } from 'react';
import {View, FlatList} from 'react-native';
import propTypes from 'prop-types';
import CoinListCell from './CoinListCell';
import CoinListHeader from './CoinListHeader';
import coinListStyles from '../styles/CoinListStyles';
import React, { Component } from 'react'
import { View, FlatList } from 'react-native'
import propTypes from 'prop-types'
import CoinListCell from '../CoinListCell/CoinListCell'
import CoinListHeader from '../CoinListHeader/CoinListHeader'
import coinListStyles from './CoinListStyles'

export default class CoinList extends Component {

constructor(props) {
super(props);
super(props)

this.state = {
cryptoCompareData: this.props.cryptoCompareData,
coinMarketcapData: this.props.coinMarketcapData,
sortByMarketCapAscending: true,
sortByChangeAscending: false,
sortByVolumeAscending: false,
};
}
}

sortByMarketCap() {
let sortedList;
let sortedList

if (this.state.sortByMarketCapAscending) {
sortedList = this.state.coinMarketcapData.sort((a, b) => parseFloat(a.market_cap_usd) -
parseFloat(b.market_cap_usd));
parseFloat(b.market_cap_usd))
} else {
sortedList = this.state.coinMarketcapData.sort((a, b) => parseFloat(b.market_cap_usd) -
parseFloat(a.market_cap_usd));
parseFloat(a.market_cap_usd))
}

this.setState({
coinMarketcapData: sortedList,
sortByMarketCapAscending: !this.state.sortByMarketCapAscending,
});
})
}

sortByChange() {
let sortedList;
let sortedList

if (this.state.sortByChangeAscending) {
sortedList = this.state.coinMarketcapData.sort((a, b) => parseFloat(a.percent_change_24h) -
parseFloat(b.percent_change_24h));
parseFloat(b.percent_change_24h))
} else {
sortedList = this.state.coinMarketcapData.sort((a, b) => parseFloat(b.percent_change_24h) -
parseFloat(a.percent_change_24h));
parseFloat(a.percent_change_24h))
}

this.setState({
coinMarketcapData: sortedList,
sortByChangeAscending: !this.state.sortByChangeAscending,
});
})
}

sortByVolume() {
let sortedList;
let sortedList

if (this.state.sortByVolumeAscending) {
sortedList = this.state.coinMarketcapData.sort((a, b) => parseFloat(a['24h_volume_usd']) -
parseFloat(b['24h_volume_usd']));
parseFloat(b['24h_volume_usd']))
} else {
sortedList = this.state.coinMarketcapData.sort((a, b) => parseFloat(b['24h_volume_usd']) -
parseFloat(a['24h_volume_usd']));
parseFloat(a['24h_volume_usd']))
}

this.setState({
coinMarketcapData: sortedList,
sortByVolumeAscending: !this.state.sortByVolumeAscending,
});
})
}

buttons() {
return [
{
title: "M.CAP",
title: 'M.CAP',
sortFunction: this.sortByMarketCap.bind(this),
isAscending: this.state.sortByMarketCapAscending,
},
{
title: "CHANGE",
title: 'CHANGE',
sortFunction: this.sortByChange.bind(this),
isAscending: this.state.sortByChangeAscending,
},
@@ -113,11 +112,11 @@ export default class CoinList extends Component {
keyExtractor={(item, index) => item.id}
/>
</View>
);
)
}
}

CoinList.propTypes = {
cryptoCompareData: propTypes.objectOf(propTypes.any).isRequired,
coinMarketcapData: propTypes.arrayOf(propTypes.any).isRequired
};
coinMarketcapData: propTypes.arrayOf(propTypes.any).isRequired,
}
10 app/components/CoinList/CoinListStyles.js
View file
@@ -0,0 +1,10 @@
import { StyleSheet } from 'react-native'
import Colors from '../../shared/styles/Colors'

const coinListStyles = StyleSheet.create({
container: {
backgroundColor: Colors.raketaBackgroundBlue,
},
})

export default coinListStyles
18 app/components/CoinListCell.js → app/components/CoinListCell/CoinListCell.js
View file
@@ -1,19 +1,19 @@
// @flow
import React, { Component } from 'react';
import { View, Text, Image, LayoutAnimation, TouchableOpacity } from 'react-native';
import coinListCellStyles from '../styles/CoinListCellStyles';
import PriceRangeView from './PriceRangeView'
import CoinListCellHeader from './CoinListCellHeader';
import React, { Component } from 'react'
import { View, Text, Image, LayoutAnimation, TouchableOpacity } from 'react-native'
import coinListCellStyles from './CoinListCellStyles'
import CoinListCellRangeView from './CoinListCellRangeView/CoinListCellRangeView'
import CoinListCellHeader from './CoinListCellHeader/CoinListCellHeader'


export default class CoinListCell extends Component {
constructor(props) {
super(props);
this.handleCellPress = this.handleCellPress.bind(this);
super(props)
this.handleCellPress = this.handleCellPress.bind(this)
}

state = {
isExpanded: false
isExpanded: false,
};

coinImage(coin) {
@@ -46,7 +46,7 @@ export default class CoinListCell extends Component {

if (this.state.isExpanded) {
cellHeader = <CoinListCellHeader />;
expandedView = <PriceRangeView item={this.props.item} />;
expandedView = <CoinListCellRangeView item={this.props.item} />;
}

return (
4 app/components/CoinListCellHeader.js → .../CoinListCellHeader/CoinListCellHeader.js
View file
@@ -1,8 +1,8 @@
// @flow
import React, { Component } from 'react'
import { View } from 'react-native'
import CoinListCellHeaderButton from './CoinListCellHeaderButton'
import coinListCellHeaderStyles from '../styles/CoinListCellHeaderStyles'
import CoinListCellHeaderButton from './CoinListCellHeaderButton/CoinListCellHeaderButton'
import coinListCellHeaderStyles from './CoinListCellHeaderStyles'

class CoinListCellHeader extends Component {
state = {
19 app/components/CoinListCellHeaderButton.js → ...lHeaderButton/CoinListCellHeaderButton.js
View file
@@ -1,19 +1,18 @@
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import coinListCellHeaderButtonStyles from '../styles/CoinListCellHeaderButtonStyles';
import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import coinListCellHeaderButtonStyles from './CoinListCellHeaderButtonStyles'

export default class CoinListCellHeaderButton extends Component {

handleOnPress = () => {
this.props.onPress(this.props.index);
this.props.onPress(this.props.index)
}

render() {
const s = coinListCellHeaderButtonStyles;
const isSelected = this.props.isSelected;
const text = this.props.text;
const s = coinListCellHeaderButtonStyles
const isSelected = this.props.isSelected
const text = this.props.text

return(
return (
<View>
<TouchableOpacity
key={text}
@@ -28,6 +27,6 @@ export default class CoinListCellHeaderButton extends Component {
</Text>
</TouchableOpacity>
</View>
);
)
}
}
16 app/styles/CoinListCellHeaderButtonStyles.js → ...rButton/CoinListCellHeaderButtonStyles.js
View file
@@ -1,6 +1,6 @@
import { StyleSheet } from 'react-native';
import { sanFranciscoWeights } from 'react-native-typography';
import Colors from './Colors';
import { StyleSheet } from 'react-native'
import { sanFranciscoWeights } from 'react-native-typography'
import Colors from '../../../../shared/styles/Colors'

const coinListCellHeaderButtonStyles = StyleSheet.create({
unselected: {
@@ -13,18 +13,18 @@ const coinListCellHeaderButtonStyles = StyleSheet.create({
alignItems: 'center',
},
selected: {
backgroundColor: Colors.rkWhiteTransparent
backgroundColor: Colors.rkWhiteTransparent,
},
buttonTextUnselected: {
...sanFranciscoWeights.bold,
color: Colors.rkPureWhite,
fontSize: 12,
textAlign: 'center',
opacity: 0.5
opacity: 0.5,
},
buttonTextSelected: {
opacity: 1.0
opacity: 1.0,
},
});
})

export default coinListCellHeaderButtonStyles;
export default coinListCellHeaderButtonStyles
12 app/components/CoinListCell/CoinListCellHeader/CoinListCellHeaderStyles.js
View file
@@ -0,0 +1,12 @@
import { StyleSheet } from 'react-native'

const coinListCellHeaderStyles = StyleSheet.create({
mainContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 20,
},
})

export default coinListCellHeaderStyles
54 app/components/PriceRangeView.js → ...istCellRangeView/CoinListCellRangeView.js
View file
@@ -1,21 +1,20 @@
// @flow
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image} from 'react-native';
import Svg,{
Circle,
G,
Rect,
LinearGradient,
Stop,
Defs,
ClipPath,
Polygon
} from 'react-native-svg';
import Colors from '../styles/Colors';
import priceRangeViewStyles from '../styles/PriceRangeViewStyles';

export default class PriceRangeView extends Component {

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, Image } from 'react-native'
import Svg, {
Circle,
G,
Rect,
LinearGradient,
Stop,
Defs,
ClipPath,
Polygon,
} from 'react-native-svg'
import Colors from '../../../shared/styles/Colors'
import coinListCellRangeViewStyles from './CoinListCellRangeViewStyles'

export default class CoinListCellRangeView extends Component {
// constructor(props) {
// super(props);
// // this.state = {
@@ -34,20 +33,18 @@ export default class PriceRangeView extends Component {


render() {
const s = coinListCellRangeViewStyles
const marketCap = this.props.item.market_cap_usd
const circulatingSupply = this.props.item.available_supply
const volume = this.props.item['24h_volume_usd']
const totalSupply = this.props.item.max_supply

const s = priceRangeViewStyles;

const marketCap = this.props.item.market_cap_usd;
const circulatingSupply = this.props.item.available_supply;
const volume = this.props.item['24h_volume_usd'];
const totalSupply = this.props.item.max_supply;


return(
return (
<View style={s.mainContainer}>
<View style={s.headerContainer}>

<View style={s.priceRangeView}>
<View style={s.CoinListCellRangeView}>

<View style={s.priceRangeCurrentContainer}>
<Text style={s.priceRangeCurrentText}>$11325.10</Text>
@@ -136,15 +133,14 @@ export default class PriceRangeView extends Component {
<View style={s.favoritesButtonImageText}>
<Image
style={s.favoritesButtonIcon}
source={require('../config/images/icon-addfavorites.png')}
source={require('../../../assets/images/icon-addfavorites.png')}
/>
<Text style={s.favoritesButtonText}>Add to Favorites</Text>
</View>
</TouchableOpacity>

</View>
</View>

);
)
}
}
44 app/styles/PriceRangeViewStyles.js → ...lRangeView/CoinListCellRangeViewStyles.js
View file
@@ -1,9 +1,9 @@
// @flow
import { StyleSheet } from 'react-native';
import { sanFranciscoWeights } from 'react-native-typography';
import Colors from './Colors';
import { StyleSheet } from 'react-native'
import { sanFranciscoWeights } from 'react-native-typography'
import Colors from '../../../shared/styles/Colors'

export default priceRangeViewStyles = StyleSheet.create({
export default coinListCellRangeViewStyles = StyleSheet.create({

mainContainer: {
flexDirection: 'column',
@@ -14,15 +14,15 @@ export default priceRangeViewStyles = StyleSheet.create({
headerContainer: {
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch'
alignItems: 'stretch',
},
headerText: {
...sanFranciscoWeights.bold,
color: Colors.rkDarkGray,
fontSize: 12,
textAlign: 'left'
textAlign: 'left',
},
priceRangeView: {
CoinListCellRangeView: {
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'stretch',
@@ -31,20 +31,20 @@ export default priceRangeViewStyles = StyleSheet.create({
priceRangeCurrentContainer: {
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center'
alignItems: 'center',
},
priceRangeCurrentText: {
...sanFranciscoWeights.semibold,
color: Colors.rkPureWhite,
fontSize: 15,
textAlign: 'center'
textAlign: 'center',
},
priceRangeCurrentChangeText: {
...sanFranciscoWeights.semibold,
color: Colors.rkRed,
fontSize: 12,
textAlign: 'center',
marginTop: 6
marginTop: 6,
},
priceRangeSVGContainer: {
height: 18,
@@ -63,41 +63,41 @@ export default priceRangeViewStyles = StyleSheet.create({
fontSize: 12,
},
leftAlign: {
textAlign: 'left'
textAlign: 'left',
},
rightAlign: {
textAlign: 'right',
},
dividerLine: {
backgroundColor: Colors.rkDarkGray,
height: 0.5,
marginTop: 16
marginTop: 16,
},
mainStatContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginTop: 16
marginTop: 16,
},
leftAlignedStatContainer: {
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start'
alignItems: 'flex-start',
},
rightAlignedStatContainer: {
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'flex-end'
alignItems: 'flex-end',
},
statText: {
...sanFranciscoWeights.semibold,
color: Colors.rkPureWhite,
fontSize: 12,
textAlign: 'left',
marginTop: 8
marginTop: 8,
},
statTextRight: {
textAlign: 'right'
textAlign: 'right',
},
favoritesButton: {
height: 44,
@@ -106,23 +106,23 @@ export default priceRangeViewStyles = StyleSheet.create({
backgroundColor: 'rgba(255,255,255,0.05)',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
alignItems: 'center',
},
favoritesButtonImageText: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center'
alignItems: 'center',
},
favoritesButtonIcon: {
width: 16,
height: 14,
marginRight: 9
marginRight: 9,
},
favoritesButtonText: {
...sanFranciscoWeights.semibold,
color: Colors.rkPureWhite,
fontSize: 12,
textAlign: 'left',
}
},

});
})
32 app/styles/CoinListCellStyles.js → ...onents/CoinListCell/CoinListCellStyles.js
View file
@@ -1,6 +1,6 @@
import { StyleSheet } from 'react-native';
import { sanFranciscoWeights } from 'react-native-typography';
import Colors from './Colors';
import { StyleSheet } from 'react-native'
import { sanFranciscoWeights } from 'react-native-typography'
import Colors from '../../shared/styles/Colors'


export default coinListCellStyles = StyleSheet.create({
@@ -17,9 +17,9 @@ export default coinListCellStyles = StyleSheet.create({
alignItems: 'stretch',
},
collapsedContainer: {
flexDirection:'row',
flexDirection: 'row',
alignItems: 'center',
justifyContent:'flex-end'
justifyContent: 'flex-end',
},
nameSymbolContainer: {
flexDirection: 'row',
@@ -32,25 +32,25 @@ export default coinListCellStyles = StyleSheet.create({
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
width: 90
width: 90,
},
symbolImage: {
width: 27,
height: 27,
borderRadius: 13.5,
marginRight: 12
marginRight: 12,
},
symbolText: {
...sanFranciscoWeights.semibold,
color: Colors.rkDarkGray,
fontSize: 15,
textAlign: 'left'
textAlign: 'left',
},
nameText: {
...sanFranciscoWeights.semibold,
color: Colors.rkPureWhite,
fontSize: 15,
textAlign: 'left'
textAlign: 'left',
},
priceContainer: {
flexDirection: 'row',
@@ -61,27 +61,27 @@ export default coinListCellStyles = StyleSheet.create({
...sanFranciscoWeights.semibold,
color: Colors.rkPureWhite,
fontSize: 15,
textAlign: 'right'
textAlign: 'right',
},
changeContainer: {
width: 100,
height: 34,
borderRadius: 4,
backgroundColor: Colors.rkGreenTransparent,
flexDirection:'row',
flexDirection: 'row',
alignItems: 'center',
justifyContent:'space-around',
justifyContent: 'space-around',
marginLeft: 16,
},
changeContainerNegative: {
backgroundColor: Colors.rkRedTransparent,
},
changeText: {
...sanFranciscoWeights.bold,
fontSize:14,
color: Colors.rkGreen
fontSize: 14,
color: Colors.rkGreen,
},
changeTextNegative: {
color: Colors.rkRed
color: Colors.rkRed,
},
});
})
23 app/components/CoinListHeader.js → ...mponents/CoinListHeader/CoinListHeader.js
View file
@@ -1,23 +1,21 @@
//@flow
import React, { Component } from 'react';
import { View } from 'react-native';
import coinListHeaderStyles from '../styles/CoinListHeaderStyles';
import CoinListHeaderButton from './CoinListHeaderButton';
import React, { Component } from 'react'
import { View } from 'react-native'
import coinListHeaderStyles from './CoinListHeaderStyles'
import CoinListHeaderButton from './CoinListHeaderButton/CoinListHeaderButton'

export default class CoinListHeader extends Component {

state = {
selectedButton: {index: 0}
selectedButton: { index: 0 },
}

handleHeaderButtonPress = (index) => {
this.setState({ selectedButton: {index} });
this.setState({ selectedButton: { index } })
}

render() {
const selectedIndex = this.state.selectedButton.index;
const selectedIndex = this.state.selectedButton.index

return(
return (
<View style={coinListHeaderStyles.container}>
{this.props.buttons.map((button, index) =>
(<CoinListHeaderButton
@@ -28,9 +26,8 @@ export default class CoinListHeader extends Component {
isSelected={selectedIndex === index}
isAscending={button.isAscending}
key={button.title}
/>)
)}
/>))}
</View>
);
)
}
}
24 app/components/CoinListHeaderButton.js → ...nListHeaderButton/CoinListHeaderButton.js
View file
@@ -1,22 +1,22 @@
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, Image } from 'react-native';
import React, { Component } from 'react'
import { View, TouchableOpacity, Text, Image } from 'react-native'
// import propTypes from 'prop-types';
import coinListHeaderButtonStyles from '../styles/CoinListHeaderButtonStyles';
import coinListHeaderButtonStyles from './CoinListHeaderButtonStyles'


export default class CoinListHeaderButton extends Component {

handleOnPress = () => {
this.props.onPress(this.props.index);
this.props.sortCallback();
this.props.onPress(this.props.index)
this.props.sortCallback()
}

render() {
const title = this.props.title;
const isSelected = this.props.isSelected;
const isAscending = this.props.isAscending;
const title = this.props.title
const isSelected = this.props.isSelected
const isAscending = this.props.isAscending

return(
return (
<View style={
isSelected ?
coinListHeaderButtonStyles.selected :
@@ -30,8 +30,8 @@ export default class CoinListHeaderButton extends Component {
<Image
source={
isAscending ?
require('../config/images/icon-up-sort.png') :
require('../config/images/icon-down-sort.png')
require('../../../assets/images/icon-up-sort.png') :
require('../../../assets/images/icon-down-sort.png')
}
/>
</View> :
@@ -40,6 +40,6 @@ export default class CoinListHeaderButton extends Component {
</View>
</TouchableOpacity>
</View>
);
)
}
}
14 app/styles/CoinListHeaderButtonStyles.js → ...eaderButton/CoinListHeaderButtonStyles.js
View file
@@ -1,6 +1,6 @@
import { StyleSheet } from 'react-native';
import { sanFranciscoWeights } from 'react-native-typography';
import Colors from './Colors';
import { StyleSheet } from 'react-native'
import { sanFranciscoWeights } from 'react-native-typography'
import Colors from '../../../shared/styles/Colors'

const coinListHeaderButtonStyles = StyleSheet.create({
selected: {
@@ -29,11 +29,11 @@ const coinListHeaderButtonStyles = StyleSheet.create({
...sanFranciscoWeights.bold,
color: Colors.rkPureWhite,
fontSize: 12,
textAlign: 'left'
textAlign: 'left',
},
icon: {
marginLeft: 8
marginLeft: 8,
},
});
})

export default coinListHeaderButtonStyles;
export default coinListHeaderButtonStyles
10 app/styles/CoinListHeaderStyles.js → ...ts/CoinListHeader/CoinListHeaderStyles.js
View file
@@ -1,5 +1,5 @@
import { StyleSheet, Dimensions } from 'react-native';
import Colors from './Colors';
import { StyleSheet, Dimensions } from 'react-native'
import Colors from '../../shared/styles/Colors'

const coinListHeaderStyles = StyleSheet.create({
container: {
@@ -12,7 +12,7 @@ const coinListHeaderStyles = StyleSheet.create({
paddingLeft: 16,
paddingRight: 16,
backgroundColor: Colors.rkDarkBlue,
}
});
},
})

export default coinListHeaderStyles;
export default coinListHeaderStyles
18 app/screens/App.js
View file
@@ -1,6 +1,6 @@
import { Navigation } from 'react-native-navigation'
import { registerScreens } from './index'
import Colors from '../styles/Colors'
import Colors from '../shared/styles/Colors'

registerScreens()

@@ -24,7 +24,7 @@ const navigatorButtons = {
buttonColor: 'red',
},
{
icon: require('../config/images/icon-settings.png'),
icon: require('../assets/images/icon-settings.png'),
id: 'settings',
},
],
@@ -34,17 +34,17 @@ Navigation.startTabBasedApp({
tabs: [
{
screen: 'Top100Screen', // this is a registered name for a screen
icon: require('../config/images/icon-top100.png'),
selectedIcon: require('../config/images/icon-top100-selected.png'),
titleImage: require('../config/images/logo-navbar.png'),
icon: require('../assets/images/icon-top100.png'),
selectedIcon: require('../assets/images/icon-top100-selected.png'),
titleImage: require('../assets/images/logo-navbar.png'),
label: 'Top 100',
navigatorStyle,
navigatorButtons,
},
{
screen: 'MoversScreen',
icon: require('../config/images/icon-movers.png'),
selectedIcon: require('../config/images/icon-movers-selected.png'),
icon: require('../assets/images/icon-movers.png'),
selectedIcon: require('../assets/images/icon-movers-selected.png'),
title: 'Movers',
label: 'Movers',
navigatorStyle,
@@ -53,8 +53,8 @@ Navigation.startTabBasedApp({
},
{
screen: 'FavoritesScreen',
icon: require('../config/images/icon-favorites.png'),
selectedIcon: require('../config/images/icon-favorites-selected.png'),
icon: require('../assets/images/icon-favorites.png'),
selectedIcon: require('../assets/images/icon-favorites-selected.png'),
title: 'Favorites',
label: 'Favorites',
navigatorStyle,
6 app/screens/FavoritesScreen.js → ...creens/FavoritesScreen/FavoritesScreen.js
View file
@@ -1,12 +1,12 @@
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import React, { Component } from 'react'
import { View, Text } from 'react-native'

export default class FavoritesScreen extends Component {
render() {
return (
<View>
<Text>Favorites</Text>
</View>
);
)
}
}
6 app/screens/MoversScreen.js → app/screens/MoversScreen/MoversScreen.js
View file
@@ -1,12 +1,12 @@
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import React, { Component } from 'react'
import { View, Text } from 'react-native'

export default class MoversScreen extends Component {
render() {
return (
<View>
<Text>Movers</Text>
</View>
);
)
}
}
47 app/screens/Top100Screen.js → app/screens/Top100Screen/Top100Screen.js
View file
@@ -1,13 +1,11 @@
import React, { Component } from 'react';
import {View, Text} from 'react-native';
import top100ScreenStyles from '../styles/Top100ScreenStyles';
import coinListStyles from '../styles/CoinListStyles';
import CoinList from '../components/CoinList';
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import top100ScreenStyles from './Top100ScreenStyles'
import CoinList from '../../components/CoinList/CoinList'

export default class Top100Screen extends Component {

constructor(props) {
super(props);
super(props)

this.state = {
cryptoCompareDataFetched: false,
@@ -18,53 +16,52 @@ export default class Top100Screen extends Component {
}

componentDidMount() {
this.fetchCryptoCompareData();
this.fetchCoinMarketData();
this.fetchCryptoCompareData()
this.fetchCoinMarketData()
}

fetchCryptoCompareData() {
return fetch('https://www.cryptocompare.com/api/data/coinlist/')
.then(response => response.json())
.then(responseJson => {
this.setState({ cryptoCompareData: responseJson, cryptoCompareDataFetched: true });
.then((responseJson) => {
this.setState({ cryptoCompareData: responseJson, cryptoCompareDataFetched: true })
})
.catch((error) => {
console.error(error)
})
.catch(error => {
console.error(error);
});
}

fetchCoinMarketData() {
return fetch('https://api.coinmarketcap.com/v1/ticker/?limit=100')
.then(response => response.json())
.then(responseJson => {
this.setState({ coinMarketcapData: responseJson, coinMarketcapDataFetched: true });
.then((responseJson) => {
this.setState({ coinMarketcapData: responseJson, coinMarketcapDataFetched: true })
})
.catch((error) => {
console.error(error)
})
.catch(error => {
console.error(error);
});
}

render() {
let containerView;
const isDataFetched = this.state.cryptoCompareDataFetched && this.state.coinMarketcapDataFetched;
let containerView
const isDataFetched = this.state.cryptoCompareDataFetched && this.state.coinMarketcapDataFetched

if (isDataFetched) {
containerView = (
<CoinList
style={coinListStyles.container}
cryptoCompareData={this.state.cryptoCompareData}
coinMarketcapData={this.state.coinMarketcapData}
/> );
/>)
} else {
containerView = (
<View>
<Text>Loading...</Text>
</View> );
</View>)
}
return (
<View style={top100ScreenStyles.container}>
{containerView}
</View>
);
)
}
}
10 app/screens/Top100Screen/Top100ScreenStyles.js
View file
@@ -0,0 +1,10 @@
import { StyleSheet } from 'react-native'
import Colors from '../../shared/styles/Colors'

const top100ScreenStyles = StyleSheet.create({
container: {
backgroundColor: Colors.rkDarkBlue,
},
})

export default top100ScreenStyles
6 app/screens/index.js
View file
@@ -1,7 +1,7 @@
import { Navigation } from 'react-native-navigation'
import Top100Screen from './Top100Screen'
import MoversScreen from './MoversScreen'
import FavoritesScreen from './FavoritesScreen'
import Top100Screen from './Top100Screen/Top100Screen'
import MoversScreen from './MoversScreen/MoversScreen'
import FavoritesScreen from './FavoritesScreen/FavoritesScreen'

export function registerScreens() {
Navigation.registerComponent('Top100Screen', () => Top100Screen)
6 app/styles/Colors.js → app/shared/styles/Colors.js
View file
@@ -3,13 +3,13 @@ const Colors = {
rkLightBlue: '#21243B',
rkNavBarBlue: 'rgba(33,36,59,0.9)',
rkPureWhite: '#FFFFFF',
rkWhiteTransparent:'rgba(255,255,255,0.05)',
rkWhiteTransparent: 'rgba(255,255,255,0.05)',
rkTransparent: 'transparent',
rkDarkGray: 'rgba(255, 255, 255, 0.25)',
rkGreen: 'rgb(130, 255, 193)',
rkGreenTransparent: 'rgba(130, 255, 193, 0.15)',
rkRed: 'rgb(255, 94, 77)',
rkRedTransparent: 'rgba(255, 94, 77, 0.15)',
};
}

export default Colors;
export default Colors
9 app/styles/AppStyles.js
View file

This file was deleted.

12 app/styles/CoinListCellHeaderStyles.js
View file

This file was deleted.

10 app/styles/CoinListStyles.js
View file

This file was deleted.

8 app/styles/TabNavStyles.js
View file

This file was deleted.

10 app/styles/Top100ScreenStyles.js
View file

This file was deleted.

2 ios/Raketa-tvOS/Info.plist
View file
@@ -39,7 +39,7 @@
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>NSAppTransportSecurity</key>
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
<!--See http://ste.vn/2015/06/10/assetsuring-app-transport-security-ios-9-osx-10-11/ -->
<dict>
<key>NSExceptionDomains</key>
<dict>
56 ios/Raketa.xcodeproj/project.pbxproj
View file
@@ -608,7 +608,7 @@
/* Begin PBXNativeTarget section */
00E356ED1AD99517003FC87E /* RaketaTests */ = {
isa = PBXNativeTarget;
buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "RaketaTests" */;
buildassetsurationList = 00E357021AD99517003FC87E /* Build assetsuration list for PBXNativeTarget "RaketaTests" */;
buildPhases = (
00E356EA1AD99517003FC87E /* Sources */,
00E356EB1AD99517003FC87E /* Frameworks */,
@@ -626,7 +626,7 @@
};
13B07F861A680F5B00A75B9A /* Raketa */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Raketa" */;
buildassetsurationList = 13B07F931A680F5B00A75B9A /* Build assetsuration list for PBXNativeTarget "Raketa" */;
buildPhases = (
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
@@ -661,7 +661,7 @@
};
};
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Raketa" */;
buildassetsurationList = 83CBB9FA1A601CBA00E9B192 /* Build assetsuration list for PBXProject "Raketa" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
@@ -1097,9 +1097,9 @@
};
/* End PBXVariantGroup section */

/* Begin XCBuildConfiguration section */
/* Begin XCBuildassetsuration section */
00E356F61AD99517003FC87E /* Debug */ = {
isa = XCBuildConfiguration;
isa = XCBuildassetsuration;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CODE_SIGN_IDENTITY = "";
@@ -1131,7 +1131,7 @@
name = Debug;
};
00E356F71AD99517003FC87E /* Release */ = {
isa = XCBuildConfiguration;
isa = XCBuildassetsuration;
buildSettings = {
BUNDLE_LOADER = "$(TEST_HOST)";
CODE_SIGN_IDENTITY = "";
@@ -1160,7 +1160,7 @@
name = Release;
};
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
isa = XCBuildassetsuration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CURRENT_PROJECT_VERSION = 1;
@@ -1184,7 +1184,7 @@
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
isa = XCBuildassetsuration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CURRENT_PROJECT_VERSION = 1;
@@ -1207,7 +1207,7 @@
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
isa = XCBuildassetsuration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
@@ -1249,7 +1249,7 @@
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
isa = XCBuildassetsuration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
@@ -1284,37 +1284,37 @@
};
name = Release;
};
/* End XCBuildConfiguration section */
/* End XCBuildassetsuration section */

/* Begin XCConfigurationList section */
00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "RaketaTests" */ = {
isa = XCConfigurationList;
buildConfigurations = (
/* Begin XCassetsurationList section */
00E357021AD99517003FC87E /* Build assetsuration list for PBXNativeTarget "RaketaTests" */ = {
isa = XCassetsurationList;
buildassetsurations = (
00E356F61AD99517003FC87E /* Debug */,
00E356F71AD99517003FC87E /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
defaultassetsurationIsVisible = 0;
defaultassetsurationName = Release;
};
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Raketa" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F931A680F5B00A75B9A /* Build assetsuration list for PBXNativeTarget "Raketa" */ = {
isa = XCassetsurationList;
buildassetsurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
defaultassetsurationIsVisible = 0;
defaultassetsurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Raketa" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBB9FA1A601CBA00E9B192 /* Build assetsuration list for PBXProject "Raketa" */ = {
isa = XCassetsurationList;
buildassetsurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
defaultassetsurationIsVisible = 0;
defaultassetsurationName = Release;
};
/* End XCConfigurationList section */
/* End XCassetsurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}
10 ios/Raketa.xcodeproj/xcshareddata/xcschemes/Raketa-tvOS.xcscheme
View file
@@ -51,7 +51,7 @@
</BuildActionEntries>
</BuildAction>
<TestAction
buildConfiguration = "Debug"
buildassetsuration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES">
@@ -80,7 +80,7 @@
</AdditionalOptions>
</TestAction>
<LaunchAction
buildConfiguration = "Debug"
buildassetsuration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
@@ -103,7 +103,7 @@
</AdditionalOptions>
</LaunchAction>
<ProfileAction
buildConfiguration = "Release"
buildassetsuration = "Release"
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
@@ -120,10 +120,10 @@
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
buildassetsuration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
buildassetsuration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>
10 ios/Raketa.xcodeproj/xcshareddata/xcschemes/Raketa.xcscheme
View file
@@ -51,7 +51,7 @@
</BuildActionEntries>
</BuildAction>
<TestAction
buildConfiguration = "Debug"
buildassetsuration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES">
@@ -80,7 +80,7 @@
</AdditionalOptions>
</TestAction>
<LaunchAction
buildConfiguration = "Debug"
buildassetsuration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
@@ -103,7 +103,7 @@
</AdditionalOptions>
</LaunchAction>
<ProfileAction
buildConfiguration = "Release"
buildassetsuration = "Release"
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
@@ -120,10 +120,10 @@
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
buildassetsuration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
buildassetsuration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>
16 package-lock.json
View file
2 package.json
View file
@@ -6,7 +6,7 @@
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.2",
"eslint": "^4.18.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-assets-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.46.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
16 yarn.lock
View file
@@ -1363,9 +1363,9 @@ concat-stream@1.6.0, concat-stream@^1.6.0:
readable-stream "^2.2.2"
typedarray "^0.0.6"

configstore@^3.0.0:
assetsstore@^3.0.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
resolved "https://registry.yarnpkg.com/assetsstore/-/assetsstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90"
dependencies:
dot-prop "^4.1.0"
graceful-fs "^4.1.2"
@@ -1781,17 +1781,17 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"

eslint-config-airbnb-base@^12.1.0:
eslint-assets-airbnb-base@^12.1.0:
version "12.1.0"
resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz#386441e54a12ccd957b0a92564a4bafebd747944"
resolved "https://registry.yarnpkg.com/eslint-assets-airbnb-base/-/eslint-assets-airbnb-base-12.1.0.tgz#386441e54a12ccd957b0a92564a4bafebd747944"
dependencies:
eslint-restricted-globals "^0.1.1"

eslint-config-airbnb@^16.1.0:
eslint-assets-airbnb@^16.1.0:
version "16.1.0"
resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz#2546bfb02cc9fe92284bf1723ccf2e87bc45ca46"
resolved "https://registry.yarnpkg.com/eslint-assets-airbnb/-/eslint-assets-airbnb-16.1.0.tgz#2546bfb02cc9fe92284bf1723ccf2e87bc45ca46"
dependencies:
eslint-config-airbnb-base "^12.1.0"
eslint-assets-airbnb-base "^12.1.0"

eslint-import-resolver-node@^0.3.1:
version "0.3.2"
@@ -4820,7 +4820,7 @@ update-notifier@^2.1.0:
dependencies:
boxen "^1.2.1"
chalk "^2.0.1"
configstore "^3.0.0"
assetsstore "^3.0.0"
import-lazy "^2.1.0"
is-installed-globally "^0.1.0"
is-npm "^1.0.0"