feat: use search api, connect filters

honzikec · honzikec · commit e7905347af33 · 2023-08-18T19:15:09.000+02:00
diff --git a/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.html b/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.html
@@ -18,17 +18,25 @@
       description="Select label"
       [isRepo]="true"
       [items]="(labels$ | async) || []"
+      [toggle]="true"
+      (setFilter)="setLabel($event)"
+      [current]="filterParams.labels"
     ></app-filter-dropdown>
     <app-filter-dropdown
       name="Milestones"
       description="Select milestone"
       [isRepo]="true"
       [items]="(milestones$ | async) || []"
+      (setFilter)="setMilestone($event)"
+      [current]="filterParams.milestone"
     ></app-filter-dropdown>
     <app-filter-dropdown
       name="Sort"
       description="Select sort"
       [isRepo]="true"
+      [items]="sortOptions"
+      (setFilter)="setSort($event)"
+      [current]="filterParams.sort"
     ></app-filter-dropdown>
   </div>
 </div>
diff --git a/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.ts b/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.ts
@@ -1,10 +1,13 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable, map } from 'rxjs';
+import { Sort } from 'src/app/repository/services/repository.interfaces';
 import { FilterOption } from 'src/app/shared/components/filter-dropdown/filter-dropdown.component';
+import { SORTING_OPTIONS } from 'src/app/shared/constants';
 import {
   ISSUE_STATE,
   RepoIssues,
+  fetchIssues,
   selectLabels,
   selectMilestones,
 } from 'src/app/state/repository';
