Feat: Add filters to whitelist (#143)

src/app/instances/pages/whitelisted-instances/whitelisted-instances.component.html

@@ -4,6 +4,39 @@
   <div class="col-md-12">
     <div class="card">
       <div class="card-body">
+        <!-- filters -->
+        <form [formGroup]="form" (submit)="loadInstances()">
+          <div class="row">
+            <div class="col-md-4">
+              <div class="form-group">
+                <label for="inputFilterTags">Tags</label>
+                <select formControlName="tags" id="inputFilterTags" multiple tom-select [maxItems]="null" [create]="true">
+                  <option *ngFor="let option of availableTags" [value]="option">{{option}}</option>
+                </select>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="form-group">
+                <label for="inputFilterMinimumEndorsements">Minimum amount of endorsements</label>
+                <input type="number" id="inputFilterMinimumEndorsements" formControlName="minimumEndorsements" class="form-control" />
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="form-group">
+                <label for="inputFilterMinimumGuarantors">Minimum amount of guarantors</label>
+                <input type="number" id="inputFilterMinimumGuarantors" formControlName="minimumGuarantors" class="form-control" />
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-3">
+              <div class="form-group">
+                <button [disabled]="!form.valid" type="submit" class="btn btn-primary">Filter</button>
+              </div>
+            </div>
+          </div>
+        </form>
+        <!-- end filters -->
         <p *ngIf="!currentInstance.anonymous">
           If you're looking for managing of your own whitelist, go to <a routerLink="/endorsements/my">your endorsements</a>.
         </p>

src/app/instances/pages/whitelisted-instances/whitelisted-instances.component.ts

@@ -4,13 +4,15 @@ import {ApiResponse, FediseerApiService} from "../../../services/fediseer-api.se
 import {MessageService} from "../../../services/message.service";
 import {InstanceDetailResponse} from "../../../response/instance-detail.response";
 import {toPromise} from "../../../types/resolvable";
-import {ActivatedRoute, Router} from "@angular/router";
+import {ActivatedRoute, Params, Router} from "@angular/router";
 import {AuthenticationManagerService} from "../../../services/authentication-manager.service";
 import {Instance} from "../../../user/instance";
 import {SuccessResponse} from "../../../response/success.response";
 import {ApiResponseHelperService} from "../../../services/api-response-helper.service";
 import {CachedFediseerApiService} from "../../../services/cached-fediseer-api.service";
 import {WhitelistFilter} from "../../../types/whitelist-filter";
+import {FormControl, FormGroup, Validators} from "@angular/forms";
+import {int} from "../../../types/number";
 
 @Component({
   selector: 'app-whitelisted-instances',
@@ -21,6 +23,7 @@ export class WhitelistedInstancesComponent implements OnInit {
   private readonly perPage = 30;
 
   private allInstances: InstanceDetailResponse[] = [];
+  private initialLoadComplete: boolean = false;
 
   public instances: InstanceDetailResponse[] = [];
   public currentInstance: Instance = this.authManager.currentInstanceSnapshot;
@@ -30,6 +33,14 @@ export class WhitelistedInstancesComponent implements OnInit {
   public pages: number[] = [];
   public loading: boolean = true;
 
+  public availableTags: string[] = [];
+
+  public form = new FormGroup({
+    tags: new FormControl<string[]>([]),
+    minimumEndorsements: new FormControl<int>(0, [Validators.min(0)]),
+    minimumGuarantors: new FormControl<int>(1, [Validators.min(0)]),
+  });
+
   constructor(
     private readonly titleService: TitleService,
     private readonly api: FediseerApiService,
@@ -50,9 +61,21 @@ export class WhitelistedInstancesComponent implements OnInit {
       this.currentPage = queryParams['page'] ? Number(queryParams['page']) : 1;
 
       const filters: WhitelistFilter = {};
-      if (queryParams['tags']) {
+      if (queryParams['tags'] !== undefined) {
         filters.tags = queryParams['tags'].split(',');
       }
+      if (queryParams['minimumEndorsements'] !== undefined) {
+        filters.minimumEndorsements = Number(queryParams['minimumEndorsements']);
+      }
+      if (queryParams['minimumGuarantors'] !== undefined) {
+        filters.minimumGuarantors = Number(queryParams['minimumGuarantors']);
+      }
+
+      const formPatch: WhitelistFilter = JSON.parse(JSON.stringify(filters));
+      formPatch.tags ??= [];
+      formPatch.minimumGuarantors ??= 1;
+      formPatch.minimumEndorsements ??= 0;
+      this.form.patchValue(formPatch);
 
       if (!this.currentInstance.anonymous) {
         const response = await toPromise(this.cachedApi.getEndorsementsByInstances([this.currentInstance.name]));
@@ -83,6 +106,12 @@ export class WhitelistedInstancesComponent implements OnInit {
 
       this.instances = this.allInstances.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage);
       this.loading = false;
+
+      this.availableTags = await toPromise(this.cachedApi.getAvailableTags());
+
+      if (!this.initialLoadComplete) {
+        this.initialLoadComplete = true;
+      }
     });
   }
 
@@ -117,4 +146,28 @@ export class WhitelistedInstancesComponent implements OnInit {
       queryParamsHandling: 'merge',
     });
   }
+
+  public async loadInstances(): Promise<void> {
+    if (!this.form.valid) {
+      return;
+    }
+
+    const queryParams: Params = {
+      page: 1,
+    };
+    if (this.form.controls.tags.value?.length) {
+      queryParams['tags'] = this.form.controls.tags.value!.join(',');
+    }
+    if (this.form.controls.minimumEndorsements.value !== null) {
+      queryParams['minimumEndorsements'] = this.form.controls.minimumEndorsements.value!;
+    }
+    if (this.form.controls.minimumGuarantors.value !== null) {
+      queryParams['minimumGuarantors'] = this.form.controls.minimumGuarantors.value!;
+    }
+
+    await this.router.navigate([], {
+      relativeTo: this.activatedRoute,
+      queryParams: queryParams,
+    });
+  }
 }

src/app/services/fediseer-api.service.ts

@@ -185,6 +185,12 @@ export class FediseerApiService {
     if (filter.tags !== undefined) {
       body['tags_csv'] = filter.tags.join(',');
     }
+    if (filter.minimumEndorsements !== undefined) {
+      body['endorsements'] = String(filter.minimumEndorsements);
+    }
+    if (filter.minimumGuarantors !== undefined) {
+      body['guarantors'] = String(filter.minimumGuarantors);
+    }
 
     const sendRequest = (page: number, limit: number): Observable<ApiResponse<InstanceListResponse<InstanceDetailResponse>>> => this.sendRequest(
       HttpMethod.Get,

src/app/types/whitelist-filter.ts

@@ -1,3 +1,7 @@
+import {int} from "./number";
+
 export interface WhitelistFilter {
   tags?: string[];
+  minimumEndorsements?: int;
+  minimumGuarantors?: int;
 }