Merge pull request #185 from Toastbrot236/user-heart

Ability to heart users

Author: Toastbrot236

src/app/api/client.service.ts

@@ -182,4 +182,12 @@ export class ClientService extends ApiImplementation {
   uploadAsset(hash: string, data: ArrayBuffer) {
     return this.http.post<Asset>(`/assets/${hash}`, data);
   }
+
+  setUserAsHearted(uuid: string) {
+    return this.http.post<Response>(`/users/uuid/${uuid}/heart`, null);
+  }
+
+  setUserAsUnhearted(uuid: string) {
+    return this.http.post<Response>(`/users/uuid/${uuid}/unheart`, null);
+  }
 }

src/app/api/types/users/user-relations.ts

@@ -0,0 +1,3 @@
+export interface UserRelations {
+    isHearted: boolean;
+}

src/app/api/types/users/user.ts

@@ -1,4 +1,5 @@
 import {Room} from "../rooms/room";
+import { UserRelations } from "./user-relations";
 import {UserStatistics} from "./user-statistics";
 
 export interface User {
@@ -13,4 +14,5 @@ export interface User {
 
     statistics: UserStatistics;
     activeRoom: Room | undefined;
+    ownRelations: UserRelations | undefined;
 }

src/app/components/ui/layouts/fancy-header-user-buttons.component.ts

@@ -0,0 +1,96 @@
+import { Component, Input, TemplateRef, ViewChild } from "@angular/core";
+import { BannerService } from "../../../banners/banner.service";
+import { ExtendedUser } from "../../../api/types/users/extended-user";
+import { ClientService } from "../../../api/client.service";
+import { ButtonOrNavItemComponent } from "../form/button-or-navitem.component";
+import { faHeart, faHeartCrack } from "@fortawesome/free-solid-svg-icons";
+import { FancyHeaderButtonsComponent } from "./fancy-header-buttons.component";
+import { User } from "../../../api/types/users/user";
+import { UserRelations } from "../../../api/types/users/user-relations";
+import { RefreshApiError } from "../../../api/refresh-api-error";
+
+@Component({
+    selector: 'app-fancy-header-user-buttons',
+    imports: [
+    ButtonOrNavItemComponent,
+    FancyHeaderButtonsComponent,
+],
+    template: `
+        <ng-template #heartButtonTemplate let-templateHasText="hasText" let-templateIsNavItem="isNavItem">
+            <app-button-or-navitem
+                text="Heart"
+                [icon]="faHeart"
+                color="bg-pink"
+            
+                textAlt="Unheart"
+                [iconAlt]="faHeartCrack"
+                colorAlt="bg-secondary"
+
+                [state]="relations.isHearted"
+                (click)="heartButtonClick()"
+
+                [hasText]="templateHasText"
+                [isNavItem]="templateIsNavItem"> 
+            </app-button-or-navitem>
+        </ng-template>
+
+        @if (buttonsInitialized) {
+            <app-fancy-header-buttons 
+                [buttonTemplateRefs]="buttonTemplateRefs">
+            </app-fancy-header-buttons>
+        }
+    `,
+    styles: ``
+})
+
+export class FancyHeaderUserButtonsComponent {
+    @Input({required: true}) public targetUser: User = undefined!;
+    @Input({required: true}) public ownUser: ExtendedUser = undefined!;
+    @Input({required: true}) public relations: UserRelations = undefined!;
+
+    @ViewChild('heartButtonTemplate') heartButtonTemplateRef!: TemplateRef<any>;
+    
+    buttonTemplateRefs: TemplateRef<any>[] = [];
+    buttonsInitialized: boolean = false;
+
+    constructor(private client: ClientService, private bannerService: BannerService) {}
+
+    ngAfterViewInit() {
+        // Heart Button
+        if (this.ownUser.userId !== this.targetUser.userId) {
+            this.buttonTemplateRefs.push(this.heartButtonTemplateRef);
+        }
+
+        // TODO: Other buttons, such as an edit button for mods
+
+        this.buttonsInitialized = true;
+    }
+
+    async heartButtonClick() {
+        if (this.relations.isHearted) {
+            this.client.setUserAsUnhearted(this.targetUser.userId).subscribe({
+                error: error => {
+                    const apiError: RefreshApiError | undefined = error.error?.error;
+                    this.bannerService.warn("Failed to unheart user", apiError == null ? error.message : apiError.message);
+                },
+                next: _ => {
+                    this.relations.isHearted = false;
+                }
+            });
+        }
+        else {
+            this.client.setUserAsHearted(this.targetUser.userId).subscribe({
+                error: error => {
+                    const apiError: RefreshApiError | undefined = error.error?.error;
+                    this.bannerService.warn("Failed to heart user", apiError == null ? error.message : apiError.message);
+                },
+                next: _ => {
+                    this.relations.isHearted = true;
+                }
+            });
+        }
+    }
+
+    protected readonly faHeart = faHeart; 
+    protected readonly faHeartCrack = faHeartCrack;
+}

src/app/pages/user/user.component.html

@@ -11,5 +11,11 @@
             <app-user-status [activeRoom]="user.activeRoom" [lastSeen]="user.lastLoginDate"></app-user-status>
         </ng-container>
         <app-user-statistics [stats]="user.statistics" statistics></app-user-statistics>
+        @if(ownUser && relations && !isMobile) {
+            <app-fancy-header-user-buttons [targetUser]="user" [ownUser]="ownUser" [relations]="relations" buttonArea></app-fancy-header-user-buttons>
+        }
+        @else if(ownUser && relations && isMobile) {
+            <app-fancy-header-user-buttons [targetUser]="user" [ownUser]="ownUser" [relations]="relations" buttonAreaMobile></app-fancy-header-user-buttons>
+        }
     </app-fancy-header>
 }

