feat(fire): post user details to guestbook if logged in

Author: beeman

apps/fire/src/app/fire/components/message-form/message-form.component.ts

@@ -5,29 +5,36 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   template: `
     <div class="my-3 py-3">
       <div class="input-group input-xl">
+        <div class="input-group-prepend" *ngIf="user">
+          <button class="btn btn-secondary">
+            <ui-avatar [image]="user.avatar" size="sm"></ui-avatar>
+          </button>
+        </div>
         <input type="text"
                class="form-control"
                placeholder="Type a message 🚀 "
                [(ngModel)]="message"
                (keydown.enter)="sendMessage()">
-        <div class="input-group-append">
-          <button type="button"
-                  class="btn btn-secondary"
-                  (click)="sendMessage()">
-            <i class="fe fe-send"></i>
-          </button>
-        </div>
+          <div class="input-group-append">
+            <button type="button"
+                    class="btn btn-secondary"
+                    (click)="sendMessage()">
+              <i class="fe fe-send"></i>
+            </button>
+          </div>
       </div>
     </div>
   `,
   styles: []
 })
 export class MessageFormComponent {
   @Input() message = ''
+  @Input() user = ''
   @Output() action = new EventEmitter()
 
   sendMessage() {
-    this.action.emit({ type: 'ADD', payload: this.message })
+    const payload = { message: this.message, user: this.user }
+    this.action.emit({ type: 'ADD', payload })
     this.message = ''
   }
 }

apps/fire/src/app/fire/components/message-list/message-list.component.ts

@@ -12,7 +12,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
       <div class="list-group-item list-group-ixtem-action mb-3"
            *ngFor="let message of messages">
 
-        <app-message [message]="message" (action)="handleAction($event)"></app-message>
+        <app-message [user]="user" [message]="message" (action)="handleAction($event)"></app-message>
 
       </div>
     </div>
@@ -21,6 +21,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 })
 export class MessageListComponent {
   @Input() public messages = [];
+  @Input() public user;
   @Output() public action = new EventEmitter();
 
   handleAction($event) {

apps/fire/src/app/fire/components/message/message.component.ts

@@ -4,11 +4,16 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   selector: 'app-message',
   template: `
     <div>
+      <ui-avatar class="float-left ml-0 mr-3" 
+        *ngIf="message.user" [image]="message.user.avatar" size="sm"></ui-avatar>
+      <ui-avatar class="float-left ml-0 mr-3"
+                 *ngIf="!message.user" text="?" size="sm"></ui-avatar>
       <div class="float-right">
         <span class="text-muted my-4">
           {{message.created | date: 'short' }}
         </span>
         <a class="text-danger ml-2"
+           *ngIf="user && message.user && message.user.id === user.id"
            (click)="deleteMessage(message.id)">
           <i class="fa fa-trash"></i>
         </a>
@@ -20,6 +25,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class MessageComponent {
   @Input() public message;
+  @Input() public user;
   @Output() action = new EventEmitter()
   deleteMessage(id) {
     this.action.emit({ type: 'DELETE', payload: id })

apps/fire/src/app/fire/containers/guestbook/guestbook.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AuthService } from '../../../auth/services/auth.service';
 import { FireService } from '../../services/fire.service';
 
 @Component({
@@ -11,23 +12,25 @@ import { FireService } from '../../services/fire.service';
 
     <app-message-form
       [message]="message"
+      [user]="auth.user$ | async"
       (action)="handleAction($event)">
     </app-message-form>
 
     <app-message-list
       [messages]="fire.collection$ | async"
+      [user]="auth.user$ | async"
       (action)="handleAction($event)">
     </app-message-list>
   `,
 })
 export class GuestbookComponent {
-
   public message = ''
 
-  constructor(public fire: FireService) {}
+  constructor(public auth: AuthService, public fire: FireService) {}
 
-  addMessage(message: string) {
-    this.fire.upsert({ message })
+  addMessage({ message, user }) {
+    console.log('addMessage', message, user)
+    this.fire.upsert({ message, user })
       .subscribe(() => console.log('Item added'))
   }
 
@@ -36,7 +39,7 @@ export class GuestbookComponent {
       .subscribe(() => console.log('Item deleted'))
   }
 
-  handleAction({ type, payload = ''}) {
+  handleAction({ type, payload }) {
     switch (type) {
       case 'ADD':
         return this.addMessage(payload)