recommendation: cache results, make "show more" button functional

chat: modify services to use changed endpoints/payloads

src/app/chat/data-access/chat-http.service.ts

@@ -16,7 +16,7 @@ import {
   DancerId,
   DancerMapDto,
   MessageResponse,
-  MessageResponseWithChatId,
+  MessagesWithChatId,
 } from './chat.types';
 import { OwnProfileService } from '@shared/data-access/profile/own-profile.service';
 
@@ -62,12 +62,7 @@ export class ChatHttpService {
   }
 
   getChats$(): Observable<ChatDto[]> {
-    return (
-      this.http
-        // .get<ChatList>('/chats', this.defaultOptions)
-        .get<ChatList>(this.chatApiUrl, this.defaultOptions)
-        .pipe(map((chatList) => chatList.chats || []))
-    );
+    return this.http.get<ChatDto[]>(this.chatApiUrl, this.defaultOptions);
   }
 
   getDancers$(dancerIds: string[]): Observable<DancerMapDto> {
@@ -142,7 +137,7 @@ export class ChatHttpService {
   getMessages$(
     chatId: string,
     lastMessageId: string | null | undefined = null
-  ): Observable<MessageResponseWithChatId> {
+  ): Observable<MessagesWithChatId> {
     let params = {};
     if (lastMessageId !== null && lastMessageId !== undefined) {
       params = {
@@ -157,15 +152,15 @@ export class ChatHttpService {
       .pipe(
         map((messageResponse) => ({
           chatId,
-          ...messageResponse,
+          messages: messageResponse,
         }))
       );
   }
 
   private getAllDancerIds(chats: ChatDto[]): DancerId[] {
     const dancerIds = new Map();
     chats
-      .flatMap((chat) => chat.dancerIds)
+      .flatMap((chat) => chat.participantIds)
       .forEach((dancerId) => {
         if (!dancerIds.has(dancerId)) {
           dancerIds.set(dancerId, true);
@@ -176,8 +171,7 @@ export class ChatHttpService {
 
   createChat$(participantId: string): Observable<CreateChatResponse> {
     const body = {
-      dancerIds: [this.profileService.getProfile()?.id, participantId],
-      type: 'DIRECT',
+      participantIds: [this.profileService.getProfile()?.id, participantId],
     };
 
     return this.http.post<CreateChatResponse>(

src/app/chat/data-access/chat-state.adapter.ts

@@ -4,7 +4,7 @@ import {
   ChatDto,
   CreateChatResponse,
   DancerMapDto,
-  MessageResponseWithChatId,
+  MessagesWithChatId,
 } from './chat.types';
 import { HttpErrorResponse } from '@angular/common/http';
 
@@ -17,7 +17,9 @@ export const chatStateAdapter = createAdapter<ChatAdaptState>()({
       )
       .map((chatDto) => ({
         id: chatDto.chatId,
-        participants: chatDto.dancerIds.map((dancerId) => ({ id: dancerId })),
+        participants: chatDto.participantIds.map((dancerId) => ({
+          id: dancerId,
+        })),
         messages: [],
       }));
 
@@ -57,10 +59,7 @@ export const chatStateAdapter = createAdapter<ChatAdaptState>()({
     activeChatId: chatId,
   }),
 
-  chatMessagesFetched: (
-    state,
-    { messages, chatId }: MessageResponseWithChatId
-  ) => ({
+  chatMessagesFetched: (state, { messages, chatId }: MessagesWithChatId) => ({
     ...state,
     newMessageSent: false,
     chats: state.chats.map((chat) => {

src/app/chat/data-access/chat.types.ts

@@ -7,9 +7,9 @@ export type Conversation = {
 
 export type ChatDto = {
   chatId: string;
-  dancerIds: DancerId[];
+  participantIds: DancerId[];
   lastActivity: string | null;
-  type: ChatType;
+  createdAt: string;
   lastMessage: ChatMessage | null;
 };
 
@@ -53,11 +53,10 @@ export type ChatsAndDancers = {
   dancerMap: DancerMapDto;
 };
 
-export type MessageResponse = {
-  messages: ChatMessage[];
-};
+export type MessageResponse = ChatMessage[];
 
-export type MessageResponseWithChatId = MessageResponse & {
+export type MessagesWithChatId = {
+  messages: ChatMessage[];
   chatId: string;
 };
 

src/app/recommendation/data-access/recommendation.service.ts

@@ -11,8 +11,9 @@ import { OldAPIResponse } from '@shared/util/http/response.types';
 export class RecommendationService {
   constructor(private httpService: RecommendationHttpService) {}
 
-  getRecommendations$(): Observable<OldAPIResponse<RecommendedDancer[]>> {
-    return this.httpService.getRecommendations$().pipe(
+  private readonly recommendations$ = this.httpService
+    .getRecommendations$()
+    .pipe(
       map((response) => {
         if (response.isSuccess) {
           return {
@@ -24,6 +25,9 @@ export class RecommendationService {
       }),
       shareReplay(1)
     );
+
+  getRecommendations$(): Observable<OldAPIResponse<RecommendedDancer[]>> {
+    return this.recommendations$;
   }
 
   private mapDtoToRecommendedDancers(

src/app/recommendation/recommendations.component.ts

@@ -4,16 +4,15 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { RecommendedDancerComponent } from './ui/recommended-dancer.component';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Router } from '@angular/router';
+import { BehaviorSubject, filter, map, switchMap } from 'rxjs';
 
 @Component({
   selector: 'app-recommendations',
   template: `
     <div>
       <h1 class="page-header">Diese Tänzer könnten für Sie interessant sein</h1>
 
-      <ng-container
-        *ngIf="recommendationsResponse$ | async as response; else loading"
-      >
+      <ng-container *ngIf="visibleDancers$ | async as response; else loading">
         <ng-container *ngIf="response.isSuccess; else error">
           <div class="recommended-dancers">
             <ng-container *ngFor="let recommendedDancer of response.payload">
@@ -25,7 +24,9 @@ import { Router } from '@angular/router';
           </div>
 
           <div class="load-more">
-            <button class="btn-lg btn-secondary">Weitere anzeigen</button>
+            <button class="btn-lg btn-secondary" (click)="showMoreDancers()">
+              Weitere anzeigen
+            </button>
           </div>
         </ng-container>
       </ng-container>
@@ -67,9 +68,32 @@ export class RecommendationsComponent {
   router = inject(Router);
   recommendationsResponse$ = this.recommendationsService.getRecommendations$();
 
+  maxDancers = new BehaviorSubject<number>(10);
+  visibleDancers$ = this.maxDancers.asObservable().pipe(
+    switchMap(() => this.recommendationsResponse$),
+    filter((response) => response.isSuccess),
+    map((response) => {
+      if (response.isSuccess) {
+        const numOfDancers = Math.min(
+          this.maxDancers.getValue(),
+          response.payload.length
+        );
+        return {
+          ...response,
+          payload: response.payload.slice(0, numOfDancers),
+        };
+      }
+      return response;
+    })
+  );
+
   constructor() {}
 
   openPublicProfile(dancerId: string): void {
     this.router.navigate(['profile', 'view', dancerId]);
   }
+
+  showMoreDancers(): void {
+    this.maxDancers.next(this.maxDancers.getValue() + 10);
+  }
 }

src/app/shared/data-access/dancier-backend-mocked.service.ts

@@ -3,7 +3,7 @@ import { Server } from 'miragejs';
 import {
   CreateChatResponse,
   DancerMapDto,
-  MessageResponseWithChatId,
+  MessagesWithChatId,
 } from '../../chat/data-access/chat.types';
 
 const chats = [
@@ -50,7 +50,7 @@ const dancerMap: DancerMapDto = {
   },
 };
 
-const chatMessages: MessageResponseWithChatId = {
+const chatMessages: MessagesWithChatId = {
   chatId: 'chatId',
   messages: [
     {