src/app/pages/user/user.component.ts

@@ -11,32 +11,49 @@ import {FancyHeaderComponent} from "../../components/ui/layouts/fancy-header.com
 import {LayoutService} from "../../services/layout.service";
 import {UserStatusComponent} from "../../components/ui/info/user-status.component";
 import {UserStatisticsComponent} from "../../components/items/user-statistics.component";
+import { UserRelations } from '../../api/types/users/user-relations';
+import { FancyHeaderUserButtonsComponent } from "../../components/ui/layouts/fancy-header-user-buttons.component";
+import { ExtendedUser } from '../../api/types/users/extended-user';
+import { AuthenticationService } from '../../api/authentication.service';
 
 @Component({
     selector: 'app-user',
     imports: [
-        DefaultPipe,
-        UserAvatarComponent,
-        DateComponent,
-        FancyHeaderComponent,
-        AsyncPipe,
-        UserStatusComponent,
-        UserStatisticsComponent
-    ],
+    DefaultPipe,
+    UserAvatarComponent,
+    DateComponent,
+    FancyHeaderComponent,
+    AsyncPipe,
+    UserStatusComponent,
+    UserStatisticsComponent,
+    FancyHeaderUserButtonsComponent
+],
     templateUrl: './user.component.html',
     styles: ``
 })
 export class UserComponent {
   user: User | undefined | null;
+  relations: UserRelations | undefined;
+  protected ownUser: ExtendedUser | undefined;
+  protected isMobile: boolean = false;
 
-  constructor(private title: TitleService, private client: ClientService, route: ActivatedRoute, protected layout: LayoutService) {
+  constructor(private auth: AuthenticationService, private client: ClientService, route: ActivatedRoute, protected layout: LayoutService) {
     route.params.subscribe(params => {
       const username: string | undefined = params['username'];
       const uuid: string | undefined = params['uuid'];
 
       this.client.getUserByEitherLookup(username, uuid).subscribe(user => {
         this.user = user;
-      })
-    })
+        this.relations = user.ownRelations;
+
+        this.auth.user.subscribe(user => {
+          if(user) {
+            this.ownUser = user;
+          }
+        });
+      });
+    });
+
+    this.layout.isMobile.subscribe(v => this.isMobile = v);
   }
 }