fix: add clear filters button and resolve lint warnings

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

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.html

@@ -1,4 +1,10 @@
-<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"

angular-ngrx-scss/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;

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.ts

@@ -9,6 +9,7 @@ import {
   ISSUE_STATE,
   RepoPullRequests,
   fetchPullRequests,
+  selectHasActivePullRequestFilters,
   selectLabels,
 } from '../../../state/repository';
 import { Store } from '@ngrx/store';
@@ -31,6 +32,8 @@ export class PullRequestsHeaderComponent {
   @Input() viewState: ISSUE_STATE = 'open';
   @Output() viewStateChange = new EventEmitter<ISSUE_STATE>();
 
+  hasFilters$ = this.store.select(selectHasActivePullRequestFilters);
+
   filterParams: { labels?: string; sort: Sort } = {
     sort: 'created',
   };
@@ -62,6 +65,11 @@ export class PullRequestsHeaderComponent {
     this.refetchPulls();
   }
 
+  clearFilters() {
+    this.filterParams = { sort: 'created' };
+    this.refetchPulls();
+  }
+
   private refetchPulls() {
     this.store.dispatch(
       fetchPullRequests({

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.html

@@ -1,12 +1,12 @@
+<app-pull-requests-header
+  [openPullRequests]="openPullRequests$ | async"
+  [closedPullRequests]="closedPullRequests$ | async"
+  [viewState]="viewState"
+  (viewStateChange)="viewStateChange($event)"
+  [owner]="owner"
+  [repoName]="repoName"
+></app-pull-requests-header>
 <div class="container pull-requests-container">
-  <app-pull-requests-header
-    [openPullRequests]="openPullRequests$ | async"
-    [closedPullRequests]="closedPullRequests$ | async"
-    [viewState]="viewState"
-    (viewStateChange)="viewStateChange($event)"
-    [owner]="owner"
-    [repoName]="repoName"
-  ></app-pull-requests-header>
   <app-pull-requests-list
     [pullRequests]="
       viewState === 'open'

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.scss

@@ -2,7 +2,8 @@
 @use 'functions';
 
 .pull-requests-container {
-  border-radius: variables.$padding;
+  border-bottom-left-radius: variables.$padding;
+  border-bottom-right-radius: variables.$padding;
   border: 1px solid variables.$gray200;
-  margin: functions.rem(28) auto;
+  margin-bottom: functions.rem(14);
 }

angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.html

@@ -0,0 +1,6 @@
+<button type="button" class="button" (click)="clearFilters.emit()">
+  <div class="button__icon">
+    <span appOcticon="x" color="white" size="13"></span>
+  </div>
+  <p class="button__text"><ng-content></ng-content></p>
+</button>

angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.scss

@@ -0,0 +1,36 @@
+@use 'variables';
+@use 'functions';
+
+.button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: variables.$padding;
+  color: variables.$gray500;
+
+  &:hover {
+    color: variables.$blue600;
+  }
+
+  &__icon {
+    background: variables.$gray500;
+    border-radius: variables.$padding--s;
+    width: functions.rem(20);
+    height: functions.rem(20);
+    display: grid;
+    place-items: center;
+  }
+
+  &:hover &__icon {
+    background: variables.$blue600;
+  }
+
+  &__text:empty::after {
+    content: 'Clear filter';
+  }
+}

angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.ts

@@ -0,0 +1,10 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-clear-filters-button',
+  templateUrl: './clear-filters-button.component.html',
+  styleUrls: ['./clear-filters-button.component.scss'],
+})
+export class ClearFiltersButtonComponent {
+  @Output() clearFilters = new EventEmitter();
+}

angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.html

@@ -53,12 +53,9 @@
           {{ (selectSortFilter$ | async)?.split('_')?.join(' ') | lowercase }}
         </span>
       </p>
-      <button type="button" class="results__clear" (click)="handleClearClick()">
-        <div class="results__clear__icon">
-          <span appOcticon="x" color="white" size="13"></span>
-        </div>
-        <p class="results__clear__text">Clear filter</p>
-      </button>
+      <app-clear-filters-button
+        (clearFilters)="handleClearClick()"
+      ></app-clear-filters-button>
     </div>
     <div class="divider"></div>
   </ng-container>

angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.scss

@@ -57,31 +57,4 @@ section {
   &__text {
     flex-grow: 1;
   }
-
-  &__clear {
-    background: none;
-    color: inherit;
-    border: none;
-    padding: 0;
-    font: inherit;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: variables.$padding;
-    color: variables.$gray500;
-    &:hover {
-      color: variables.$blue600;
-    }
-    &__icon {
-      background: variables.$gray500;
-      border-radius: variables.$padding--s;
-      width: functions.rem(20);
-      height: functions.rem(20);
-      display: grid;
-      place-items: center;
-    }
-    &:hover &__icon {
-      background: variables.$blue600;
-    }
-  }
 }

angular-ngrx-scss/src/app/shared/shared.module.ts

@@ -9,6 +9,7 @@ import { MarkdownPipe } from './pipes/markdown.pipe';
 import { PaginationComponent } from './components/pagination/pagination.component';
 import { RepoIssuePullCardComponent } from './components/repo-issue-pull-card/repo-issue-pull-card.component';
 import { ClickAwayDirective } from './directives/click-away.directive';
+import { ClearFiltersButtonComponent } from './components/clear-filters-button/clear-filters-button.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { ClickAwayDirective } from './directives/click-away.directive';
     PaginationComponent,
     RepoIssuePullCardComponent,
     ClickAwayDirective,
+    ClearFiltersButtonComponent,
   ],
   imports: [CommonModule, RouterModule],
   exports: [
@@ -31,6 +33,7 @@ import { ClickAwayDirective } from './directives/click-away.directive';
     PaginationComponent,
     RepoIssuePullCardComponent,
     ClickAwayDirective,
+    ClearFiltersButtonComponent,
   ],
 })
 export class SharedModule {}

