Implement basic chatroom using `naive-client`

4 files changed, 53 insertions, 27 deletions

diff --git a/sample-apps/angular-chat/src/app/app.component.html b/sample-apps/angular-chat/src/app/app.component.html
index 5226d57..1e28015 100644
--- a/sample-apps/angular-chat/src/app/app.component.html
+++ b/sample-apps/angular-chat/src/app/app.component.html
@@ -1,20 +1,18 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<div>
+  <form>
+    <label>Username</label>
+    <input type="text" name="user-id" [(ngModel)]="userId" />
+    <button (click)="makeChatRoom()">Make Chat Room</button>
+  </form>
+  <form>
+    <label>Message</label>
+    <input type="text" name="message" [(ngModel)]="messageBuff" />
+    <button (click)="sendMessage()">Send</button>
+  </form>
 
+  <ul>
+    <li *ngFor="let chatMessage of (messages$ | async)">
+      {{chatMessage.message}}
+    </li>
+  </ul>
+</div>
diff --git a/sample-apps/angular-chat/src/app/app.component.ts b/sample-apps/angular-chat/src/app/app.component.ts
index bb844c1..8048476 100644
--- a/sample-apps/angular-chat/src/app/app.component.ts
+++ b/sample-apps/angular-chat/src/app/app.component.ts
@@ -1,6 +1,9 @@
 import { Component } from '@angular/core'
 
+import { Observable } from 'rxjs'
+
 import { MessagingService } from './messaging.service'
+import { ChatMessage } from './chat-message.model'
 
 @Component({
   selector: 'app-root',
@@ -8,6 +11,22 @@ import { MessagingService } from './messaging.service'
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor(private MessagingService) {}
-  title = 'angular-chat'
+  userId: string = ''
+  chatRoomId: string
+  messages$: Observable<ChatMessage[]>
+  messageBuff: string
+  constructor(private messaging: MessagingService) {}
+
+  ngOnInit() {
+    this.messaging.init()
+  }
+
+  sendMessage() {
+    this.messaging.sendMessage(this.userId, this.chatRoomId, this.messageBuff)
+  }
+
+  async makeChatRoom() {
+    this.chatRoomId = await this.messaging.makeChatRoom(this.userId)
+    this.messages$ = this.messaging.getChatRoom(this.chatRoomId)
+  }
 }
diff --git a/sample-apps/angular-chat/src/app/app.module.ts b/sample-apps/angular-chat/src/app/app.module.ts
index 1e8805c..8072942 100644
--- a/sample-apps/angular-chat/src/app/app.module.ts
+++ b/sample-apps/angular-chat/src/app/app.module.ts
@@ -1,12 +1,13 @@
 import { BrowserModule } from '@angular/platform-browser'
 import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 
 import { AppComponent } from './app.component'
 import { MessagingService } from './messaging.service'
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule],
+  imports: [BrowserModule, FormsModule],
   providers: [MessagingService],
   bootstrap: [AppComponent]
 })
diff --git a/sample-apps/angular-chat/src/app/messaging.service.ts b/sample-apps/angular-chat/src/app/messaging.service.ts
index 4330a23..6c76ca8 100644
--- a/sample-apps/angular-chat/src/app/messaging.service.ts
+++ b/sample-apps/angular-chat/src/app/messaging.service.ts
@@ -2,11 +2,11 @@ import { Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
 
 // TODO use npm/yarn
-import { dbFactory, DatabaseConnection } from '../../../../client/src'
+import { dbFactory, DatabaseConnection } from 'naive-client'
 
 import { ChatMessage } from './chat-message.model'
 
-const wsUrl = 'http://localhost:5001'
+const wsUrl = 'ws://localhost:5001'
 const httpUrl = 'http://localhost:5000'
 
 @Injectable({
@@ -18,6 +18,10 @@ export class MessagingService {
     this.db = dbFactory({ wsUrl, httpUrl })
   }
 
+  init() {
+    return this.db.init()
+  }
+
   async makeChatRoom(userId: string): Promise<string> {
     const chatRoomId = Date.now().toString()
     await this.db.write(`/chatRooms/${chatRoomId}`, {
@@ -29,14 +33,18 @@ export class MessagingService {
 
   getChatRoom(chatRoomId: string): Observable<ChatMessage[]> {
     return Observable.create(observer => {
-      this.db.subscribe(`/chatRooms/${chatRoomId}`, data => observer.next(data))
+      this.db.subscribe(`/chatRooms/${chatRoomId}`, data => {
+        observer.next(Object.values(data))
+      })
     })
   }
 
   sendMessage(userId: string, chatRoomId: string, message: string) {
     return this.db.write(`/chatRooms/${chatRoomId}`, {
-      user: userId,
-      message
+      [Date.now().toString()]: {
+        user: userId,
+        message
+      }
     })
   }
 }