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

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: [
  {