feat(issue): paginate issue comments and events (#848)

chinesedfan · web-flow · commit 54b5ff37cfe4 · 2018-11-18T12:12:18.000+08:00
* refactor(issue): fetch issue and its repository by new api

* fix(issue): render issue correctly

* chore(issue): filter events that have no id

* fix: no assigner in timeline’s self-assign event

* fix: remove anchor of issueURL and fix crash caused by repository

* fix: fix permissions is not defined

* chore: give up union entity

* chore: better loading

* refactor(new-issue): read repository from navigation.state.params

* refactor: edit-issue-comment doesn’t depend on old store any more

* refactor: issue-settings doesn’t depend on old store any more

* refactor: pull-merge doesn’t depend on old store any more
diff --git a/src/api/actions/index.js b/src/api/actions/index.js
@@ -21,3 +21,7 @@ export const REPOS_GET_CONTRIBUTORS = createPaginationActionSet(
   'REPOS_GET_CONTRIBUTORS'
 );
 export const REPOS_FORK = createActionSet('REPOS_FORK');
+export const REPOS_GET_ISSUE = createActionSet('REPOS_GET_ISSUE');
+export const REPOS_GET_ISSUE_TIMELINE = createPaginationActionSet(
+  'REPOS_GET_ISSUE_TIMELINE'
+);
diff --git a/src/api/client.js b/src/api/client.js
@@ -73,6 +73,7 @@ export class Client {
     HTML: 'application/vnd.github.v3.html+json',
     JSON: 'application/vnd.github.v3+json',
     MERCY_PREVIEW: 'application/vnd.github.mercy-preview+json',
+    MOCKINGBIRD_PREVIEW: 'application/vnd.github.mockingbird-preview+json',
     RAW: 'application/vnd.github.v3.raw+json',
   };
 
@@ -394,6 +395,29 @@ export class Client {
         params,
         schema: Schemas.REPO,
       }),
