Add commits

index.android.js

@@ -11,8 +11,8 @@ import Notification from './src/pages/notification'
 import UserList from './src/pages/user-list'
 import Issue from './src/pages/issue'
 import IssueList from './src/pages/issue-list'
-import Commit from './src/pages/commit'
-import CommitDetail from './src/pages/commit-detail'
+import Commit from './src/pages/commits'
+import CommitDetail from './src/pages/commit'
 
 class GiltApplication extends React.Component {
   initNavigator = navigator => {
@@ -48,15 +48,15 @@ class GiltApplication extends React.Component {
         return <Issue route={route} navigator={navigator} />
       case 'ISSUE_LIST':
         return <IssueList route={route} navigator={navigator} />
-      case 'COMMIT':
+      case 'COMMITS':
         return <Commit route={route} navigator={navigator} />
-      case 'COMMIT_DETAIL':
+      case 'COMMIT':
         return <CommitDetail route={route} navigator={navigator} />
     }
   }
   render() {
     return (
-      <Navigator initialRoute={routes[10]} renderScene={this.renderScene}
+      <Navigator initialRoute={routes[0]} renderScene={this.renderScene}
         configureScene={() => Navigator.SceneConfigs.FloatFromBottomAndroid} />
     )
   }

src/components/commit-file.js

@@ -0,0 +1,126 @@
+import React from 'react'
+import { Image, ScrollView, StyleSheet, ToolbarAndroid, TouchableHighlight, View, Text, ListView } from 'react-native'
+import TimeAgo from 'react-native-timeago'
+
+const styles = StyleSheet.create({
+  time: {
+    fontSize: 12,
+  },
+  list: {
+    flex: 1,
+    justifyContent: 'space-between',
+    marginVertical: 10,
+  },
+  timeContainer: {
+    flexDirection: 'row',
+  },
+  time: {
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  head: {
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+    marginLeft: 15,
+  },
+  title: {
+    backgroundColor: '#d1e2eb',
+    padding: 10,
+    color: '#213f4d',
+    fontWeight: 'bold',
+  },
+  authorContainer: {
+    flexDirection: 'row',
+    margin: 10,
+  },
+  head: {
+    height: 30,
+    width: 30,
+    borderRadius: 15,
+  },
+  author: {
+    fontWeight: 'bold',
+    marginHorizontal: 5,
+  },
+  filenameContainer: {
+    backgroundColor: '#eee',
+    padding: 10,
+    flexDirection: 'row',
+  },
+  filenameText: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  green: {
+    color: '#00c853',
+    fontSize: 12,
+  },
+  red: {
+    color: '#d50000',
+    fontSize: 12,
+  },
+  codeContainer: {
+  },
+  hunkContainer: {
+    backgroundColor: '#f3f3ff',
+  },
+  additionContainer: {
+    backgroundColor: '#eaffea',
+  },
+  deletionContainer: {
+    backgroundColor: '#ffecec',
+  },
+  normalContainer: {
+  },
+  code: {
+    fontSize: 12,
+    fontFamily: 'monospace',
+  },
+})
+
+export default class CommitFile extends React.Component {
+  renderLine = (line, index) => {
+    if (line.startsWith('@@')) {
+      return (
+        <View key={index} style={styles.hunkContainer}>
+          <Text style={styles.code}>{line}</Text>
+        </View>
+      )
+    }
+    if (line.startsWith('+')) {
+      return (
+        <View s key={index} style={styles.additionContainer}>
+          <Text style={styles.code}>{line}</Text>
+        </View>
+      )
+    }
+    if (line.startsWith('-')) {
+      return (
+        <View key={index} style={styles.deletionContainer}>
+          <Text style={styles.code}>{line}</Text>
+        </View>
+      )
+    }
+    return (
+      <View key={index} style={styles.normalContainer}>
+        <Text style={styles.code}>{line}</Text>
+      </View>
+    )
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.filenameContainer}>
+          <Text style={styles.green}>{this.props.file.additions}+ </Text>
+          <Text style={styles.red}>{this.props.file.deletions}- </Text>
+          <Text style={styles.filenameText}>{this.props.file.filename}</Text>
+        </View>
+        <ScrollView horizontal style={styles.codeContainer}>
+          <View>
+            { this.props.file.patch.split("\n").map(this.renderLine) }
+          </View>
+        </ScrollView>
+      </View>)
+  }
+}

src/components/commit-list.js

@@ -9,7 +9,6 @@ import issueIcon from '../images/warning.png'
 import mergedPullRequestIcon from '../images/merge.png'
 import closedPullRequestIcon from '../images/closed-pull-request.png'
 import pullRequestIcon from '../images/pull-request.png'
-import Qingzhen from '../images/qingzhen.png'
 
 const styles = StyleSheet.create({
   repo: {
@@ -42,10 +41,11 @@ const styles = StyleSheet.create({
     lineHeight: 24,
     fontWeight: 'bold',
   },
-  icon: {
-    margin: 15,
-    width: 24,
-    height: 24,
+  head: {
+    margin: 10,
+    borderRadius: 15,
+    width: 30,
+    height: 30,
   },
   row: {
     flexDirection: 'row',
@@ -59,35 +59,37 @@ const styles = StyleSheet.create({
 })
 
 export default class CommitList extends React.Component {
+  handleShowCommit = sha => {
+    this.props.navigator.push(Object.assign({}, routes[10], {
+      api: `${this.props.api}/${sha}`,
+    }))
+  }
   render() {
     return (
       <View style={styles.container}>
-        { !!this.props.title &&
-          <Text style={styles.repoTitle}>
-            {this.props.title}
-          </Text>
-        }
-        { !!this.props.dataSource && <ListView dataSource={this.props.dataSource}
-            renderRow={ message =>
-              <View style={styles.row}>
-                <Image style={styles.icon} source={Qingzhen} />
-                <View style={styles.list}>
-                  <Text style={styles.title}>{ message[2] }</Text>
-                  <View style={styles.timeContainer}>
-                    { message[0] && <Text style={styles.time}>
-                      Open by {message[0]+ ' '}
-                      </Text>
-                    }
-                    <TimeAgo style={styles.time} time={message[1] || message[1]} />
-                  </View>
+        <ListView dataSource={this.props.dataSource}
+          renderRow={commit =>
+            <View style={styles.row}>
+              <Image style={styles.head} source={{ uri: commit.author.avatar_url }} />
+              <View style={styles.list}>
+                <TouchableHighlight underlayColor="#e0e0e0"
+                  onPress={this.handleShowCommit.bind(this, commit.sha)}>
+                  <Text style={styles.title}>{ commit.commit.message.split("\n")[0] }</Text>
+                </TouchableHighlight>
+                <View style={styles.timeContainer}>
+                  <Text style={styles.time}>
+                    { commit.committer ? commit.committer.login : commit.commit.author } committed{' '}
+                  </Text>
+                  <TimeAgo style={styles.time} time={commit.commit.committer.date} />
                 </View>
               </View>
-            }
-            renderSeparator={(sectionId, rowId) => (
-              <View key={rowId} style={styles.separator} />
-            )}
-          />
-        }
-      </View>)
+            </View>
+          }
+          renderSeparator={(sectionId, rowId) => (
+            <View key={rowId} style={styles.separator} />
+          )}
+        />
+      </View>
+    )
   }
 }