fix(chat-box): changed chat-box input style to outline

xmlking · Jan 8, 2019 · 69d326d · 69d326d
1 parent 0c2bc18
commit 69d326d
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 104 deletions.
diff --git a/libs/chat-box/src/lib/chat-box.component.html b/libs/chat-box/src/lib/chat-box.component.html
@@ -45,7 +45,7 @@
     </mat-drawer>
     <mat-drawer-content fxFlex="grow" class="body">
       <div
-        *ngFor="let message of (selectedConversation$ | async).messages"
+        *ngFor="let message of (activeConversation$ | async).messages"
         class="message"
         [ngClass]="{ from: message.isIncoming, to: message.isOutgoing }"
       >
@@ -59,7 +59,7 @@
 
   <mat-divider></mat-divider>
 
-  <mat-form-field fxFlex class="input" appearance="legacy" color="primary"  >
+  <mat-form-field fxFlex class="input custom-outline" appearance="outline" color="primary"  >
     <mat-icon matPrefix *ngIf="canUseSpeechRecognition" (click)="startTalkingToBot()">keyboard_voice</mat-icon>
     <input
       #input

diff --git a/libs/chat-box/src/lib/chat-box.component.scss b/libs/chat-box/src/lib/chat-box.component.scss
@@ -115,15 +115,6 @@
       }
     }
   }
-
-  /* Chat Input */
-  .input {
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 5px;
-  }
-  //.input > * {
-  //  width: 100%;
-  //}
 }
 
 /* Chat Content */
@@ -133,3 +124,11 @@
   text-overflow: ellipsis;
 }
 
+/* Custom mat-form-field-outline */
+:host /deep/ mat-form-field.mat-form-field-appearance-outline.custom-outline .mat-form-field-wrapper {
+  padding-bottom: 0;
+  margin: 0;
+  //.mat-form-field-outline {
+  //  display: none;
+  //}
+}
diff --git a/libs/chat-box/src/lib/chat-box.component.ts b/libs/chat-box/src/lib/chat-box.component.ts
@@ -1,22 +1,12 @@
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-  QueryList,
-  ViewChild,
-  ViewChildren,
-} from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { scrollFabAnimation } from '@ngx-starter-kit/animations';
 import { fromEvent, Observable } from 'rxjs';
 import { filter, take, takeUntil } from 'rxjs/operators';
 import { Select, Store } from '@ngxs/store';
 
-import { ChatMessage, Conversation, ModeType } from './chat-message.model';
+import { Conversation } from './chat-message.model';
 import { ChatBoxState } from './state/chat-box.store';
