feat(commit): view commits

routes.js

@@ -47,6 +47,8 @@ import {
   IssueListScreen,
   PullListScreen,
   PullDiffScreen,
+  CommitScreen,
+  CommitListScreen,
   ReadMeScreen,
 } from 'repository';
 
@@ -158,6 +160,18 @@ const sharedRoutes = {
       title: navigation.state.params.title,
     }),
   },
+  CommitList: {
+    screen: CommitListScreen,
+    navigationOptions: ({ navigation }) => ({
+      title: navigation.state.params.title,
+    }),
+  },
+  Commit: {
+    screen: CommitScreen,
+    navigationOptions: ({ navigation }) => ({
+      title: navigation.state.params.title,
+    }),
+  },
   PullDiff: {
     screen: PullDiffScreen,
     navigationOptions: ({ navigation }) => ({

src/auth/screens/events.screen.js

@@ -287,7 +287,10 @@ class Events extends Component {
         );
       case 'PushEvent':
         return (
-          <Text style={styles.linkDescription}>
+          <Text
+            style={styles.linkDescription}
+            onPress={() => this.navigateToCommitList(userEvent)}
+          >
             {userEvent.payload.ref.replace('refs/heads/', '')}
           </Text>
         );
@@ -464,6 +467,20 @@ class Events extends Component {
     });
   };
 
+  navigateToCommitList = userEvent => {
+    if (userEvent.payload.commits > 1) {
+      this.props.navigation.navigate('CommitList', {
+        commits: userEvent.payload.commits,
+        title: translate('repository.commitList.title', this.props.language),
+      });
+    } else {
+      this.props.navigation.navigate('Commit', {
+        commit: userEvent.payload.commits[0],
+        title: userEvent.payload.commits[0].sha.substring(0, 7),
+      });
+    }
+  };
+
   navigateToIssue = userEvent => {
     this.props.navigation.navigate('Issue', {
       issue:

src/components/commit-list-item.component.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, TouchableHighlight, View } from 'react-native';
+import { ListItem } from 'react-native-elements';
+import { colors, fonts } from 'config';
+
+type Props = {
+  commit: Object,
+  navigation: Object,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingRight: 10,
+    paddingVertical: 5,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.greyLight,
+  },
+  listItemContainer: {
+    flex: 1,
+    borderBottomWidth: 0,
+  },
+  title: {
+    color: colors.primaryDark,
+    ...fonts.fontPrimary,
+  },
+});
+
+export const CommitListItem = ({ commit, navigation }: Props) =>
+  <TouchableHighlight
+    onPress={() =>
+      navigation.navigate('Commit', {
+        commit,
+      })}
+    underlayColor={colors.greyLight}
+  >
+    <View style={styles.container}>
+      <ListItem
+        containerStyle={styles.listItemContainer}
+        title={commit.commit.message.split('\n')[0]}
+        titleNumberOfLines={1}
+        subtitle={
+          `${commit.sha.substring(0, 7)} - ${commit.commit.author.name}` || ''
+        }
+        leftIcon={{
+          name: 'git-commit',
+          size: 36,
+          color: colors.grey,
+          type: 'octicon',
+        }}
+        hideChevron
+        titleStyle={styles.title}
+      />
+    </View>
+  </TouchableHighlight>;

src/components/index.js

@@ -3,6 +3,7 @@ export * from './loading-indicators';
 export * from './code-line.component';
 export * from './comment-input.component';
 export * from './comment-list-item.component';
+export * from './commit-list-item.component';
 export * from './diff-blocks.component';
 export * from './entity-info.component';
 export * from './issue-description.component';

src/components/issue-description.component.js

@@ -1,5 +1,11 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import {
+  Text,
+  StyleSheet,
+  View,
+  ActivityIndicator,
+  TouchableHighlight,
+} from 'react-native';
 import { ListItem, Button } from 'react-native-elements';
 import Parse from 'parse-diff';
 import moment from 'moment/min/moment-with-locales.min';
@@ -35,9 +41,10 @@ const styles = StyleSheet.create({
   },
   diffBlocksContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
+    alignItems: 'stretch',
+    justifyContent: 'space-between',
     paddingRight: 10,
+    paddingLeft: 10,
     paddingBottom: 10,
   },
   badge: {
@@ -67,15 +74,33 @@ export class IssueDescription extends Component {
   props: {
     issue: Object,
     diff: string,
+    commits: Array,
     isMerged: boolean,
     isPendingDiff: boolean,
+    isPendingCommit: boolean,
     isPendingCheckMerge: boolean,
     onRepositoryPress: Function,
     userHasPushPermission: boolean,
     language: string,
     navigation: Object,
   };
 
+  navigateToCommitList = () => {
+    const { commits } = this.props;
+
+    if (commits.length > 1) {
+      this.props.navigation.navigate('CommitList', {
+        title: translate('repository.commitList.title', this.props.language),
+        commits,
+      });
+    } else {
+      this.props.navigation.navigate('Commit', {
+        commit: commits[0],
+        title: commits[0].sha.substring(0, 7),
+      });
+    }
+  };
+
   renderLabelButtons = labels => {
     return labels
       .slice(0, 3)
@@ -86,8 +111,10 @@ export class IssueDescription extends Component {
     const {
       diff,
       issue,
+      commits,
       isMerged,
       isPendingDiff,
+      isPendingCommit,
       isPendingCheckMerge,
       onRepositoryPress,
       userHasPushPermission,
@@ -149,9 +176,20 @@ export class IssueDescription extends Component {
 
         {issue.pull_request &&
           <View style={styles.diffBlocksContainer}>
+            {isPendingCommit &&
+              <ActivityIndicator animating={isPendingCommit} size="small" />}
+
             {isPendingDiff &&
               <ActivityIndicator animating={isPendingDiff} size="small" />}
 
+            {!isPendingCommit &&
+              <TouchableHighlight
+                onPress={() => this.navigateToCommitList()}
+                underlayColor={colors.greyLight}
+              >
+                <Text>{`${commits.length} commits`}</Text>
+              </TouchableHighlight>}
+
             {!isPendingDiff &&
               (lineAdditions !== 0 || lineDeletions !== 0) &&
               <DiffBlocks

src/issue/issue.action.js

@@ -1,5 +1,6 @@
 import {
   fetchDiff,
+  fetchUrl,
   fetchMergeStatus,
   fetchCommentHTML,
   fetchPostIssueComment,
@@ -14,6 +15,7 @@ import {
   EDIT_ISSUE,
   CHANGE_LOCK_STATUS,
   GET_ISSUE_DIFF,
+  GET_ISSUE_COMMITS,
   GET_ISSUE_MERGE_STATUS,
   MERGE_PULL_REQUEST,
   GET_ISSUE_FROM_URL,
@@ -95,6 +97,28 @@ export const getIssueComments = issueCommentsURL => {
   };
 };
 
+export const getCommits = url => {
+  return (dispatch, getState) => {
+    const accessToken = getState().auth.accessToken;
+
+    dispatch({ type: GET_ISSUE_COMMITS.PENDING });
+
+    fetchUrl(url, accessToken)
+      .then(data => {
+        dispatch({
+          type: GET_ISSUE_COMMITS.SUCCESS,
+          payload: data,
+        });
+      })
+      .catch(error => {
+        dispatch({
+          type: GET_ISSUE_COMMITS.ERROR,
+          payload: error,
+        });
+      });
+  };
+};
+
 export const postIssueComment = (body, owner, repoName, issueNum) => {
   return (dispatch, getState) => {
     const accessToken = getState().auth.accessToken;

src/issue/issue.reducer.js

@@ -4,6 +4,7 @@ import {
   EDIT_ISSUE,
   CHANGE_LOCK_STATUS,
   GET_ISSUE_DIFF,
+  GET_ISSUE_COMMITS,
   GET_ISSUE_MERGE_STATUS,
   MERGE_PULL_REQUEST,
   GET_ISSUE_FROM_URL,
@@ -14,12 +15,14 @@ const initialState = {
   issue: {},
   comments: [],
   diff: '',
+  commits: [],
   isMerged: false,
   isPendingComments: false,
   isPostingComment: false,
   isEditingIssue: false,
   isChangingLockStatus: false,
   isPendingDiff: false,
+  isPendingCommits: false,
   isPendingCheckMerge: false,
   isPendingMerging: false,
   isPendingIssue: false,
@@ -116,6 +119,24 @@ export const issueReducer = (state = initialState, action = {}) => {
         error: action.payload,
         isPendingDiff: false,
       };
+    case GET_ISSUE_COMMITS.PENDING:
+      return {
+        ...state,
+        commits: [],
+        isPendingCommits: true,
+      };
+    case GET_ISSUE_COMMITS.SUCCESS:
+      return {
+        ...state,
+        commits: action.payload,
+        isPendingCommits: false,
+      };
+    case GET_ISSUE_COMMITS.ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        isPendingCommits: false,
+      };
     case GET_ISSUE_MERGE_STATUS.PENDING:
       return {
         ...state,

src/issue/issue.type.js

@@ -5,6 +5,7 @@ export const POST_ISSUE_COMMENT = createActionSet('POST_ISSUE_COMMENT');
 export const EDIT_ISSUE = createActionSet('EDIT_ISSUE');
 export const CHANGE_LOCK_STATUS = createActionSet('CHANGE_LOCK_STATUS');
 export const GET_ISSUE_DIFF = createActionSet('GET_ISSUE_DIFF');
+export const GET_ISSUE_COMMITS = createActionSet('GET_ISSUE_COMMITS');
 export const GET_ISSUE_MERGE_STATUS = createActionSet('GET_ISSUE_MERGE_STATUS');
 export const MERGE_PULL_REQUEST = createActionSet('MERGE_PULL_REQUEST');
 export const GET_ISSUE_FROM_URL = createActionSet('GET_ISSUE_FROM_URL');