Render commits data

Author: haruelrovix

src/Components/Commit/CommitList.js

@@ -1,18 +1,69 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+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 CommitList = () => (
-  <View style={styles.container}>
-    <Text>Placeholder for second screen</Text>
-  </View>
-);
+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(
-  fetch('https://api.github.com/repos/react-native-training/react-native-elements/commits'),
-  withHeader({ title: 'Commits' })
+  withHeader({ title: 'Commits' }),
+  fetch('https://api.github.com/repos/react-native-training/react-native-elements/commits')
 )(CommitList);