-import { AddMessage, CreateNewConversation, FetchConversations, StartVoiceCommand } from './state/chat-box.actions';
-import { SendMessage } from './state/chat-box.actions';
+import { CreateNewConversation, FetchConversations, SendMessage, StartVoiceCommand } from './state/chat-box.actions';
 
 @Component({
   selector: 'ngx-chat-box',
@@ -31,7 +21,7 @@ export class ChatBoxComponent implements OnInit, OnDestroy {
   @ViewChild('input') input: ElementRef<HTMLInputElement>;
 
   @Select(ChatBoxState.getConversations) conversations$: Observable<Conversation[]>;
-  @Select(ChatBoxState.getSelectedConversation) selectedConversation$: Observable<Conversation>;
+  @Select(ChatBoxState.getActiveConversation) activeConversation$: Observable<Conversation>;
   voices: SpeechSynthesisVoice[];
   canUseSpeechRecognition = false;
   canUseSpeechSynthesis = false;
@@ -45,7 +35,7 @@ export class ChatBoxComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.store.dispatch(new FetchConversations());
     // TODO: only create new Conversation when user select one are more avatars and click +
-    if (!this.store.selectSnapshot(ChatBoxState.getSelectedConversation)) {
+    if (!this.store.selectSnapshot(ChatBoxState.getActiveConversation)) {
       this.store.dispatch(new CreateNewConversation());
     }
   }
@@ -63,7 +53,6 @@ export class ChatBoxComponent implements OnInit, OnDestroy {
   }
 
   async sendMessageToBot() {
-    const selectedConversation = this.store.selectSnapshot(ChatBoxState.getSelectedConversation);
     this.store.dispatch(new SendMessage({ message: this.input.nativeElement.value }));
     this.input.nativeElement.value = '';
     this.focus();

diff --git a/libs/chat-box/src/lib/state/chat-box.actions.ts b/libs/chat-box/src/lib/state/chat-box.actions.ts
@@ -18,7 +18,7 @@ export class CreateNewConversation {
 
 export class SwitchConversation {
   static readonly type = '[ChatBox] SwitchConversation';
-  constructor(public readonly payload: { conversationId: string }) {}
+  constructor(public readonly payload: { conversationId: string | number }) {}
 }
 
 export class SaveConversation {
@@ -33,7 +33,7 @@ export class CloseConversation {
 
 export class AddMessage {
   static readonly type = '[ChatBox] AddMessage';
-  constructor(public readonly payload: { conversationId: string; message: ChatMessage<string> }) {}
+  constructor(public readonly payload: { conversationId: string | number; message: ChatMessage<string> }) {}
 }
 
 export class StartVoiceCommand {

diff --git a/libs/chat-box/src/lib/state/chat-box.store.ts b/libs/chat-box/src/lib/state/chat-box.store.ts
@@ -32,7 +32,6 @@ import {
 
 export class ChatBoxStateModel {
   conversations: Conversation[];
-  selectedConversation: Conversation; // TODO change to activeConversationId
   activeConversationId: string | number;
   canUseSpeechRecognition: boolean;
   canUseSpeechSynthesis: boolean;
@@ -51,7 +50,6 @@ export class ChatBoxStateModel {
   name: 'chatbox',
   defaults: {
     conversations: [],
-    selectedConversation: null,
     activeConversationId: null,
     canUseSpeechRecognition: false,
     canUseSpeechSynthesis: false,
@@ -126,8 +124,8 @@ export class ChatBoxState implements NgxsOnInit {
   }
 
   @Selector()
-  static getSelectedConversation(state: ChatBoxStateModel) {
-    return state.selectedConversation;
+  static getActiveConversation(state: ChatBoxStateModel) {
+    return state.conversations[state.conversations.findIndex(con => con.id === state.activeConversationId)];
   }
 
   @Selector()
@@ -175,37 +173,42 @@ export class ChatBoxState implements NgxsOnInit {
   }
 
   @Action(FetchConversations)
-  fetchConversations({ getState, patchState, setState }: StateContext<ChatBoxStateModel>) {
+  fetchConversations(ctx: StateContext<ChatBoxStateModel>) {
     console.log('fetching open conversations');
-    // return this.chat.fetchInFlightConversations().pipe(tap(res => patchState({ conversations: res })));
+    // return this.chat.fetchInFlightConversations().pipe(
+    //   tap((res: Conversation[]) =>
+    //     produce(ctx, (draft: ChatBoxStateModel) => {
+    //       draft.conversations = res;
+    //     }),
+    //   ),
+    // );
   }
 
   @Action(CreateNewConversation)
   createConversation(ctx: StateContext<ChatBoxStateModel>) {
     const newConversation = new Conversation('payload.conversationId'); // TODO create with UUID. from server?
     produce(ctx, (draft: ChatBoxStateModel) => {
       draft.conversations.push(newConversation);
-      draft.selectedConversation = newConversation;
+      draft.activeConversationId = newConversation.id;
     });
   }
 
   @Action(SwitchConversation)
-  switchConversation(
-    { getState, patchState, setState }: StateContext<ChatBoxStateModel>,
-    { payload }: SwitchConversation,
-  ) {
-    const switchedConversation = getState().conversations.find(con => con.id === payload.conversationId);
+  switchConversation(ctx: StateContext<ChatBoxStateModel>, { payload }: SwitchConversation) {
+    const state = ctx.getState();
+    const switchedConversation =
+      state.conversations[state.conversations.findIndex(con => con.id === state.activeConversationId)];
     if (switchedConversation) {
-      patchState({
-        selectedConversation: switchedConversation,
+      produce(ctx, (draft: ChatBoxStateModel) => {
+        draft.activeConversationId = switchedConversation.id;
       });
     }
   }
 
   @Action(SaveConversation)
-  saveConversation({ getState, patchState, setState }: StateContext<ChatBoxStateModel>, { payload }: SaveConversation) {
+  saveConversation(ctx: StateContext<ChatBoxStateModel>, { payload }: SaveConversation) {
     console.log(`saving conversation ${payload.conversationId}`);
-    // const conversation = getState().conversations.find( con => con.id === payload.conversationId);
+    // const conversation = ctx.getState().conversations[ctx.getState().conversations.findIndex(con => con.id === payload.conversationId)];
     // return this.chat.saveConversation(conversation);
   }
 
@@ -217,7 +220,7 @@ export class ChatBoxState implements NgxsOnInit {
       tap(_ => {
         produce(ctx, (draft: ChatBoxStateModel) => {
           draft.conversations.splice(draft.conversations.findIndex(con => con.id === payload.conversationId), 1);
-          draft.selectedConversation = draft.conversations[draft.conversations.length - 1];
+          draft.activeConversationId = draft.conversations[draft.conversations.length - 1].id;
         });
       }),
     );
@@ -232,29 +235,26 @@ export class ChatBoxState implements NgxsOnInit {
       const convIdx = draft.conversations.findIndex(con => con.id === payload.conversationId);
       const conv = draft.conversations[convIdx];
       draft.conversations[convIdx] = new Conversation(conv.id, [...conv.messages, payload.message]);
-      draft.selectedConversation = draft.conversations[convIdx];
+      draft.activeConversationId = draft.conversations[convIdx].id;
     });
   }
 
   @Action(SendMessage, { cancelUncompleted: true })
-  async sendMessage(
-    { getState, patchState, setState, dispatch }: StateContext<ChatBoxStateModel>,
-    { payload }: SendMessage,
-  ) {
-    dispatch(
+  async sendMessage(ctx: StateContext<ChatBoxStateModel>, { payload }: SendMessage) {
+    ctx.dispatch(
       new AddMessage({
-        conversationId: getState().selectedConversation.id,
+        conversationId: ctx.getState().activeConversationId,
         message: ChatMessage.fromUserMessage(payload.message, ModeType.TYPE),
       }),
     );
   }
 
   @Action(StartVoiceCommand, { cancelUncompleted: true })
-  async startVoiceCommand({ getState, patchState, setState, dispatch }: StateContext<ChatBoxStateModel>) {
+  async startVoiceCommand(ctx: StateContext<ChatBoxStateModel>) {
     const message = await this.stt.getVoiceMessage();
-    dispatch(
+    ctx.dispatch(
       new AddMessage({
-        conversationId: getState().selectedConversation.id,
+        conversationId: ctx.getState().activeConversationId,
         message: ChatMessage.fromUserMessage(message, ModeType.SPEAK),
       }),
     );

diff --git a/package-lock.json b/package-lock.json