[angular-ngrx-scss] pulls tab (#1942)

* wip: PRs * wip: PRs * fix: use search api, fix tests * fix: adjusted regex * fix: try to prevent regex backtracking * fix: avoid regex, properly paginate * fix: restore deleted code * refactor: remove code duplications * fix: add clear filters button and resolve lint warnings * fix: use nullish coalescing operator instead of logical or * fix: replace logical or with nullish coalescing operator --------- Co-authored-by: Jan Kaiser <[email protected]>
thisdot · Aug 30, 2023 · 7fdc0d6 · 7fdc0d6
1 parent ae1a799
commit 7fdc0d6
Show file tree

Hide file tree

Showing 42 changed files with 600 additions and 319 deletions.
diff --git a/angular-ngrx-scss/projects/prism/src/lib/types/model.ts b/angular-ngrx-scss/projects/prism/src/lib/types/model.ts
@@ -14,7 +14,7 @@ export type TokenEnv = {
   tokens: Array<string | PrismToken>;
 };
 
-export type StyleObj = { [klass: string]: any } | null;
+export type StyleObj = { [klass: string]: unknown } | null;
 
 export type LineInputProps = {
   style?: StyleObj;

diff --git a/angular-ngrx-scss/projects/prism/src/lib/utils/normalize-tokens.ts b/angular-ngrx-scss/projects/prism/src/lib/utils/normalize-tokens.ts
@@ -40,7 +40,7 @@ const normalizeTokens = (tokens: Array<PrismToken | string>): Token[][] => {
 
   let i = 0;
   let stackIndex = 0;
-  let currentLine: any[] = [];
+  let currentLine: Token[] = [];
 
   const acc = [currentLine];
 

diff --git a/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.html b/angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.html
@@ -2,18 +2,18 @@
   <div class="container grid grid-cols-12 subpage">
     <section class="col-span-9 col-sm-span-12">
       <app-file-explorer-nav
-        [owner]="owner"
-        [name]="repoName"
+        [owner]="repo.ownerName"
+        [name]="repo.repoName"
         [branch]="repo.activeBranch"
-        [path]="path"
-        [showCrumbs]="!!path"
+        [path]="repo.path"
+        [showCrumbs]="!!repo.path"
       ></app-file-explorer-nav>
 
       <app-file-explorer-container
         [repoPage]="repo.tree"
         [branch]="repo.activeBranch"
-        [owner]="owner"
-        [name]="repoName"
+        [owner]="repo.ownerName"
+        [name]="repo.repoName"
       ></app-file-explorer-container>
     </section>
 

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
@@ -2,8 +2,8 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { ActivatedRoute } from '@angular/router';
 import {
-  fetchRepository,
   RepoContents,
+  fetchRepository,
   selectedRepository,
 } from '../../state/repository';
 import { map, takeWhile, tap } from 'rxjs';

diff --git a/angular-ngrx-scss/src/app/fixtures/repository.fixtures.ts b/angular-ngrx-scss/src/app/fixtures/repository.fixtures.ts
@@ -1,16 +1,16 @@
+import { HttpHeaders, HttpResponse } from '@angular/common/http';
+import { PullRequest } from '../repository/services/repository.interfaces';
 import {
   ISSUE_STATE,
   PullRequestAPIResponse,
-  PullRequestItemAPIResponse,
   IssueLabel,
-  RepoPullRequests,
 } from '../state/repository';
 
 export const generatePullRequestAPIResponseFixture = (
   state: ISSUE_STATE = 'open',
-): PullRequestAPIResponse => {
+): HttpResponse<PullRequestAPIResponse> => {
   const closedDate = new Date(2022, 2, 1).toISOString();
-  return {
+  const body = {
     incomplete_results: false,
     total_count: 1,
     items: [
@@ -37,30 +37,18 @@ export const generatePullRequestAPIResponseFixture = (
           } as IssueLabel,
         ],
         comments: 305,
-      } as PullRequestItemAPIResponse,
+      } as unknown as PullRequest,
     ],
   };
-};
-
-const prObject = generatePullRequestAPIResponseFixture().items[0];
 
-export const pullRequestFixture: RepoPullRequests = {
-  totalCount: 1,
-  pullRequests: [
-    {
-      id: prObject.id,
-      login: prObject.user.login,
-      title: prObject.title,
-      number: prObject.number,
-      state: prObject.state,
-      closedAt: prObject.closed_at ? new Date(prObject.closed_at) : null,
-      mergedAt: prObject.pull_request.merged_at
-        ? new Date(prObject.pull_request.merged_at)
-        : null,
-      createdAt: new Date(prObject.created_at),
-      labels: prObject.labels,
-      commentCount: prObject.comments,
-      labelCount: prObject.labels.length,
-    },
-  ],
+  return {
+    headers: new HttpHeaders(),
+    status: 200,
+    statusText: 'OK',
+    ok: true,
+    type: 4,
+    url: 'https://api.github.com/search/issues?q=repo:thisdot/open-source/issues+type:pr+state:open',
+    clone: jasmine.createSpy('clone'),
+    body,
+  };
 };
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
@@ -1,3 +1,9 @@
+<div class="container" *ngIf="hasFilters$ | async">
+  <app-clear-filters-button (clearFilters)="clearFilters()"
+    >Clear current search query, filters, and sorts</app-clear-filters-button
+  >
+</div>
+
 <div class="filters-container">
   <div class="issue-status">
     <button [ngClass]="{ active: viewState === 'open' }" (click)="selectOpen()">

diff --git a/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.scss b/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.scss
@@ -8,6 +8,9 @@
   flex-direction: column;
   padding: variables.$padding--l;
   background-color: variables.$gray100;
+  margin-top: functions.rem(14);
+  border-top-left-radius: variables.$padding;
+  border-top-right-radius: variables.$padding;
 
   @media (min-width: variables.$md) {
     flex-direction: row;

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
@@ -8,6 +8,7 @@ import {
   ISSUE_STATE,
   RepoIssues,
   fetchIssues,
+  selectHasActiveIssueFilters,
   selectLabels,
   selectMilestones,
 } from 'src/app/state/repository';
@@ -22,6 +23,8 @@ export class IssuesHeaderComponent {
 
   @Input() repoName!: string;
 
+  hasFilters$ = this.store.select(selectHasActiveIssueFilters);
+
   filterParams: { labels?: string; milestone?: string; sort: Sort } = {
     sort: 'created',
   };
@@ -82,6 +85,11 @@ export class IssuesHeaderComponent {
     this.refetchIssues();
   }
 
+  clearFilters() {
+    this.filterParams = { sort: 'created' };
+    this.refetchIssues();
+  }
+
   private refetchIssues() {
     this.store.dispatch(
       fetchIssues({

diff --git a/angular-ngrx-scss/src/app/issues/components/issues.component.html b/angular-ngrx-scss/src/app/issues/components/issues.component.html
@@ -1,4 +1,4 @@
-<div class="container issues-container">
+<div class="container">
   <app-issues-header
     [viewState]="viewState"
     [openIssues]="openIssues$ | async"
@@ -7,6 +7,8 @@
     [repoName]="repoName"
     (viewStateChange)="viewStateChange($event)"
   ></app-issues-header>
+</div>
+<div class="container issues-container">
   <app-issues-list
     [issues]="
       viewState === 'open' ? (openIssues$ | async) : (closedIssues$ | async)

diff --git a/angular-ngrx-scss/src/app/issues/components/issues.component.scss b/angular-ngrx-scss/src/app/issues/components/issues.component.scss
@@ -1,7 +1,9 @@
 @use 'variables';
+@use 'functions';
 
 .issues-container {
-  border-radius: variables.$padding;
+  border-bottom-left-radius: variables.$padding;
+  border-bottom-right-radius: variables.$padding;
   border: 1px solid variables.$gray200;
-  margin: 1rem auto;
+  margin-bottom: functions.rem(14);
 }
diff --git a/...-scss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.html b/...-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>
diff --git a/...ss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.spec.ts b/...ss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.spec.ts
@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PullRequestCardComponent } from './pull-request-card.component';
 import { ChangeDetectionStrategy } from '@angular/core';
-import { RepoPullRequest } from '../../../state/repository';
 import { By } from '@angular/platform-browser';
 import { SharedModule } from '../../../shared/shared.module';
+import { PullRequest } from 'src/app/repository/services/repository.interfaces';
 
 describe('PullRequestCardComponent', () => {
   let component: PullRequestCardComponent;
@@ -26,11 +26,11 @@ describe('PullRequestCardComponent', () => {
     component = fixture.componentInstance;
     component.pullRequest = {
       id: 1,
-      login: 'thisdot',
+      user: { login: 'thisdot' },
       title: 'Get PRs information',
       number: 45,
       state: 'open',
-      createdAt: new Date('01/01/2022'),
+      created_at: new Date('01/01/2022'),
       labels: [
         {
           id: 2,
@@ -40,8 +40,8 @@ describe('PullRequestCardComponent', () => {
           color: 'D4C5F9',
         },
       ],
-      commentCount: 3,
-    } as RepoPullRequest;
+      comments: 3,
+    } as unknown as PullRequest;
     fixture.detectChanges();
   });
 

diff --git a/...rx-scss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.ts b/...rx-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) {

diff --git a/...src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.html b/...src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.html
@@ -1,32 +1,45 @@
-<div class="filters-container">
+<div class="container" *ngIf="hasFilters$ | async">
+  <app-clear-filters-button (clearFilters)="clearFilters()"
+    >Clear current search query, filters, and sorts</app-clear-filters-button
+  >
+</div>
+
+<div class="container filters-container">
   <div class="pull-requests-status">
     <button
       class="tab-button"
       [ngClass]="{ active: viewState === 'open' }"
       (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">
     <app-filter-dropdown
       name="Label"
       description="Select label"
       [isRepo]="true"
+      [toggle]="true"
+      [items]="(labels$ | async) ?? []"
+      (setFilter)="setLabel($event)"
+      [current]="filterParams.labels"
     ></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/...src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.scss b/...src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.scss
@@ -7,6 +7,9 @@
   flex-direction: column;
   padding: variables.$padding--l;
   background-color: variables.$gray100;
+  margin-top: functions.rem(14);
+  border-top-left-radius: variables.$padding;
+  border-top-right-radius: variables.$padding;
 
   @media (min-width: variables.$md) {
     flex-direction: row;