chat compile fix. Refactor to firestore and slack module

frontend/src/app/app-routing.module.ts

@@ -16,6 +16,12 @@ const routes: Routes = [
     { path: 'profile', loadChildren: () => import('./profile/profile.module').then((m) => m.ProfileModule) },
   ]),
   Shell.childRoutes([{ path: 'chat', loadChildren: () => import('./chat/chat.module').then((m) => m.ChatModule) }]),
+
+  Shell.childRoutes([{ path: 'chats', loadChildren: () => import('./chat/chat.module').then((m) => m.ChatModule) }]),
+  Shell.childRoutes([
+    { path: 'chats/:id', loadChildren: () => import('./chat/chat.module').then((m) => m.ChatModule) },
+  ]),
+
   Shell.childRoutes([
     {
       path: 'code-reviews',

frontend/src/app/chat/chat.component.html

@@ -1,10 +1,38 @@
-<mat-card>
-  <mat-card-header>
-    <mat-card-title>Chat </mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <ng-container *ngIf="!isLoading"> </ng-container>
+<ng-container *ngIf="chat$ | async as chat">
+  <ng-container *ngIf="true">
+    <!-- auth.user$ | async as user -->
+    <!-- Chat container-->
+    <div fxLayout="column" fxLayoutAlign="center center" style="width: 50%; min-width: 600px; height: 100%">
+      <!-- Header -->
+      <app-chat-header style="width: 100%" [chatId]="chat.id" fxFlex="64px"></app-chat-header>
 
-    <mat-spinner *ngIf="isLoading"></mat-spinner>
-  </mat-card-content>
-</mat-card>
+      <!-- Messages-->
+      <div
+        fxLayout="column"
+        style="
+          width: 100%;
+          overflow-y: scroll;
+          background-color: lightgray;
+          box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
+        "
+      >
+        <ng-container *ngFor="let msg of messages; trackBy: trackByCreated; let i = index">
+          <app-chat-message
+            [msg]="msg"
+            [predecessor]="i - 1 >= 0 ? this.messages[i - 1] : null"
+            [user]="user"
+          ></app-chat-message>
+        </ng-container>
+
+        <!-- "is typing" Indicator
+        <app-typing-indicator
+          [user]="user"
+          [typing]="chat.typing"
+        ></app-typing-indicator>-->
+      </div>
+
+      <!-- Send form and other controls -->
+      <app-chat-controls style="width: 100%" [chatId]="chat.id"></app-chat-controls>
+    </div>
+  </ng-container>
+</ng-container>

frontend/src/app/chat/chat.component.scss

@@ -0,0 +1,3 @@
+img {
+  border-radius: 50%;
+}

frontend/src/app/chat/chat.component.ts

@@ -1,16 +1,65 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
+import { Component, OnInit, Input } from '@angular/core';
+import { FirebaseChatService } from './services/firebase/firebase-chat.service';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+// import { FirebaseAuthService } from './services/firebase/firebase-auth.service';
+import { Message } from './model/message';
+import { Chat } from '@app/chat/model/chat';
 
 @Component({
-  selector: 'app-code-review-list',
+  selector: 'app-chat',
   templateUrl: './chat.component.html',
   styleUrls: ['./chat.component.scss'],
 })
 export class ChatComponent implements OnInit {
-  isLoading: boolean = true;
+  @Input() height: string = '';
+  @Input() width: string = '';
 
-  constructor(private router: Router, private dialog: MatDialog) {}
+  user: any = {};
 
-  ngOnInit() {}
+  chat$?: Observable<any>;
+
+  messages: Message[] = [];
+
+  constructor(
+    public chatService: FirebaseChatService,
+    private route: ActivatedRoute
+  ) // public auth: FirebaseAuthService
+  {}
+
+  ngOnInit() {
+    const chatId: string | null = this.route.snapshot.paramMap.get('id');
+    if (!chatId) return;
+    // TODO: first load already existing history
+    // TODO: listen on changes
+    const source = this.chatService.getHistory(chatId);
+    // this.chat$ = this.chatService.buildChat(source).pipe(
+    //   tap(res => this.integrateNewMessages(res)),
+    //   tap(() => this.scrollBottom())
+    // );
+  }
+
+  private integrateNewMessages(chat: Chat) {
+    const newMessages = chat.messages.filter(
+      (newMessage: Message) => !this.messages.some((message: Message) => this.isSameMessage(message, newMessage))
+    );
+    newMessages.forEach((msg) => this.messages.push(msg));
+  }
+
+  private isSameMessage(message: Message, newMessage: Message): boolean {
+    return (
+      message.content === newMessage.content &&
+      message.uid === newMessage.uid &&
+      message.createdAt === newMessage.createdAt
+    );
+  }
+
+  trackByCreated(index: number, msg: Message) {
+    return msg.createdAt;
+  }
+
+  private scrollBottom() {
+    setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 500);
+  }
 }

frontend/src/app/chat/chat.module.ts

@@ -6,9 +6,12 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MaterialModule } from '@app/material.module';
 import { ChatRoutingModule } from '@app/chat/chat-routing.module';
 import { ChatComponent } from '@app/chat/chat.component';
+import { ChatControlsComponent } from '@app/chat/chat-controls/chat-controls.component';
+import { ChatMessageComponent } from '@app/chat/chat-message/chat-message.component';
+import { ChatHeaderComponent } from '@app/chat/chat-header/chat-header.component';
 
 @NgModule({
   imports: [CommonModule, TranslateModule, FlexLayoutModule, MaterialModule, ChatRoutingModule],
-  declarations: [ChatComponent],
+  declarations: [ChatComponent, ChatControlsComponent, ChatMessageComponent, ChatHeaderComponent],
 })
 export class ChatModule {}

frontend/src/app/chat/model/chat.ts

@@ -0,0 +1,12 @@
+import { Message } from './message';
+
+export interface Chat {
+  id?: string;
+  uid?: string;
+  createdAt: number;
+  count: number;
+  messages: Message[];
+  participants: string[];
+  ownerId: string;
+  typing: string[];
+}

frontend/src/app/chat/model/message.ts

@@ -0,0 +1,13 @@
+import { User } from './user';
+
+export interface Attachment {
+  name: string;
+}
+
+export interface Message {
+  content: string;
+  uid: string;
+  createdAt: number;
+  user: User;
+  attachments: Attachment[];
+}

frontend/src/app/chat/model/user.ts

@@ -0,0 +1,6 @@
+export interface User {
+  uid: string;
+  email: string;
+  displayName: string;
+  photoUrl: string;
+}

frontend/src/app/chat/services/api/api-chat.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiChatService } from './api-chat.service';
+
+describe('ApiChatService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ApiChatService = TestBed.get(ApiChatService);
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/chat/services/api/api-chat.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { ChatBaseService } from '../chat-base.service';
+import { Message } from '../../model/message';
+import { Chat } from '../../model/chat';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ApiChatService extends ChatBaseService {
+  constructor() {
+    super();
+  }
+
+  create(): Promise<boolean> {
+    return undefined;
+  }
+
+  deleteIsTyping(chatId: string): Promise<void> {
+    return undefined;
+  }
+
+  deleteMessage(chat: Chat, msg: Message): Promise<void> {
+    return undefined;
+  }
+
+  getHistory(chatId: string): Observable<any> {
+    return undefined;
+  }
+
+  sendIsTyping(chatId: string): Promise<void> {
+    return undefined;
+  }
+
+  sendMessage(chatId: string, content: string): Promise<void> {
+    return undefined;
+  }
+
+  buildChat(source: Observable<any>) {}
+}

frontend/src/app/chat/services/chat-base.service.ts

@@ -0,0 +1,27 @@
+import { Message } from '../model/message';
+import { Chat } from '../model/chat';
+import { Observable } from 'rxjs';
+import { ServicesConfig } from './services-config';
+import { Injectable, Optional } from '@angular/core';
+
+export abstract class ChatBaseService {
+  constructor(@Optional() config?: ServicesConfig) {
+    if (config) {
+      console.log('Config:', config);
+    }
+  }
+
+  abstract getHistory(chatId: string): Observable<any>;
+
+  // abstract create(): Promise<boolean>;
+  //
+  // abstract sendMessage(chatId: string, content: string): Promise<void>;
+  //
+  // abstract deleteMessage(chat: Chat, msg: Message): Promise<void>;
+  //
+  // abstract sendIsTyping(chatId: string): Promise<void>;
+  //
+  // abstract deleteIsTyping(chatId: string): Promise<void>;
+  //
+  // abstract buildChat(source: Observable<any>) ;
+}