angular-ngrx-scss/src/app/state/auth/auth.effects.spec.ts

@@ -18,7 +18,6 @@ import { AuthEffects } from './auth.effects';
 describe('AuthEffects', () => {
   let actions$: Actions;
   let effects: AuthEffects;
-  let store: MockStore;
   let mockHttpClient: jasmine.SpyObj<HttpClient>;
   let authService: jasmine.SpyObj<AuthService>;
 
@@ -56,8 +55,7 @@ describe('AuthEffects', () => {
       ],
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    store = TestBed.inject(MockStore);
+    TestBed.inject(MockStore);
     actions$ = TestBed.inject(Actions);
     effects = TestBed.inject(AuthEffects);
   });

angular-ngrx-scss/src/app/state/repository/repository.effects.spec.ts

@@ -269,6 +269,8 @@ describe('RepositoryEffects', () => {
       labels: [],
       milestones: [],
       path: '',
+      issuesFilterParams: null,
+      pullsFilterParams: null,
     };
 
     repoServiceMock.getRepositoryInfo.and.returnValue(of(MOCK_REPO_INFO));

angular-ngrx-scss/src/app/state/repository/repository.effects.ts

@@ -86,6 +86,8 @@ export class RepositoryEffects {
               readme: readme.content || '',
               milestones: milestones || [],
               labels: labels || [],
+              pullsFilterParams: null,
+              issuesFilterParams: null,
             };
             return fetchRepositorySuccess({ repoData: allData });
           }),

angular-ngrx-scss/src/app/state/repository/repository.reducer.ts

@@ -25,6 +25,8 @@ export const initialRepositoryState: RepositoryState = {
   website: '',
   milestones: [],
   labels: [],
+  pullsFilterParams: null,
+  issuesFilterParams: null,
 };
 
 const reducer = createReducer(
@@ -43,6 +45,7 @@ const reducer = createReducer(
     (state, { pullRequests, params }) => {
       return {
         ...state,
+        pullsFilterParams: params,
         openPullRequests:
           params.state === 'open' ? pullRequests : state.openPullRequests,
         closedPullRequests:
@@ -54,6 +57,7 @@ const reducer = createReducer(
   on(RepositoryActions.fetchIssuesSuccess, (state, { issues, params }) => {
     return {
       ...state,
+      issuesFilterParams: params,
       openIssues: params.state === 'open' ? issues : state.openIssues,
       closedIssues: params.state === 'closed' ? issues : state.closedIssues,
     };

angular-ngrx-scss/src/app/state/repository/repository.selectors.ts

@@ -65,3 +65,26 @@ export const selectLabels = createSelector(
   selectRepositoryState,
   (state) => state.labels,
 );
+
+export const selectHasActiveIssueFilters = createSelector(
+  selectRepositoryState,
+  (state) =>
+    state.issuesFilterParams &&
+    ((state.issuesFilterParams.milestone &&
+      state.issuesFilterParams.milestone?.length > 0) ||
+      (state.issuesFilterParams?.labels &&
+        state.issuesFilterParams.labels.length > 0) ||
+      (state.issuesFilterParams.sort &&
+        state.issuesFilterParams?.sort !== 'created')),
+);
+
+export const selectHasActivePullRequestFilters = createSelector(
+  selectRepositoryState,
+  (state) =>
+    state.pullsFilterParams &&
+    ((state.pullsFilterParams?.labels &&
+      state.pullsFilterParams.labels.length > 0) ||
+      (state.pullsFilterParams?.sort &&
+        state.pullsFilterParams.sort &&
+        state.pullsFilterParams.sort !== 'created')),
+);