wip: PRs

Author: Jan Kaiser

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts

@@ -1,12 +1,8 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
-import {
-  fetchRepository,
-  RepoContents,
-  selectedRepository,
-} from '../../state/repository';
-import { map, takeWhile, tap } from 'rxjs';
+import { RepoContents, selectedRepository } from '../../state/repository';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-file-explorer',

angular-ngrx-scss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.html

@@ -34,22 +34,23 @@
   <div class="comments">
     <span class="icon green" appOcticon="comment" size="16"></span>
     <div class="comment-count">
-      {{ pullRequest.commentCount }}
+      {{ pullRequest.comments }}
     </div>
   </div>
 </div>
 
 <ng-template #openPRMeta let-pullRequest="pullRequest">
   <span class="meta">
     #{{ pullRequest.number }} opened
-    {{ pullRequest.createdAt | relativeTime }} by
-    <a href="#">{{ pullRequest.login }}</a>
+    {{ pullRequest.created_at | relativeTime }} by
+    <a href="#">{{ pullRequest.user.login }}</a>
   </span>
 </ng-template>
 
 <ng-template #closedPRMeta let-pullRequest="pullRequest">
   <span class="meta">
-    #{{ pullRequest.number }} by <a href="#">{{ pullRequest.login }}</a> was
-    closed {{ pullRequest.createdAt | relativeTime }}
+    #{{ pullRequest.number }} by
+    <a href="#">{{ pullRequest.user.login }}</a> was closed
+    {{ pullRequest.created_at | relativeTime }}
   </span>
 </ng-template>

