diff --git a/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts b/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts index 6bcec90c2..0b510ddb2 100644 --- a/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts +++ b/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.ts @@ -1,7 +1,11 @@ -import { Component, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { ActivatedRoute } from '@angular/router'; -import { RepoContents, fetchRepository, selectedRepository } from '../../state/repository'; +import { + RepoContents, + fetchRepository, + selectedRepository, +} from '../../state/repository'; import { map, takeWhile, tap } from 'rxjs'; @Component({ @@ -9,7 +13,7 @@ import { map, takeWhile, tap } from 'rxjs'; templateUrl: './file-explorer.component.html', styleUrls: ['./file-explorer.component.scss'], }) -export class FileExplorerComponent implements OnDestroy { +export class FileExplorerComponent implements OnInit, OnDestroy { owner = ''; repoName = ''; path = ''; @@ -32,8 +36,7 @@ export class FileExplorerComponent implements OnDestroy { ); private componentActive = true; - constructor(private route: ActivatedRoute, private store: Store) { } - + constructor(private route: ActivatedRoute, private store: Store) {} ngOnInit() { this.route.paramMap diff --git a/angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts b/angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts index a9fb397ad..b1e93a13d 100644 --- a/angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts +++ b/angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts @@ -54,13 +54,6 @@ export interface RepositoryIssuesApiParams { page?: number; } -export interface RepositoryPullsApiParams { - state: 'open' | 'closed' | 'all'; - labels?: string; - sort?: Sort; - page?: number; -} - export interface PullRequest extends Issue { merged: boolean; mergeable: boolean; diff --git a/angular-ngrx-scss/src/app/repository/services/repository.service.ts b/angular-ngrx-scss/src/app/repository/services/repository.service.ts index 9e495a7fa..ba5d2964d 100644 --- a/angular-ngrx-scss/src/app/repository/services/repository.service.ts +++ b/angular-ngrx-scss/src/app/repository/services/repository.service.ts @@ -1,4 +1,4 @@ -import { HttpClient, HttpParams } from '@angular/common/http'; +import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable, map } from 'rxjs'; import { @@ -6,6 +6,7 @@ import { IssueAPIResponse, IssueLabel, Milestone, + PaginationParams, PullRequestAPIResponse, ReadmeApiResponse, RepoApiResponse, @@ -20,7 +21,6 @@ import { PullRequest, PullRequests, RepositoryIssuesApiParams, - RepositoryPullsApiParams, } from './repository.interfaces'; @Injectable({ @@ -87,24 +87,14 @@ export class RepositoryService { getRepositoryPullRequests( repoOwner: string, repoName: string, - params: RepositoryPullsApiParams, + params: RepositoryIssuesApiParams, ): Observable { const owner = encodeURIComponent(repoOwner); const name = encodeURIComponent(repoName); const state = encodeURIComponent(params.state); let url = `${environment.githubUrl}/search/issues?q=repo:${owner}/${name}+type:pr+state:${state}`; - if (params?.labels) { - url += `+label:"${params.labels}"`; - } - - if (params?.sort) { - url += `+sort:${params.sort}`; - } - - if (params?.page) { - url += `&page=${params.page}`; - } + url = this.appendUrlParams(url, params); return this.http .get(url, { @@ -115,22 +105,16 @@ export class RepositoryService { }) .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, + const paginationParams = this.getPaginationParams( + response.headers, page, - }; + ); const pullRequests: PullRequest[] = data.items; @@ -255,21 +239,7 @@ export class RepositoryService { const state = encodeURIComponent(params?.state ?? defaultParams.state); let url = `${environment.githubUrl}/search/issues?q=repo:${owner}/${name}+type:issue+state:${state}`; - if (params?.labels) { - url += `+label:"${params.labels}"`; - } - - if (params?.milestone) { - url += `+milestone:"${params.milestone}"`; - } - - if (params?.sort) { - url += `+sort:${params.sort}`; - } - - if (params?.page) { - url += `&page=${params.page}`; - } + url = this.appendUrlParams(url, params); return this.http .get(url, { @@ -280,22 +250,16 @@ export class RepositoryService { }) .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 IssueAPIResponse; const total = data.total_count; const page = params?.page || 1; - const paginationParams = { - canNext, - canPrev, + const paginationParams = this.getPaginationParams( + response.headers, page, - }; + ); const issues: Issue[] = data.items; @@ -420,4 +384,42 @@ export class RepositoryService { return page; } + + private appendUrlParams( + url: string, + params?: RepositoryIssuesApiParams, + ): string { + if (params?.labels) { + url += `+label:"${params.labels}"`; + } + + if (params?.milestone) { + url += `+milestone:"${params.milestone}"`; + } + + if (params?.sort) { + url += `+sort:${params.sort}`; + } + + if (params?.page) { + url += `&page=${params.page}`; + } + return url; + } + + private getPaginationParams( + headers: HttpHeaders, + page: number, + ): PaginationParams { + const linkHeader = headers.get('Link'); + + const canNext = !!(linkHeader && linkHeader.includes('rel="next"')); + const canPrev = !!(linkHeader && linkHeader.includes('rel="prev"')); + + return { + canNext, + canPrev, + page, + }; + } } diff --git a/angular-ngrx-scss/src/app/state/repository/repository.actions.ts b/angular-ngrx-scss/src/app/state/repository/repository.actions.ts index 9794b024f..45b46bda1 100644 --- a/angular-ngrx-scss/src/app/state/repository/repository.actions.ts +++ b/angular-ngrx-scss/src/app/state/repository/repository.actions.ts @@ -5,10 +5,7 @@ import { RepoPullRequests, RepositoryState, } from './repository.state'; -import { - RepositoryIssuesApiParams, - RepositoryPullsApiParams, -} from 'src/app/repository/services/repository.interfaces'; +import { RepositoryIssuesApiParams } from 'src/app/repository/services/repository.interfaces'; export const fetchRepository = createAction( '[Repository API] Fetch Repository', @@ -50,7 +47,7 @@ export const fetchPullRequests = createAction( props<{ owner: string; repoName: string; - params: RepositoryPullsApiParams; + params: RepositoryIssuesApiParams; }>(), ); @@ -58,7 +55,7 @@ export const fetchPullRequestsSuccess = createAction( '[Repository API] Fetch Pull Requests Success', props<{ pullRequests: RepoPullRequests; - params: RepositoryPullsApiParams; + params: RepositoryIssuesApiParams; }>(), );