+    getIssue: (repoId: string, issueId: number, params: SpecialParameters = {}) =>
+      this.get({
+        endpoint: `repos/${repoId}/issues/${issueId}`,
+        params,
+        fetchParameters: {
+          headers: {
+            Accept: this.Accept.FULL,
+          },
+        },
+        schema: Schemas.ISSUE,
+      }),
+    getIssueTimeline: (repoId: string, issueId: number, params: SpecialParameters = {}) =>
+      this.list({
+        endpoint: `repos/${repoId}/issues/${issueId}/timeline`,
+        params,
+        fetchParameters: {
+          headers: {
+            Accept: [this.Accept.MOCKINGBIRD_PREVIEW, this.Accept.FULL].join(','),
+          },
+        },
+        schema: [Schemas.ISSUE_TIMELINE_ITEM],
+        paginationArgs: [`${repoId}/${issueId}`],
+      }),
   };
   orgs = {
     /**
diff --git a/src/api/queries/repo.query.js b/src/api/queries/repo.query.js
@@ -109,6 +109,7 @@ query ($owner: String!, $name: String!) {
         ...PullRequestsList
       }
     }
+    viewerPermission
   }
 }
 
diff --git a/src/api/reducers/entities.js b/src/api/reducers/entities.js
@@ -6,6 +6,8 @@ export const entities = (
     events: {},
     orgs: {},
     repos: {},
+    issues: {},
+    issueTimelineItems: {},
     users: {},
     gqlRepos: {},
   },
diff --git a/src/api/reducers/pagination.js b/src/api/reducers/pagination.js
@@ -85,4 +85,5 @@ export const pagination = combineReducers({
   SEARCH_USERS: paginate(Actions.SEARCH_USERS),
   ORGS_GET_MEMBERS: paginate(Actions.ORGS_GET_MEMBERS),
   REPOS_GET_CONTRIBUTORS: paginate(Actions.REPOS_GET_CONTRIBUTORS),
+  REPOS_GET_ISSUE_TIMELINE: paginate(Actions.REPOS_GET_ISSUE_TIMELINE),
 });
diff --git a/src/api/schemas/gql-repos.js b/src/api/schemas/gql-repos.js
@@ -9,6 +9,11 @@ export const gqlRepoSchema = new schema.Entity(
     },
     processStrategy: ({ repository }) => ({
       ...repository,
+      permissions: {
+        admin: repository.viewerPermission === 'ADMIN',
+        push: repository.viewerPermission === 'ADMIN' || repository.viewerPermission === 'WRITE',
+      },
+      full_name: repository.nameWithOwner,
       webUrl: `https://github.com/${repository.nameWithOwner}`,
     }),
   }
diff --git a/src/api/schemas/index.js b/src/api/schemas/index.js
@@ -1,5 +1,6 @@
 import { eventSchema } from './events';
 import { repoSchema } from './repos';
+import { issueSchema, issueTimelineItemSchema } from './issues';
 import { orgSchema } from './orgs';
 import { userSchema } from './users';
 import { gqlRepoSchema } from './gql-repos';
@@ -9,6 +10,8 @@ export default {
   EVENT_ARRAY: [eventSchema],
   REPO: repoSchema,
   REPO_ARRAY: [repoSchema],
+  ISSUE: issueSchema,
+  ISSUE_TIMELINE_ITEM: issueTimelineItemSchema,
   USER: userSchema,
   USER_ARRAY: [userSchema],
   ORG: orgSchema,
diff --git a/src/api/schemas/issues.js b/src/api/schemas/issues.js
@@ -0,0 +1,12 @@
+import { schema } from 'normalizr';
+
+export const issueSchema = new schema.Entity(
+  'issues',
+  {},
+  {
+    idAttribute: issue => issue.url,
+  }
+);
+
+// TODO: some events have no id field, i.e. cross-referenced
+export const issueTimelineItemSchema = new schema.Entity('issueTimelineItems');
diff --git a/src/components/issue-description.component.js b/src/components/issue-description.component.js
@@ -83,6 +83,7 @@ const MergeButtonContainer = styled.View`
 export class IssueDescription extends Component {
   props: {
     issue: Object,
+    repository: Object,
     diff: string,
     isMergeable: boolean,
     isMerged: boolean,
@@ -104,6 +105,7 @@ export class IssueDescription extends Component {
     const {
       diff,
       issue,
+      repository,
       isMergeable,
       isMerged,
       isPendingDiff,
@@ -219,6 +221,8 @@ export class IssueDescription extends Component {
                 onPress={() =>
                   navigation.navigate('PullMerge', {
                     title: t('Merge Pull Request', locale),
+                    issue,
+                    repository,
                   })
                 }
                 title={t('Merge Pull Request', locale)}
diff --git a/src/components/issue-event-list-item.component.js b/src/components/issue-event-list-item.component.js
@@ -212,7 +212,7 @@ export class IssueEventListItem extends Component {
             iconName="person"
             text={
               <Text>
-                <ActorLink actor={event.assigner} onPress={this.onPressUser} />{' '}
+                <ActorLink actor={event.assigner || event.actor} onPress={this.onPressUser} />{' '}
                 {event.event}{' '}
                 <ActorLink actor={event.assignee} onPress={this.onPressUser} />
               </Text>
diff --git a/src/components/loading-indicators/index.js b/src/components/loading-indicators/index.js
@@ -1,3 +1,4 @@
+export * from './loading-common-item.component';
 export * from './loading-container.component';
 export * from './loading-event-list-item.component';
 export * from './loading-members-list.component';
diff --git a/src/components/loading-indicators/loading-common-item.component.js b/src/components/loading-indicators/loading-common-item.component.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+import styled from 'styled-components';
+
+import { colors } from 'config';
+
+const Container = styled.View`
+  height: 44;
+  background-color: ${colors.white};
+  align-items: center;
+  justify-content: center;
+`;
+
+export const LoadingCommonItem = () => (
+  <Container>
+    <ActivityIndicator animating size="small" />
+  </Container>
+);
diff --git a/src/issue/issue.action.js b/src/issue/issue.action.js
@@ -95,7 +95,7 @@ const getPullRequest = url => {
   };
 };
 
-const getPullRequestDetails = issue => {
+export const getPullRequestDetails = issue => {
   return (dispatch, getState) => {
     const repoFullName = getState().repository.repository.full_name;
 
diff --git a/src/issue/screens/edit-issue-comment.screen.js b/src/issue/screens/edit-issue-comment.screen.js
@@ -41,8 +41,6 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = state => ({
   locale: state.auth.locale,
-  issue: state.issue.issue,
-  repository: state.repository.repository,
   isEditingComment: state.issue.isEditingComment,
 });
 
@@ -60,9 +58,7 @@ class EditIssueComment extends Component {
     editIssueBody: Function,
     editIssueComment: Function,
     locale: string,
-    repository: Object,
     navigation: Object,
-    issue: Object,
     isEditingComment: boolean,
   };
 
@@ -81,8 +77,8 @@ class EditIssueComment extends Component {
   }
 
   editComment = () => {
-    const { issue, navigation } = this.props;
-    const { repository, comment } = this.props.navigation.state.params;
+    const { navigation } = this.props;
+    const { issue, repository, comment } = this.props.navigation.state.params;
 
     const repoName = repository.name;
     const owner = repository.owner.login;
diff --git a/src/issue/screens/issue-settings.screen.js b/src/issue/screens/issue-settings.screen.js
@@ -13,15 +13,14 @@ import {
 } from 'components';
 import { emojifyText, t, openURLInView } from 'utils';
 import { colors, fonts } from 'config';
+import { v3 } from 'api';
 import { getLabels } from 'repository';
 import { editIssue, changeIssueLockStatus } from '../issue.action';
 
 const mapStateToProps = state => ({
   locale: state.auth.locale,
   authUser: state.auth.user,
-  repository: state.repository.repository,
   labels: state.repository.labels,
-  issue: state.issue.issue,
   isMerged: state.issue.isMerged,
   isEditingIssue: state.issue.isEditingIssue,
   isPendingLabels: state.repository.isPendingLabels,
@@ -59,9 +58,7 @@ class IssueSettings extends Component {
     getLabels: Function,
     locale: string,
     authUser: Object,
-    repository: Object,
     labels: Array,
-    issue: Object,
     isMerged: boolean,
     // isEditingIssue: boolean,
     isPendingLabels: boolean,
@@ -70,7 +67,9 @@ class IssueSettings extends Component {
 
   componentDidMount() {
     this.props.getLabels(
-      this.props.repository.labels_url.replace('{/name}', '')
+      `${v3.root}/repos/${
+        this.props.navigation.state.params.repository.full_name
+      }/labels`
     );
   }
 
@@ -89,7 +88,8 @@ class IssueSettings extends Component {
   };
 
   handleIssueActionPress = index => {
-    const { issue, navigation } = this.props;
+    const { navigation } = this.props;
+    const { issue } = navigation.state.params;
     const newState = issue.state === 'open' ? 'close' : 'open';
 
     if (index === 0) {
@@ -100,7 +100,7 @@ class IssueSettings extends Component {
   };
 
   handleLockIssueActionPress = index => {
-    const { issue, repository } = this.props;
+    const { issue, repository } = this.props.navigation.state.params;
     const repoName = repository.name;
     const owner = repository.owner.login;
 
@@ -115,7 +115,8 @@ class IssueSettings extends Component {
   };
 
   handleAddLabelActionPress = index => {
-    const { issue, labels } = this.props;
+    const { navigation, labels } = this.props;
+    const { issue } = navigation.state.params;
     const labelChoices = [...labels.map(label => label.name)];
 
     if (
@@ -135,7 +136,7 @@ class IssueSettings extends Component {
   };
 
   editIssue = (editParams, stateChangeParams) => {
-    const { issue, repository } = this.props;
+    const { issue, repository } = this.props.navigation.state.params;
     const repoName = repository.name;
     const owner = repository.owner.login;
     const updateStateParams = stateChangeParams || editParams;
@@ -149,10 +150,12 @@ class IssueSettings extends Component {
     );
   };
 
-  openURLInBrowser = () => openURLInView(this.props.issue.html_url);
+  openURLInBrowser = () =>
+    openURLInView(this.props.navigation.state.params.issue.html_url);
 
   render() {
-    const { issue, isMerged, locale, authUser, navigation } = this.props;
+    const { isMerged, locale, authUser, navigation } = this.props;
+    const { issue } = navigation.state.params;
     const issueType = issue.pull_request
       ? t('Pull Request', locale)
       : t('Issue', locale);
diff --git a/src/issue/screens/issue.screen.js b/src/issue/screens/issue.screen.js
diff --git a/src/issue/screens/new-issue.screen.js b/src/issue/screens/new-issue.screen.js
diff --git a/src/issue/screens/pull-merge.screen.js b/src/issue/screens/pull-merge.screen.js
diff --git a/src/repository/screens/issue-list.screen.js b/src/repository/screens/issue-list.screen.js
diff --git a/src/repository/screens/repository.screen.js b/src/repository/screens/repository.screen.js

Original file line number	Diff line number	Diff line change
`@@ -109,6 +109,7 @@ query ($owner: String!, $name: String!) {`
`109`	`109`	`...PullRequestsList`
`110`	`110`	`}`
`111`	`111`	`}`
	`112`	`+ viewerPermission`
`112`	`113`	`}`
`113`	`114`	`}`
`114`	`115`