feat(commit): show commits in repository screen

Author: Antoine38660

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

@@ -18,10 +18,6 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: colors.greyLight,
   },
-  closedIssue: {
-    backgroundColor: colors.greyVeryLight,
-    opacity: 0.6,
-  },
   listItemContainer: {
     flex: 1,
     borderBottomWidth: 0,
@@ -30,10 +26,6 @@ const styles = StyleSheet.create({
     color: colors.primaryDark,
     ...fonts.fontPrimary,
   },
-  badge: {
-    alignItems: 'flex-end',
-    justifyContent: 'center',
-  },
 });
 
 export const CommitListItem = ({ commit, navigation }: Props) =>
@@ -47,9 +39,11 @@ export const CommitListItem = ({ commit, navigation }: Props) =>
     <View style={styles.container}>
       <ListItem
         containerStyle={styles.listItemContainer}
-        title={commit.message}
+        title={commit.commit.message.split('\n')[0]}
         titleNumberOfLines={1}
-        subtitle={commit.sha.substring(0, 7) + ' - ' + commit.author.name || ''} // eslint-disable-line prefer-template
+        subtitle={
+          `${commit.sha.substring(0, 7)} - ${commit.commit.author.name}` || ''
+        }
         leftIcon={{
           name: 'git-commit',
           size: 36,

src/locale/languages/en.js

@@ -174,6 +174,7 @@ export const en = {
       noContributorsMessage: 'No contributors found',
       sourceTitle: 'SOURCE',
       readMe: 'README',
+      viewCommit: 'View Commits',
       viewSource: 'View Code',
       issuesTitle: 'ISSUES',
       noIssuesMessage: 'No issues',

src/repository/repository.action.js

@@ -17,6 +17,7 @@ import {
   GET_REPOSITORY_CONTENTS,
   GET_REPOSITORY_FILE,
   GET_REPOSITORY_ISSUES,
+  GET_REPOSITORY_COMMITS,
   GET_REPO_STARRED_STATUS,
   GET_COMMIT,
   GET_COMMIT_DIFF,
@@ -142,6 +143,28 @@ export const getIssues = url => {
   };
 };
 
+export const getCommits = url => {
+  return (dispatch, getState) => {
+    const accessToken = getState().auth.accessToken;
+
+    dispatch({ type: GET_REPOSITORY_COMMITS.PENDING });
+
+    fetchUrl(url, accessToken)
+      .then(data => {
+        dispatch({
+          type: GET_REPOSITORY_COMMITS.SUCCESS,
+          payload: data,
+        });
+      })
+      .catch(error => {
+        dispatch({
+          type: GET_REPOSITORY_COMMITS.ERROR,
+          payload: error,
+        });
+      });
+  };
+};
+
 const getCommitFromUrl = url => {
   return (dispatch, getState) => {
     const accessToken = getState().auth.accessToken;
@@ -276,9 +299,14 @@ export const getRepositoryInfo = url => {
         '{/number}',
         '?state=all&per_page=100'
       );
+      const commitsUrl = getState().repository.repository.commits_url.replace(
+        '{/sha}',
+        '?state=all&per_page=100'
+      );
 
       dispatch(getContributors(contributorsUrl));
       dispatch(getIssues(issuesUrl));
+      dispatch(getCommits(commitsUrl));
       dispatch(
         checkRepoStarred(
           `https://api.github.com/user/starred/${repo.owner.login}/${repo.name}`

src/repository/repository.reducer.js

@@ -4,6 +4,7 @@ import {
   GET_REPOSITORY_CONTENTS,
   GET_REPOSITORY_FILE,
   GET_REPOSITORY_ISSUES,
+  GET_REPOSITORY_COMMITS,
   GET_REPO_STARRED_STATUS,
   FORK_REPO_STATUS,
   CHANGE_STAR_STATUS,
@@ -25,6 +26,7 @@ const initialState = {
   contents: {},
   fileContent: '',
   issues: [],
+  commits: [],
   commit: {},
   diff: {},
   readMe: '',
@@ -38,6 +40,7 @@ const initialState = {
   isPendingRepository: false,
   isPendingContributors: false,
   isPendingContents: false,
+  isPendingCommits: false,
   isPendingCommit: false,
   isPendingCommitDiff: false,
   isPendingFile: false,
@@ -148,6 +151,23 @@ export const repositoryReducer = (state = initialState, action = {}) => {
         error: action.payload,
         isPendingIssues: false,
       };
+    case GET_REPOSITORY_COMMITS.PENDING:
+      return {
+        ...state,
+        isPendingCommits: true,
+      };
+    case GET_REPOSITORY_COMMITS.SUCCESS:
+      return {
+        ...state,
+        commits: action.payload,
+        isPendingCommits: false,
+      };
+    case GET_REPOSITORY_COMMITS.ERROR:
+      return {
+        ...state,
+        error: action.payload,
+        isPendingCommits: false,
+      };
     case GET_REPO_STARRED_STATUS.PENDING:
       return {
         ...state,

src/repository/repository.type.js

@@ -11,6 +11,7 @@ export const GET_COMMIT = createActionSet('GET_COMMIT');
 export const GET_COMMIT_DIFF = createActionSet('GET_COMMIT_DIFF');
 export const GET_REPOSITORY_FILE = createActionSet('GET_REPOSITORY_FILE');
 export const GET_REPOSITORY_ISSUES = createActionSet('GET_REPOSITORY_ISSUES');
+export const GET_REPOSITORY_COMMITS = createActionSet('GET_REPOSITORY_COMMITS');
 export const GET_REPO_STARRED_STATUS = createActionSet(
   'GET_REPO_STARRED_STATUS'
 );

src/repository/screens/repository.screen.js

@@ -23,6 +23,7 @@ import {
   getRepositoryInfo,
   getContributors,
   getIssues,
+  getCommits,
   changeStarStatusRepo,
   forkRepo,
   subscribeToRepo,
@@ -35,6 +36,7 @@ const mapStateToProps = state => ({
   repository: state.repository.repository,
   contributors: state.repository.contributors,
   issues: state.repository.issues,
+  commits: state.repository.commits,
   starred: state.repository.starred,
   forked: state.repository.forked,
   subscribed: state.repository.subscribed,
@@ -50,6 +52,7 @@ const mapDispatchToProps = dispatch => ({
   getRepositoryInfoByDispatch: url => dispatch(getRepositoryInfo(url)),
   getContributorsByDispatch: url => dispatch(getContributors(url)),
   getIssuesByDispatch: url => dispatch(getIssues(url)),
+  getCommitsByDispatch: url => dispatch(getCommits(url)),
   changeStarStatusRepoByDispatch: (owner, repo, starred) =>
     dispatch(changeStarStatusRepo(owner, repo, starred)),
   forkRepoByDispatch: (owner, repo) => dispatch(forkRepo(owner, repo)),
@@ -69,12 +72,14 @@ class Repository extends Component {
     // selectRepositoryByDispatch: Function,
     getRepositoryInfoByDispatch: Function,
     // getIssuesByDispatch: Function,
+    // getCommitsByDispatch: Function,
     changeStarStatusRepoByDispatch: Function,
     forkRepoByDispatch: Function,
     // repositoryName: string,
     repository: Object,
     contributors: Array,
     issues: Array,
+    commits: Array,
     starred: boolean,
     // forked: boolean,
     isPendingRepository: boolean,
@@ -191,6 +196,7 @@ class Repository extends Component {
       repository,
       contributors,
       issues,
+      commits,
       starred,
       language,
       isPendingRepository,
@@ -335,6 +341,25 @@ class Repository extends Component {
                 })}
               underlayColor={colors.greyLight}
             />
+            {commits.length > 0 &&
+              <ListItem
+                title={translate('repository.main.viewCommit', language)}
+                titleStyle={styles.listTitle}
+                leftIcon={{
+                  name: 'git-commit',
+                  color: colors.grey,
+                  type: 'octicon',
+                }}
+                onPress={() =>
+                  this.props.navigation.navigate('CommitList', {
+                    commits,
+                    title: translate(
+                      'repository.commitList.title',
+                      this.props.language
+                    ),
+                  })}
+                underlayColor={colors.greyLight}
+              />}
             <ListItem
               title={translate('repository.main.viewSource', language)}
               titleStyle={styles.listTitle}