refactor: remove code duplications

Author: honzikec

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

@@ -1,15 +1,19 @@
-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({
   selector: 'app-file-explorer',
   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

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;

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

@@ -1,11 +1,12 @@
-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 {
   FileContentsApiResponse,
   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<RepoPullRequests> {
     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,
+    };
+  }
 }

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,15 +47,15 @@ export const fetchPullRequests = createAction(
   props<{
     owner: string;
     repoName: string;
-    params: RepositoryPullsApiParams;
+    params: RepositoryIssuesApiParams;
   }>(),
 );
 
 export const fetchPullRequestsSuccess = createAction(
   '[Repository API] Fetch Pull Requests Success',
   props<{
     pullRequests: RepoPullRequests;
-    params: RepositoryPullsApiParams;
+    params: RepositoryIssuesApiParams;
   }>(),
 );