@@ -15,6 +18,16 @@ import {
   styleUrls: ['./issues-header.component.scss'],
 })
 export class IssuesHeaderComponent {
+  @Input() owner!: string;
+
+  @Input() repoName!: string;
+
+  filterParams: { labels?: string; milestone?: string; sort: Sort } = {
+    sort: 'created',
+  };
+
+  sortOptions: FilterOption[] = SORTING_OPTIONS;
+
   milestones$: Observable<FilterOption[]> = this.store
     .select(selectMilestones)
     .pipe(
@@ -53,4 +66,36 @@ export class IssuesHeaderComponent {
   selectClosed() {
     this.viewStateChange.emit('closed');
   }
+
+  setLabel(label: string) {
+    this.filterParams.labels = label;
+    this.refetchIssues();
+  }
+
+  setMilestone(milestone: string) {
+    this.filterParams.milestone = milestone;
+    this.refetchIssues();
+  }
+
+  setSort(sort: string) {
+    this.filterParams.sort = sort as Sort;
+    this.refetchIssues();
+  }
+
+  private refetchIssues() {
+    this.store.dispatch(
+      fetchIssues({
+        owner: this.owner,
+        repoName: this.repoName,
+        params: { state: 'open', ...this.filterParams },
+      }),
+    );
+    this.store.dispatch(
+      fetchIssues({
+        owner: this.owner,
+        repoName: this.repoName,
+        params: { state: 'closed', ...this.filterParams },
+      }),
+    );
+  }
 }
diff --git a/angular-ngrx-scss/src/app/issues/components/issues.component.html b/angular-ngrx-scss/src/app/issues/components/issues.component.html
@@ -3,6 +3,8 @@
     [viewState]="viewState"
     [openIssues]="openIssues$ | async"
     [closedIssues]="closedIssues$ | async"
+    [owner]="owner"
+    [repoName]="repoName"
     (viewStateChange)="viewStateChange($event)"
   ></app-issues-header>
   <app-issues-list
diff --git a/angular-ngrx-scss/src/app/issues/components/issues.component.scss b/angular-ngrx-scss/src/app/issues/components/issues.component.scss
@@ -3,4 +3,5 @@
 .issues-container {
   border-radius: 0.5rem;
   border: 1px solid variables.$gray200;
+  margin: 1rem auto;
 }
diff --git a/angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts b/angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts
@@ -33,15 +33,22 @@ export interface Issue {
 
 export type Issues = Array<Issue>;
 
+export type Sort =
+  | 'created'
+  | 'created-asc'
+  | 'updated'
+  | 'updated-asc'
+  | 'comments'
+  | 'comments-asc';
+
 export interface RepositoryIssuesApiParams {
   milestone?: string;
-  state?: 'open' | 'closed' | 'all';
+  state: 'open' | 'closed' | 'all';
   assignee?: string;
   creator?: string;
   mentioned?: string;
   labels?: string;
-  sort?: 'created' | 'updated' | 'comments';
-  direction?: 'asc' | 'desc';
+  sort?: Sort;
   since?: string;
   per_page?: number;
   page?: number;
diff --git a/angular-ngrx-scss/src/app/repository/services/repository.service.spec.ts b/angular-ngrx-scss/src/app/repository/services/repository.service.spec.ts
@@ -2,26 +2,25 @@ import {
   HttpClient,
   HttpEventType,
   HttpHeaders,
-  HttpParams,
   HttpResponse,
 } from '@angular/common/http';
 import { delay, of } from 'rxjs';
 import {
   PullRequestAPIResponse,
   RepoApiResponse,
   RepoContentsApiResponse,
+  RepoIssues,
 } from 'src/app/state/repository';
 import {
   IssueComments,
-  Issues,
   PullRequest,
   PullRequests,
 } from './repository.interfaces';
 
 import { generatePullRequestAPIResponseFixture } from '../../fixtures/repository.fixtures';
 import { RepositoryService } from './repository.service';
 
-const MOCK_ISSUES: Issues = [
+const MOCK_ISSUES = [
   {
     number: 30734,
     state: 'open',
@@ -136,27 +135,29 @@ const MOCK_ISSUES: Issues = [
   },
 ];
 
-const MOCK_REPO_ISSUES = {
+const EXPECTED_ISSUES: RepoIssues = {
   total: 3,
   paginationParams: {
-    canNext: true,
-    canPrev: false,
     page: 1,
+    canNext: false,
+    canPrev: false,
   },
   issues: MOCK_ISSUES,
 };
 
-const MOCK_ISSUES_RESPONSE: HttpResponse<Issues> = {
-  headers: new HttpHeaders({
-    Link: '<https://api.github.com/repositories/421063754/issues?state=open&sort=created&direction=desc&per_page=30&page=1&pulls=false>; rel="next", <https://api.github.com/repositories/421063754/issues?state=open&sort=created&direction=desc&per_page=30&page=3&pulls=false>; rel="last"',
-  }),
+const MOCK_ISSUES_RESPONSE: HttpResponse<unknown> = {
+  headers: new HttpHeaders(),
   clone: jasmine.createSpy('clone'),
   type: HttpEventType.Response,
   status: 200,
   statusText: 'OK',
   ok: true,
   url: 'http://localhost',
-  body: MOCK_ISSUES,
+  body: {
+    total_count: 3,
+    incomplete_results: false,
+    items: MOCK_ISSUES,
+  },
 };
 
 const MOCK_PULL_REQUEST_NUMBER = 11814;
@@ -428,25 +429,15 @@ describe('RepositoryService', () => {
     httpClientSpy.get.and.returnValue(of(MOCK_ISSUES_RESPONSE));
 
     repoService.getRepositoryIssues('FakeCo', 'fake-repo').subscribe({
-      next: (response) => {
-        expect(response).toEqual(MOCK_REPO_ISSUES);
+      next: (repos) => {
+        expect(repos).toEqual(EXPECTED_ISSUES);
 
         expect(httpClientSpy.get).toHaveBeenCalledWith(
-          'https://api.github.com/repos/FakeCo/fake-repo/issues',
+          'https://api.github.com/search/issues?q=repo:FakeCo/fake-repo+type:issue+state:all',
           jasmine.objectContaining({
             headers: {
               Accept: 'application/vnd.github.v3+json',
             },
-            params: new HttpParams({
-              fromObject: {
-                state: 'all',
-                sort: 'created',
-                direction: 'desc',
-                per_page: 30,
-                page: 1,
-                pulls: false,
-              },
-            }),
           }),
         );
       },
@@ -460,25 +451,15 @@ describe('RepositoryService', () => {
     repoService
       .getRepositoryIssues('FakeCo', 'fake-repo', { state: 'closed' })
       .subscribe({
-        next: (response) => {
-          expect(response).toEqual(MOCK_REPO_ISSUES);
+        next: (repos) => {
+          expect(repos).toEqual(EXPECTED_ISSUES);
 
           expect(httpClientSpy.get).toHaveBeenCalledWith(
-            'https://api.github.com/repos/FakeCo/fake-repo/issues',
+            'https://api.github.com/search/issues?q=repo:FakeCo/fake-repo+type:issue+state:closed',
             jasmine.objectContaining({
               headers: {
                 Accept: 'application/vnd.github.v3+json',
               },
-              params: new HttpParams({
-                fromObject: {
-                  state: 'closed',
-                  sort: 'created',
-                  direction: 'desc',
-                  per_page: 30,
-                  page: 1,
-                  pulls: false,
-                },
-              }),
             }),
           );
         },
diff --git a/angular-ngrx-scss/src/app/repository/services/repository.service.ts b/angular-ngrx-scss/src/app/repository/services/repository.service.ts
@@ -1,9 +1,10 @@
-import { HttpClient, HttpParams } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, forkJoin, map } from 'rxjs';
+import { Observable, map } from 'rxjs';
 import {
   FileContentsApiResponse,
   ISSUE_STATE,
+  IssueAPIResponse,
   IssueLabel,
   Milestone,
   PullRequestAPIResponse,
@@ -207,56 +208,52 @@ export class RepositoryService {
 
     const owner = encodeURIComponent(repoOwner);
     const name = encodeURIComponent(repoName);
-    const url = `${environment.githubUrl}/repos/${owner}/${name}/issues`;
-
-    // We need to make two calls to get the total count of issues and the issues themselves.
-    // This workaround is needed because the GitHub REST API doesn't return the total count of issues in the response.
-    // We can get the total count from the "Link" HTTP header,
-    // but we need to make a call with per_page=1 to be able to calculate the total count.
-    // See https://developer.github.com/v3/guides/traversing-with-pagination/#calculating-the-pagination-offset
-    return forkJoin([
-      this.http.get(url, {
-        observe: 'response',
-        headers: {
-          Accept: 'application/vnd.github.v3+json',
-        },
-        params: new HttpParams({
-          fromObject: { ...Object.assign(defaultParams, params) },
-        }),
-      }),
-      this.http.get(url, {
+    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}`;
+    }
+
+    return this.http
+      .get(url, {
         observe: 'response',
         headers: {
           Accept: 'application/vnd.github.v3+json',
         },
-        params: new HttpParams({
-          fromObject: { ...Object.assign(defaultParams, { per_page: 1 }) },
-        }),
-      }),
-    ]).pipe(
-      map(([paginatedIssues, helperIssues]) => {
-        const linkHeader = paginatedIssues.headers.get('Link');
+      })
+      .pipe(
+        map((response) => {
+          const linkHeader = response.headers.get('Link');
+
+          const canNext = !!(linkHeader && linkHeader.includes('rel="next"'));
+          const canPrev = !!(linkHeader && linkHeader.includes('rel="prev"'));
 
-        const canNext = !!(linkHeader && linkHeader.includes('rel="next"'));
-        const canPrev = !!(linkHeader && linkHeader.includes('rel="prev"'));
+          const data = response.body as IssueAPIResponse;
 
-        const total = this.extractTotalFromLinkHeader(
-          helperIssues.headers.get('Link'),
-        );
+          const total = data.total_count;
 
-        const page = params?.page || 1;
+          const page = params?.page || 1;
 
-        const paginationParams = {
-          canNext,
-          canPrev,
-          page,
-        };
+          const paginationParams = {
+            canNext,
+            canPrev,
+            page,
+          };
 
-        const issues = paginatedIssues.body as Issue[];
+          const issues: Issue[] = data.items;
 
-        return { issues, paginationParams, total } as RepoIssues;
-      }),
-    );
+          return { issues, paginationParams, total } as RepoIssues;
+        }),
+      );
   }
 
   /**
@@ -344,33 +341,4 @@ export class RepositoryService {
       },
     });
   }
-
-  private extractTotalFromLinkHeader(linkHeader: string | null): number {
-    if (!linkHeader) {
-      return 0;
-    }
-
-    // Find the link with rel="last"
-    const lastLinkPattern = /<([^>]+)>; rel="last"/;
-    const lastLinkMatch = linkHeader.match(lastLinkPattern);
-
-    if (!lastLinkMatch) {
-      return 0;
-    }
-
-    const lastLink = lastLinkMatch[1];
-
-    // Parse as a URL
-    const url = new URL(lastLink);
-
-    // Extract query parameters
-    const queryParams = new URLSearchParams(url.search);
-    const page = parseInt(queryParams.get('page') || '', 10);
-
-    if (isNaN(page)) {
-      return 0;
-    }
-
-    return page;
-  }
 }
diff --git a/angular-ngrx-scss/src/app/shared/components/filter-dropdown/filter-dropdown.component.ts b/angular-ngrx-scss/src/app/shared/components/filter-dropdown/filter-dropdown.component.ts
diff --git a/angular-ngrx-scss/src/app/shared/constants/index.ts b/angular-ngrx-scss/src/app/shared/constants/index.ts
diff --git a/angular-ngrx-scss/src/app/state/repository/repository.state.ts b/angular-ngrx-scss/src/app/state/repository/repository.state.ts

Original file line number	Diff line number	Diff line change
`@@ -3,4 +3,5 @@`
`3`	`3`	`.issues-container {`
`4`	`4`	`border-radius: 0.5rem;`
`5`	`5`	`border: 1px solid variables.$gray200;`
	`6`	`+ margin: 1rem auto;`
`6`	`7`	`}`