Implement user listing via APIv3 user categories

src/app/api/client.service.ts

@@ -2,7 +2,8 @@ import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {Instance} from "./types/instance";
 import {LazySubject} from "../helpers/lazy-subject";
-import {LevelCategory} from "./types/levels/level-category";
+import {LevelCategory} from "./types/categories/level-category";
+import {UserCategory} from "./types/categories/user-category";
 import {Room} from "./types/rooms/room";
 import {Level} from "./types/levels/level";
 import {ListWithData} from "./list-with-data";
@@ -26,7 +27,8 @@ export const defaultPageSize: number = 40;
 })
 export class ClientService extends ApiImplementation {
   private readonly instance: LazySubject<Instance>;
-  private readonly categories: LazySubject<ListWithData<LevelCategory>>;
+  private readonly levelCategories: LazySubject<ListWithData<LevelCategory>>;
+  private readonly userCategories: LazySubject<ListWithData<UserCategory>>;
   private statistics: LazySubject<Statistics>;
 
   private usersCache: User[] = [];
@@ -36,7 +38,8 @@ export class ClientService extends ApiImplementation {
     this.instance = new LazySubject<Instance>(() => this.http.get<Instance>("/instance"));
     this.instance.tryLoad();
 
-    this.categories = new LazySubject<ListWithData<LevelCategory>>(() => this.http.get<ListWithData<LevelCategory>>("/levels?includePreviews=true"));
+    this.levelCategories = new LazySubject<ListWithData<LevelCategory>>(() => this.http.get<ListWithData<LevelCategory>>("/levels?includePreviews=true"));
+    this.userCategories = new LazySubject<ListWithData<UserCategory>>(() => this.http.get<ListWithData<UserCategory>>("/users?includePreviews=true"));
 
     this.statistics = this.getStatisticsInternal();
   }
@@ -46,7 +49,7 @@ export class ClientService extends ApiImplementation {
   }
 
   getLevelCategories() {
-    return this.categories.asObservable();
+    return this.levelCategories.asObservable();
   }
 
   private getStatisticsInternal() {
@@ -120,6 +123,14 @@ export class ClientService extends ApiImplementation {
     else return this.getUserByUuid(uuid!)
   }
 
+  getUserCategories() {
+    return this.userCategories.asObservable();
+  }
+
+  getUsersInCategory(category: string, skip: number = 0, count: number = defaultPageSize, params: Params | null = null) {
+    return this.http.get<ListWithData<User>>(`/users/${category}`, {params: this.setPageQuery(params, skip, count)});
+  }
+
   getActivityPage(skip: number = 0, count: number = defaultPageSize) {
     return this.http.get<ActivityPage>(`/activity`, {params: this.createPageQuery(skip, count)});
   }

src/app/api/types/levels/level-category.ts → src/app/api/types/categories/category.ts

@@ -1,13 +1,11 @@
-import {Level} from "./level";
 import {IconName} from "@fortawesome/free-solid-svg-icons";
 
-export interface LevelCategory {
+export interface Category {
     apiRoute: string;
     requiresUser: boolean;
     name: string;
     description: string;
     iconHash: string;
     fontAwesomeIcon: IconName;
-    previewLevel: Level | undefined;
     hidden: boolean;
-}
+}

src/app/api/types/categories/level-category.ts

@@ -0,0 +1,6 @@
+import {Category} from "./category";
+import {Level} from "../levels/level";
+
+export interface LevelCategory extends Category {
+    previewLevel: Level | undefined;
+}

src/app/api/types/categories/user-category.ts

@@ -0,0 +1,6 @@
+import {Category} from "./category";
+import {User} from "../users/user";
+
+export interface UserCategory extends Category {
+    previewItem: User | undefined;
+}

src/app/app.routes.ts

@@ -9,13 +9,13 @@ export const routes: Routes = [
     },
     {
         path: 'levels',
-        loadComponent: () => import('./pages/categories/categories.component').then(x => x.CategoriesComponent),
+        loadComponent: () => import('./pages/categories/level-categories.component').then(x => x.LevelCategoriesComponent),
         data: {title: "Level Categories"}
     },
     {
         path: 'levels/:category',
         loadComponent: () => import('./pages/level-listing/level-listing.component').then(x => x.LevelListingComponent),
-        data: {title: "Category"}
+        data: {title: "Level Listing"}
     },
     {
         path: 'level/:id/:slug',
@@ -65,6 +65,16 @@ export const routes: Routes = [
         loadComponent: () => import('./pages/user/user.component').then(x => x.UserComponent),
         data: {title: "User Page"},
     },
+    {
+        path: 'users',
+        loadComponent: () => import('./pages/categories/user-categories-component').then(x => x.UserCategoriesComponent),
+        data: {title: "User Categories"},
+    },
+    {
+        path: 'users/:category',
+        loadComponent: () => import('./pages/user-listing/user-listing.component').then(x => x.UserListingComponent),
+        data: {title: "User Listing"},
+    },
     {
         path: 'u/:uuid',
         loadComponent: () => import('./pages/user/user.component').then(x => x.UserComponent),

src/app/components/items/level-category.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {LevelCategory} from "../../api/types/levels/level-category";
+import {LevelCategory} from "../../api/types/categories/level-category";
 import {ContainerComponent} from "../ui/container.component";
 import {RouterLink} from "@angular/router";
 import {FaIconComponent} from "@fortawesome/angular-fontawesome";