STEP7 チャットの実装

Author: rdlabo

src/app/shared/firestore.service.ts

@@ -1,18 +1,52 @@
 import { Injectable } from '@angular/core';
-import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
-import { first } from 'rxjs/operators';
+import { AngularFirestore, AngularFirestoreDocument,
+  AngularFirestoreCollection } from '@angular/fire/firestore';
+import { Observable } from 'rxjs';
+import { first, concatMap } from 'rxjs/operators';
 
 export interface IUser {
   displayName: string;
   photoDataUrl: string;
 }
 
+export interface IMessage {
+  uid: string;
+  message: string;
+  timestamp: number;
+}
+
+export interface IChat extends IUser, IMessage {}
+
 @Injectable({
   providedIn: 'root'
 })
 export class FirestoreService {
   userDoc: AngularFirestoreDocument<IUser>;
-  constructor(public af: AngularFirestore) { }
+  messageCollection: AngularFirestoreCollection<IMessage>;
+  userCollection: AngularFirestoreCollection<IUser>;
+
+  constructor(public af: AngularFirestore) {
+    this.messageCollection = this.af.collection <
+      IMessage
+      >('chat', ref => ref.orderBy('timestamp', 'desc'));
+    this.userCollection = this.af.collection<IUser>('users');
+  }
+
+  messageAdd(message: IMessage) {
+    return this.messageCollection.add(message);
+  }
+
+  chatInit(): Observable<IChat[]> {
+    return this.messageCollection.valueChanges( {idField: 'messageId'} )
+      .pipe(concatMap(async message => {
+        const users = await this.userCollection.valueChanges( {idField: 'uid'} )
+          .pipe(first()).toPromise(Promise);
+        return message.map(message => {
+          const user = users.find(u => u.uid === message.uid);
+          return Object.assign(message, user);
+        });
+      }));
+  }
 
   userInit(uid: string): Promise<IUser> {
     this.userDoc = this.af.doc<IUser>('users/'  + uid);

src/app/tab1/tab1.page.html

@@ -4,12 +4,12 @@
       チャット
     </ion-title>
     <ion-buttons slot="end">
-      <ion-button fill="clear" size="small">送信</ion-button>
+      <ion-button fill="clear" size="small" (click)="postMessage()" [disabled]="!f.form.valid">送信</ion-button>
     </ion-buttons>
   </ion-toolbar>
   <ion-toolbar color="primary" style="padding: 4px 8px">
     <ion-avatar slot="start" style="width: 36px; height: 36px;">
-      <ion-img src="/assets/shapes.svg"></ion-img>
+      <ion-img [src]="user?.photoDataUrl || '/assets/shapes.svg'"></ion-img>
     </ion-avatar>
     <form #f=ngForm>
       <ion-textarea class="ion-margin-start" autoGrow="true" rows="1"
@@ -20,15 +20,15 @@
 
 <ion-content>
   <ion-list class="ion-padding-top">
-    <ion-item lines="none" *ngFor="let m of [1,2,3,4,5]">
+    <ion-item lines="none" *ngFor="let c of chat | async; trackBy: trackByFn">
       <ion-avatar slot="start">
-        <ion-img src="/assets/shapes.svg" *ngIf="m !== 3"></ion-img>
+        <ion-img [src]="c.photoDataUrl" *ngIf="c.uid !== uid"></ion-img>
       </ion-avatar>
       <ion-label class="ion-padding ion-text-wrap"
                  style="background-color: var(--ion-color-light-tint); border-radius: 12px;"
-                 [class.ion-margin-end]="m !== 3" [class.ion-margin-start]="m === 3">
-        <div class="ion-text-nowrap"><strong>表示名</strong></div>
-        メッセージ
+                 [class.ion-margin-end]="c.uid !== uid" [class.ion-margin-start]="c.uid === uid">
+        <div class="ion-text-nowrap"><strong>{{c.displayName}}</strong></div>
+        {{c.message}}
       </ion-label>
     </ion-item>
   </ion-list>

src/app/tab1/tab1.page.ts

@@ -2,7 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { ProfilePage } from '../shared/profile/profile.page';
 import { AuthService } from '../auth/auth.service';
-import { FirestoreService } from '../shared/firestore.service';
+import { FirestoreService, IChat, IUser } from '../shared/firestore.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-tab1',
@@ -11,6 +12,9 @@ import { FirestoreService } from '../shared/firestore.service';
 })
 export class Tab1Page implements OnInit {
   message = '';
+  uid: string;
+  user: IUser;
+  chat: Observable<IChat[]>;
   constructor(
     public modalController: ModalController,
     public auth: AuthService,
@@ -25,5 +29,27 @@ export class Tab1Page implements OnInit {
       });
       await modal.present();
     }
+    this.chat = this.firestore.chatInit();
+  }
+
+  async ionViewWillEnter() {
+    this.uid = this.auth.getUserId();
+    this.user = await this.firestore.userInit(this.uid);
+  }
+
+  postMessage() {
+    if (!this.user) {
+      alert('プロフィール登録が必要です');
+      return;
+    }
+    this.firestore.messageAdd({
+      uid: this.uid,
+      message: this.message,
+      timestamp: Date.now(),
+    });
+  }
+
+  trackByFn(index, item) {
+    return item.messageId;
   }
 }