frontend #35: add connections and score to user profile

uzh-ase-fs24 · Apr 27, 2024 · c171dd0 · c171dd0
1 parent 12ea7d2
commit c171dd0
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 14 deletions.
diff --git a/src/app/home/tabs/profile/profile.component.html b/src/app/home/tabs/profile/profile.component.html
@@ -52,6 +52,40 @@ <h1 style="font-weight: normal">{{ profile.firstName }} {{ profile.lastName }}</
           <div class="ion-text-start">{{ profile.bio }}</div>
         </ion-label>
       </div>
+      <div class="ion-padding-horizontal ion-padding-top ion-margin-horizontal center-container"
+           style="display: flex; align-items: flex-end">
+        <div class="ion-padding-horizontal">
+          <ion-label class="ion-text-center">
+            <ion-chip color="warning">
+              <div style="display: flex; align-items: center">
+                <ion-icon class="ion-padding-end" name="trophy-outline"></ion-icon>
+                <h2>{{ profile.averageScore || 0 }}</h2>
+              </div>
+            </ion-chip>
+            <p>Score</p>
+          </ion-label>
+        </div>
+        @if (connections$ | async; as connections) {
+          <div class="center-container">
+            <div class="ion-padding-horizontal">
+              <ion-label class="ion-text-center">
+                <h1>
+                  {{ connections.followers.length }}
+                </h1>
+                <p>followers</p>
+              </ion-label>
+            </div>
+            <div class="ion-padding-horizontal">
+              <ion-label class="ion-text-center">
+                <h1>
+                  {{ connections.following.length }}
+                </h1>
+                <p>following</p>
+              </ion-label>
+            </div>
+          </div>
+        }
+      </div>
     }
   } @else {
     <div class="center-container">

diff --git a/src/app/home/tabs/profile/profile.component.ts b/src/app/home/tabs/profile/profile.component.ts
@@ -3,7 +3,7 @@ import { Component, DestroyRef, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AuthService } from '@auth0/auth0-angular';
-import { IonButton, IonIcon, IonInput, IonItem, IonLabel, IonSpinner } from '@ionic/angular/standalone';
+import { IonButton, IonChip, IonIcon, IonInput, IonItem, IonLabel, IonSpinner } from '@ionic/angular/standalone';
 import { catchError, EMPTY, tap } from 'rxjs';
 import { UserForm } from 'src/app/model/user';
 import { ProfileApiService } from 'src/app/services/api/profile-api.service';
@@ -23,6 +23,7 @@ import { UserFormComponent } from 'src/app/shared/user-form/user-form.component'
 		IonIcon,
 		IonLabel,
 		FormsModule,
+		IonChip,
 		ReactiveFormsModule,
 		UserFormComponent,
 		CommonModule
@@ -39,6 +40,7 @@ export class ProfileComponent {
 	// Class variables
 	updateProfileView = signal(false);
 	profile$ = this.profileApiService.getProfile().pipe(takeUntilDestroyed());
+	connections$ = this.profileApiService.getConnections().pipe(takeUntilDestroyed());
 
 	constructor() {}
 

diff --git a/src/app/model/user.ts b/src/app/model/user.ts
@@ -3,13 +3,25 @@ export type User = {
 	firstName: string;
 	lastName: string;
 	bio: string;
+	averageScore: number;
 };
 
 export type UserDto = {
 	username: string;
 	first_name: string;
 	last_name: string;
 	bio: string;
+	average_score: number;
+};
+
+export type UserConnectionsDto = {
+	following: UserDto[];
+	followers: UserDto[];
+};
+
+export type UserConnections = {
+	following: User[];
+	followers: User[];
 };
 
 export type UserFormDto = {

diff --git a/src/app/services/api/profile-api.service.ts b/src/app/services/api/profile-api.service.ts
@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { map, Observable, of } from 'rxjs';
-import { User, UserDto, UserForm, UserFormDto } from 'src/app/model/user';
+import { map, Observable, of, switchMap } from 'rxjs';
+import { User, UserConnections, UserConnectionsDto, UserDto, UserForm, UserFormDto } from 'src/app/model/user';
 import { environment } from 'src/environments/environment';
 import { AuthService } from '../auth/auth.service';
 
@@ -34,16 +34,7 @@ export class ProfileApiService {
 	}
 
 	postProfile(user: UserFormDto): Observable<User> {
-		return this.http.post<UserDto>(environment.api.url + '/users', user).pipe(
-			map((user) => {
-				return {
-					username: user.username,
-					firstName: user.first_name,
-					lastName: user.last_name,
-					bio: user.bio
-				};
-			})
-		);
+		return this.http.post<UserDto>(environment.api.url + '/users', user).pipe(map((dto) => this.mapDtoToUser(dto)));
 	}
 
 	updateProfile(user: UserForm): Observable<User> {
@@ -56,12 +47,29 @@ export class ProfileApiService {
 			.pipe(map((dto) => this.mapDtoToUser(dto)));
 	}
 
+	getConnections(username?: string): Observable<UserConnections> {
+		return this.auth.user$.pipe(
+			switchMap((profile) => {
+				const user = username || profile?.['https://findme.ch/username'];
+				return this.http.get<UserConnectionsDto>(environment.api.url + `/users/${user}/follow`).pipe(
+					map((dto) => {
+						return {
+							following: dto.following.map((userDto) => this.mapDtoToUser(userDto)),
+							followers: dto.followers.map((userDto) => this.mapDtoToUser(userDto))
+						};
+					})
+				);
+			})
+		);
+	}
+
 	private mapDtoToUser(dto: UserDto): User {
 		return {
 			username: dto.username,
 			firstName: dto.first_name,
 			lastName: dto.last_name,
-			bio: dto.bio
+			bio: dto.bio,
+			averageScore: dto.average_score
 		};
 	}
 }