[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 <honzikec@Jan-MacBook-Air.local>

Author: honzikec

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;

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];
 

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>
 

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';

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,
+  };
 };

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()">

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;

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({

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)

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);
 }