Created
December 13, 2018 01:23
-
-
Save haruelrovix/e4b02328766efd1491338d5111becff7 to your computer and use it in GitHub Desktop.
RNE x RNW: Render commits data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { ActivityIndicator, Dimensions, FlatList, Platform, View } from 'react-native'; | |
import { Avatar, ListItem } from 'react-native-elements'; | |
import { compose } from 'redux'; | |
import fetch from 'fetch-hoc'; | |
import styles from '../Shared.style'; | |
import withHeader from '../../HOCs/withHeader'; | |
const containerStyle = { | |
alignItems: 'flex-start', | |
borderBottomWidth: 1, | |
flex: 1, | |
width: Dimensions.get('window').width | |
}; | |
const subtitleStyle = { color: 'rgba(0, 0, 0, 0.54)' }; | |
const leftElementStyle = { | |
height: '100%', | |
marginRight: Platform.OS === 'web' ? 10 : 0 | |
}; | |
class CommitList extends React.PureComponent { | |
keyExtractor = (item) => item.sha | |
renderLeftElement = (item) => ( | |
<View style={leftElementStyle}> | |
<Avatar | |
source={{ uri: item.author.avatar_url }} | |
size='medium' | |
rounded | |
/> | |
</View> | |
) | |
renderItem = ({ item }) => ( | |
<ListItem | |
title={item.commit.author.name} | |
subtitle={item.commit.message} | |
leftElement={this.renderLeftElement(item)} | |
containerStyle={containerStyle} | |
subtitleStyle={subtitleStyle} | |
/> | |
) | |
renderContent = () => ( | |
this.props.loading ? | |
<ActivityIndicator color='#87ceeb' /> : | |
<FlatList | |
keyExtractor={this.keyExtractor} | |
data={this.props.data} | |
renderItem={this.renderItem} | |
/> | |
) | |
render() { | |
return ( | |
<View style={styles.container}> | |
{this.renderContent()} | |
</View> | |
); | |
} | |
} | |
export default compose( | |
withHeader({ title: 'Commits' }), | |
fetch('https://api.github.com/repos/react-native-training/react-native-elements/commits') | |
)(CommitList); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment