feat(commit): view commits (#851)

* feat(commits): migrate #258 changes

* feat(commits): fix i18n

* fix(issue): fix issue description styles

* feat(commit): Show author and committer, both clickable

* chore(i18n): update translation files

Author: chinesedfan

routes.js

@@ -50,6 +50,8 @@ import {
   IssueListScreen,
   PullListScreen,
   PullDiffScreen,
+  CommitScreen,
+  CommitListScreen,
   ReadMeScreen,
 } from 'repository';
 
@@ -164,6 +166,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,
+    }),
+  },
   EditIssueComment: {
     screen: EditIssueCommentScreen,
     navigationOptions: ({ navigation }) => ({

src/auth/screens/events.screen.js

@@ -488,7 +488,7 @@ class Events extends Component {
     const actor = this.getActorLink(userEvent);
     const repo = this.getRepoLink(userEvent);
     const ref = (
-      <LinkBranchDescription>
+      <LinkBranchDescription onPress={() => this.navigateToCommitList(userEvent)}>
         {userEvent.payload.ref.replace('refs/heads/', '')}
       </LinkBranchDescription>
     );
@@ -543,6 +543,21 @@ class Events extends Component {
     });
   };
 
+  navigateToCommitList = userEvent => {
+    if (userEvent.payload.commits > 1) {
+      this.props.navigation.navigate('CommitList', {
+        commits: userEvent.payload.commits,
+        title: t('Commits', this.props.locale),
+        locale: this.props.locale,
+      });
+    } 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

@@ -4,6 +4,7 @@ export * from './code-line.component';
 export * from './error-screen';
 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,6 +1,11 @@
 import React, { Component } from 'react';
-import { ActivityIndicator } from 'react-native';
+import {
+  Text,
+  ActivityIndicator,
+  TouchableHighlight,
+} from 'react-native';
 import { ListItem } from 'react-native-elements';
+
 import Parse from 'parse-diff';
 import styled from 'styled-components';
 
@@ -56,8 +61,9 @@ const IssueTitle = styled(ListItem).attrs({
 
 const DiffBlocksContainer = styled.View`
   flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
+  align-items: stretch;
+  justify-content: space-between;
+  padding-left: 10;
   padding-right: 10;
   padding-bottom: 10;
 `;
@@ -85,16 +91,35 @@ export class IssueDescription extends Component {
     issue: Object,
     repository: Object,
     diff: string,
+    commits: Array,
     isMergeable: boolean,
     isMerged: boolean,
     isPendingDiff: boolean,
+    isPendingCommit: boolean,
     isPendingCheckMerge: boolean,
     onRepositoryPress: Function,
     userHasPushPermission: boolean,
     locale: string,
     navigation: Object,
   };
 
+  navigateToCommitList = () => {
+    const { commits, locale } = this.props;
+
+    if (commits.length > 1) {
+      this.props.navigation.navigate('CommitList', {
+        title: t('Commits', locale),
+        commits,
+        locale,
+      });
+    } else {
+      this.props.navigation.navigate('Commit', {
+        commit: commits[0],
+        title: commits[0].sha.substring(0, 7),
+      });
+    }
+  };
+
   renderLabelButtons = labels => {
     return labels
       .slice(0, 3)
@@ -105,10 +130,12 @@ export class IssueDescription extends Component {
     const {
       diff,
       issue,
+      commits,
       repository,
       isMergeable,
       isMerged,
       isPendingDiff,
+      isPendingCommit,
       isPendingCheckMerge,
       onRepositoryPress,
       userHasPushPermission,
@@ -168,10 +195,23 @@ export class IssueDescription extends Component {
 
         {issue.pull_request && (
           <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

@@ -17,6 +17,7 @@ import {
   EDIT_ISSUE_BODY,
   CHANGE_LOCK_STATUS,
   GET_ISSUE_DIFF,
+  GET_ISSUE_COMMITS,
   GET_ISSUE_MERGE_STATUS,
   GET_PULL_REQUEST_FROM_URL,
   MERGE_PULL_REQUEST,
@@ -128,6 +129,29 @@ export const getIssueComments = issueCommentsURL => {
   };
 };
 
+export const getCommits = url => {
+  return (dispatch, getState) => {
+    const accessToken = getState().auth.accessToken;
+
+    dispatch({ type: GET_ISSUE_COMMITS.PENDING });
+
+    return v3
+      .getJson(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

@@ -7,6 +7,7 @@ import {
   EDIT_ISSUE_BODY,
   CHANGE_LOCK_STATUS,
   GET_ISSUE_DIFF,
+  GET_ISSUE_COMMITS,
   GET_ISSUE_MERGE_STATUS,
   GET_PULL_REQUEST_FROM_URL,
   MERGE_PULL_REQUEST,
@@ -21,6 +22,7 @@ export const initialState = {
   events: [],
   pr: {},
   diff: '',
+  commits: [],
   isMerged: false,
   isPendingComments: false,
   isPendingEvents: false,
@@ -30,6 +32,7 @@ export const initialState = {
   isEditingIssue: false,
   isChangingLockStatus: false,
   isPendingDiff: false,
+  isPendingCommits: false,
   isPendingCheckMerge: false,
   isPendingMerging: false,
   isPendingIssue: false,
@@ -210,6 +213,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

@@ -8,6 +8,7 @@ export const EDIT_ISSUE = createActionSet('EDIT_ISSUE');
 export const EDIT_ISSUE_BODY = createActionSet('EDIT_ISSUE_BODY');
 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 GET_PULL_REQUEST_FROM_URL = createActionSet(
   'GET_PULL_REQUEST_FROM_URL'