#186 #187 add error and loading view for chats

src/app/features/chat/common/services/chat.store.ts

@@ -85,6 +85,9 @@ export class ChatStore
     (state) => state.messages
   );
   readonly ownProfileId$ = this.select((state) => state.ownProfileId);
+  readonly conversationsFetchState$ = this.select(
+    (state) => state.conversationsFetchState
+  );
   readonly initialFetchCompleted$ = this.select(
     (state) => state.conversationsFetchState === 'complete'
   );

src/app/features/chat/page/chat-page/chat-page.component.html

@@ -1,39 +1,71 @@
-<div class="m-10">
+<!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
+<div
+  *ngIf="chatStore.conversationsFetchState$ | async as fetchState"
+  class="m-10"
+>
   <h1 class="page-header">Deine Chats</h1>
 
-  <ng-container
-    *ngIf="
-      (chatStore.hasNoConversations$ | async) === false;
-      else noConversations
-    "
-  >
-    <div class="flex h-[600px] border">
-      <app-chat-conversation-list
-        class="flex-none overflow-y-auto"
-      ></app-chat-conversation-list>
-      <div class="flex w-full flex-col bg-gray-100">
-        <app-chat-messages class="grow"></app-chat-messages>
-        <app-chat-message-composer
-          class="flex-none"
-        ></app-chat-message-composer>
+  <ng-container *ngIf="fetchState === 'complete'">
+    <ng-container
+      *ngIf="
+        (chatStore.hasNoConversations$ | async) === false;
+        else noConversations
+      "
+    >
+      <div class="flex h-[600px] border">
+        <app-chat-conversation-list
+          class="flex-none overflow-y-auto"
+        ></app-chat-conversation-list>
+        <div class="flex w-full flex-col bg-gray-100">
+          <app-chat-messages class="grow"></app-chat-messages>
+          <app-chat-message-composer
+            class="flex-none"
+          ></app-chat-message-composer>
+        </div>
+      </div>
+    </ng-container>
+  </ng-container>
+
+  <ng-template #noConversations>
+    <div class="">
+      <h1 class="font-bold">Du hast noch keine Chats</h1>
+      <p class="text-gray-500">
+        Schau dir die Profile anderer Nutzer an und schreibe ihnen eine
+        Nachricht.
+      </p>
+      <!--    Button zu der Empfehlungsseite -->
+      <div class="my-4">
+        <a
+          class="rounded bg-blue-500 py-2 px-4 font-bold text-white no-underline hover:bg-blue-700"
+          routerLink="/recommendations"
+          >Zurück zur Übersicht</a
+        >
       </div>
     </div>
+  </ng-template>
+
+  <ng-container *ngIf="fetchState === 'error'">
+    <app-alert alertType="error" icon="error">
+      <p>
+        Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.
+      </p>
+    </app-alert>
   </ng-container>
-</div>
 
-<ng-template #noConversations>
-  <div class="">
-    <h1 class="font-bold">Du hast noch keine Chats</h1>
-    <p class="text-gray-500">
-      Schau dir die Profile anderer Nutzer an und schreibe ihnen eine Nachricht.
-    </p>
-    <!--    Button zu der Empfehlungsseite -->
-    <div class="my-4">
-      <a
-        class="rounded bg-blue-500 py-2 px-4 font-bold text-white no-underline hover:bg-blue-700"
-        routerLink="/recommendations"
-        >Zurück zur Übersicht</a
-      >
+  <ng-container *ngIf="fetchState === 'loading'">
+    <div class="flex rounded border bg-gray-100">
+      <div class="w-[300px] flex-col">
+        <div *ngFor="let _ of [].constructor(4)" class="flex items-center">
+          <div
+            class="m-4 h-16 w-16 animate-pulse rounded-full bg-gray-400"
+          ></div>
+          <div class="flex flex-grow flex-col gap-2 px-4 py-2">
+            <div class="h-6 w-full animate-pulse rounded bg-gray-400"></div>
+            <div class="h-4 w-3/4 animate-pulse rounded bg-gray-300"></div>
+          </div>
+        </div>
+        <div></div>
+      </div>
     </div>
-  </div>
-</ng-template>
+  </ng-container>
+</div>

src/app/features/chat/page/chat-page/chat-page.component.ts

@@ -28,27 +28,4 @@ export class ChatPageComponent implements OnInit {
         this.chatStore.openConversation(params['participantId']);
       });
   }
-
-  // chatData$!: Observable<ChatData>;
-  //
-  // constructor(
-  //   public chatService: ChatService,
-  //   public profileService: ProfileService
-  // ) {}
-  // ngOnInit(): void {
-  //   this.chatData$ = combineLatest([
-  //     this.chatService.chats$,
-  //     this.chatService.dancers$,
-  //     this.profileService.profile$,
-  //   ]).pipe(map(([chats, dancers, profile]) => ({ chats, dancers, profile })));
-  // }
-  //
-  // ngOnDestroy(): void {
-  //   this.chatService.stopPollingForMessages();
-  // }
-  //
-  // selectChat(chatId: string): void {
-  //   this.chatService.setSelectedChatId(chatId);
-  //   this.chatService.pollForNewMessages();
-  // }
 }