angular-ngrx-scss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { RepoPullRequest } from '../../../state/repository';
+import { PullRequest } from 'src/app/repository/services/repository.interfaces';
 
 @Component({
   selector: 'app-pull-request-card',
@@ -8,7 +8,7 @@ import { RepoPullRequest } from '../../../state/repository';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PullRequestCardComponent {
-  @Input() pullRequest!: RepoPullRequest;
+  @Input() pullRequest!: PullRequest;
 
   colorMap(color: string): string {
     switch (color) {

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.html

@@ -6,15 +6,15 @@
       (click)="changeViewState('open')"
     >
       <span class="icon" appOcticon="no-entry" size="16"></span>
-      <span>{{ openPullRequests?.totalCount ?? 0 }} Open</span>
+      <span>{{ openPullRequests?.total ?? 0 }} Open</span>
     </button>
     <button
       class="tab-button"
       [ngClass]="{ active: viewState === 'closed' }"
       (click)="changeViewState('closed')"
     >
       <span class="icon" appOcticon="check" size="16"></span
-      ><span>{{ closedPullRequests?.totalCount ?? 0 }} closed</span>
+      ><span>{{ closedPullRequests?.total ?? 0 }} closed</span>
     </button>
   </div>
   <div class="pull-requests-filters">

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.ts

@@ -5,7 +5,13 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import { ISSUE_STATE, RepoPullRequests } from '../../../state/repository';
+import {
+  ISSUE_STATE,
+  RepoPullRequests,
+  selectLabels,
+} from '../../../state/repository';
+import { Store } from '@ngrx/store';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-pull-requests-header',
@@ -19,6 +25,16 @@ export class PullRequestsHeaderComponent {
   @Input() viewState: ISSUE_STATE = 'open';
   @Output() viewStateChange = new EventEmitter<ISSUE_STATE>();
 
+  labels$ = this.store
+    .select(selectLabels)
+    .pipe(
+      map((labels) =>
+        labels.map((label) => ({ label: label.name, value: label.name })),
+      ),
+    );
+
+  constructor(private store: Store) {}
+
   changeViewState(state: ISSUE_STATE) {
     this.viewState = state;
     this.viewStateChange.emit(this.viewState);

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.html

@@ -2,7 +2,8 @@
   <app-pull-requests-header
     [openPullRequests]="openPullRequests$ | async"
     [closedPullRequests]="closedPullRequests$ | async"
-    [(viewState)]="viewState"
+    [viewState]="viewState"
+    (viewStateChange)="viewStateChange($event)"
   ></app-pull-requests-header>
   <app-pull-requests-list
     [pullRequests]="
@@ -12,4 +13,11 @@
     "
   ></app-pull-requests-list>
 </div>
-<app-pagination></app-pagination>
+<app-pagination
+  [params]="
+    viewState === 'open'
+      ? (openPullRequestsPaginationParams$ | async)
+      : (closedPullRequestsPaginationParams$ | async)
+  "
+  (pageChange)="pageChange($event)"
+></app-pagination>

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.ts

@@ -5,9 +5,10 @@ import {
   fetchPullRequests,
   ISSUE_STATE,
   selectClosedPullRequests,
+  selectClosedPullRequestsPaginationParams,
   selectOpenPullRequests,
+  selectOpenPullRequestsPaginationParams,
 } from '../state/repository';
-
 @Component({
   selector: 'app-pull-requests',
   templateUrl: './pull-requests.component.html',
@@ -20,6 +21,14 @@ export class PullRequestsComponent implements OnInit {
   closedPullRequests$ = this.store.select(selectClosedPullRequests);
   viewState: ISSUE_STATE = 'open';
 
+  openPullRequestsPaginationParams$ = this.store.select(
+    selectOpenPullRequestsPaginationParams,
+  );
+
+  closedPullRequestsPaginationParams$ = this.store.select(
+    selectClosedPullRequestsPaginationParams,
+  );
+
   constructor(private route: ActivatedRoute, private store: Store) {}
 
   ngOnInit() {
@@ -30,16 +39,34 @@ export class PullRequestsComponent implements OnInit {
       fetchPullRequests({
         owner: this.owner,
         repoName: this.repoName,
-        prState: 'open',
+        params: {
+          state: 'open',
+        },
       }),
     );
 
     this.store.dispatch(
       fetchPullRequests({
         owner: this.owner,
         repoName: this.repoName,
-        prState: 'closed',
+        params: {
+          state: 'closed',
+        },
       }),
     );
   }
+
+  pageChange(page: number) {
+    this.store.dispatch(
+      fetchPullRequests({
+        owner: this.owner,
+        repoName: this.repoName,
+        params: { state: this.viewState, page },
+      }),
+    );
+  }
+
+  viewStateChange(viewState: ISSUE_STATE) {
+    this.viewState = viewState;
+  }
 }

angular-ngrx-scss/src/app/repository/components/repository-details/repository-details.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subject, takeUntil, takeWhile, tap } from 'rxjs';
+import { Subject, takeUntil, tap } from 'rxjs';
 import { fetchRepository } from '../../../state/repository';
 import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';

angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts

@@ -54,12 +54,22 @@ export interface RepositoryIssuesApiParams {
   page?: number;
 }
 
-export interface PullRequest {
-  title: string;
-  number: number;
-  user: User;
-  closed_at?: string;
-  created_at: string;
+export interface RepositoryPullsApiParams {
+  state: 'open' | 'closed' | 'all';
+  page?: number;
+}
+
+export interface PullRequest extends Issue {
+  merged: boolean;
+  mergeable: boolean;
+  merged_by: User;
+  merged_at: string;
+  merge_commit_sha: string;
+  comments: number;
+  commits: number;
+  additions: number;
+  deletions: number;
+  changed_files: number;
 }
 
 export type PullRequests = Array<PullRequest>;

angular-ngrx-scss/src/app/repository/services/repository.service.ts

@@ -8,11 +8,11 @@ import {
   IssueLabel,
   Milestone,
   PullRequestAPIResponse,
-  PullRequestLabel,
   ReadmeApiResponse,
   RepoApiResponse,
   RepoContentsApiResponse,
   RepoIssues,
+  RepoPullRequests,
 } from 'src/app/state/repository';
 import { environment } from 'src/environments/environment';
 import {
@@ -21,6 +21,7 @@ import {
   PullRequest,
   PullRequests,
   RepositoryIssuesApiParams,
+  RepositoryPullsApiParams,
 } from './repository.interfaces';
 
 @Injectable({
@@ -50,6 +51,34 @@ export class RepositoryService {
     });
   }
 
+  getRepositoryPullRequestsCount(
+    repoOwner: string,
+    repoName: string,
+  ): Observable<number> {
+    const owner = encodeURIComponent(repoOwner);
+    const name = encodeURIComponent(repoName);
+    const url = `${environment.githubUrl}/repos/${owner}/${name}/pulls`;
+
+    return this.http
+      .get<PullRequests>(url, {
+        observe: 'response',
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+        },
+        params: new HttpParams({
+          fromObject: {
+            state: 'open',
+            per_page: 1,
+          },
+        }),
+      })
+      .pipe(
+        map((response) =>
+          this.extractTotalFromLinkHeader(response.headers.get('Link')),
+        ),
+      );
+  }
+
   /**
    * Gets a list of all the pull requests for the specified repository
    * @param repoOwner who the repo belongs to
@@ -59,16 +88,52 @@ export class RepositoryService {
   getRepositoryPullRequests(
     repoOwner: string,
     repoName: string,
-  ): Observable<PullRequests> {
+    params: RepositoryPullsApiParams,
+  ): Observable<RepoPullRequests> {
+    const defaultParams = {
+      state: 'all',
+      page: 1,
+    };
+
     const owner = encodeURIComponent(repoOwner);
     const name = encodeURIComponent(repoName);
-    const url = `${environment.githubUrl}/repos/${owner}/${name}/pulls`;
+    const state = encodeURIComponent(params.state);
+    const url = `${environment.githubUrl}/search/issues?q=repo:${owner}/${name}+type:pr+state:${state}`;
 
-    return this.http.get<PullRequests>(url, {
-      headers: {
-        Accept: 'application/vnd.github.v3+json',
-      },
-    });
+    return this.http
+      .get(url, {
+        observe: 'response',
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+        },
+        params: new HttpParams({
+          fromObject: { ...Object.assign(defaultParams, params) },
+        }),
+      })
+      .pipe(
+        map((response) => {
+          const linkHeader = response.headers.get('Link');
+
+          const canNext = !!(linkHeader && linkHeader.includes('rel="next"'));
+          const canPrev = !!(linkHeader && linkHeader.includes('rel="prev"'));
+
+          const data = response.body as PullRequestAPIResponse;
+
+          const total = data.total_count;
+
+          const page = params?.page || 1;
+
+          const paginationParams = {
+            canNext,
+            canPrev,
+            page,
+          };
+
+          const pullRequests: PullRequest[] = data.items;
+
+          return { pullRequests, paginationParams, total } as RepoPullRequests;
+        }),
+      );
   }
 
   /**
@@ -161,31 +226,6 @@ export class RepositoryService {
     });
   }
 
-  /**
-   * NOTE: This call uses the search URL to find the information, and is a bit of a duplicate of other calls that use the repo URL. Both work fine and are provided currently.
-   * Gets a list of pull requests matching the provided state
-   * @param repoOwner who the repo belongs to
-   * @param repoName name of the repo
-   * @param prState if the pr is open or closed
-   * @returns the total count of state-matching pull requests and information for each of those pulls
-   */
-  getPullRequests(
-    repoOwner: string,
-    repoName: string,
-    prState: ISSUE_STATE,
-  ): Observable<PullRequestAPIResponse> {
-    const owner = encodeURIComponent(repoOwner);
-    const name = encodeURIComponent(repoName);
-    const state = encodeURIComponent(prState);
-    const url = `${environment.githubUrl}/search/issues?q=repo:${owner}/${name}+type:pr+state:${state}`;
-
-    return this.http.get<PullRequestAPIResponse>(url, {
-      headers: {
-        Accept: 'application/vnd.github.v3+json',
-      },
-    });
-  }
-
   /**
    * Get a list of issues for the specified repository
    * @param owner who the repo belongs to