refactoring

package-lock.json

@@ -9975,6 +9975,16 @@
         "deep-freeze-strict": "^1.1.1"
       }
     },
+    "ngx-logger": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/ngx-logger/-/ngx-logger-4.0.5.tgz",
+      "integrity": "sha512-RUvu6TeDga+nUFGMwGiUn+GTCwpshfF4rsfS02i8euGXE9Lq9PPPzHg10sgonPCYBYj4GAx+bdPRv8BQpRyldQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.9.0",
+        "vlq": "^1.0.0"
+      }
+    },
     "ngx-perfect-scrollbar": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-8.0.0.tgz",
@@ -14377,6 +14387,12 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vlq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
+      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
+      "dev": true
+    },
     "vm-browserify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz",

package.json

@@ -84,6 +84,7 @@
     "moment": "^2.24.0",
     "ng-packagr": "^5.4.0",
     "ngrx-store-freeze": "^0.2.4",
+    "ngx-logger": "^4.0.5",
     "ngx-perfect-scrollbar": "^8.0.0",
     "npm-run-all": "^4.1.5",
     "parallel-webpack": "^2.4.0",

projects/ucap-webmessenger-app/src/app/app-routing.module.ts

@@ -21,7 +21,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
+  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

projects/ucap-webmessenger-app/src/app/app.component.scss

@@ -0,0 +1,4 @@
+:host {
+  width: 100%;
+  height: auto !important;
+}

projects/ucap-webmessenger-app/src/app/app.module.ts

@@ -24,6 +24,8 @@ import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
 
 import { UCapUtilModule } from '@ucap-webmessenger/util';
 
+import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
+
 import { environment } from '../environments/environment';
 
 import { AppProviderModule } from './app-provider.module';
@@ -77,7 +79,11 @@ import { GUARDS } from './guards';
     AppProviderModule,
     AppRoutingModule,
     AppStoreModule,
-    AppTranslateModule
+    AppTranslateModule,
+
+    LoggerModule.forRoot({
+      level: NgxLoggerLevel.DEBUG
+    })
   ],
   providers: [...GUARDS],
   declarations: [AppComponent],

projects/ucap-webmessenger-app/src/app/layouts/chat/components/left-sidenav.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
-
-@Component({
-  selector: 'app-layout-chat-left-sidenav',
-  templateUrl: './left-sidenav.component.html',
-  styleUrls: ['./left-sidenav.component.scss'],
-  animations: ucapAnimations
-})
-export class LeftSidenavComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

projects/ucap-webmessenger-app/src/app/layouts/chat/components/right-sidenav.component.ts

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ucapAnimations } from '@ucap-webmessenger/ui';
-
-@Component({
-  selector: 'app-layout-chat-right-sidenav',
-  templateUrl: './right-sidenav.component.html',
-  styleUrls: ['./right-sidenav.component.scss'],
-  animations: ucapAnimations
-})
-export class RightSidenavComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
-}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/index.ts

@@ -1,15 +1,15 @@
 import { IntroComponent } from './intro.component';
-import { LeftSidenavComponent } from './left-sidenav.component';
+import { LeftSideComponent } from './left-side.component';
 import { MessagesComponent } from './messages.component';
-import { RightSidenavComponent } from './right-sidenav.component';
+import { RightSideComponent } from './right-side.component';
 
 import { LEFT_SIDENAV_COMPONENTS } from './left-sidenav';
 
 export const COMPONENTS = [
   IntroComponent,
-  LeftSidenavComponent,
+  LeftSideComponent,
   MessagesComponent,
-  RightSidenavComponent,
+  RightSideComponent,
 
   ...LEFT_SIDENAV_COMPONENTS
 ];

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IntroComponent } from './intro.component';
 
-describe('Chat::IntroComponent', () => {
+describe('App::Layout::Messenger::IntroComponent', () => {
   let component: IntroComponent;
   let fixture: ComponentFixture<IntroComponent>;
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 @Component({
-  selector: 'app-layout-chat-intro',
+  selector: 'app-layout-messenger-intro',
   templateUrl: './intro.component.html',
   styleUrls: ['./intro.component.scss'],
   animations: ucapAnimations

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -1,4 +1,4 @@
-<mat-tab-group md-stretch-tabs>
+<mat-tab-group mat-stretch-tabs>
   <mat-tab>
     <ng-template mat-tab-label>
       <mat-icon>group</mat-icon>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LeftSidenavComponent } from './left-sidenav.component';
+import { LeftSideComponent } from './left-side.component';
 
-describe('Chat::LeftSidenavComponent', () => {
+describe('App::Layout::Messenger::LeftSideComponent', () => {
-  let component: LeftSidenavComponent;
+  let component: LeftSideComponent;
-  let fixture: ComponentFixture<LeftSidenavComponent>;
+  let fixture: ComponentFixture<LeftSideComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LeftSidenavComponent]
+      declarations: [LeftSideComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LeftSidenavComponent);
+    fixture = TestBed.createComponent(LeftSideComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-messenger-left-side',
+  templateUrl: './left-side.component.html',
+  styleUrls: ['./left-side.component.scss'],
+  animations: ucapAnimations
+})
+export class LeftSideComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MessagesComponent } from './messages.component';
 
-describe('Chat::MessagesComponent', () => {
+describe('App::Layout::Messenger::MessagesComponent', () => {
   let component: MessagesComponent;
   let fixture: ComponentFixture<MessagesComponent>;
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ucapAnimations } from '@ucap-webmessenger/ui';
 
 @Component({
-  selector: 'app-layout-chat-messages',
+  selector: 'app-layout-messenger-messages',
   templateUrl: './messages.component.html',
   styleUrls: ['./messages.component.scss'],
   animations: ucapAnimations

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.spec.ts

@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RightSidenavComponent } from './right-sidenav.component';
+import { RightSideComponent } from './right-side.component';
 
-describe('Chat::RightSidenavComponent', () => {
+describe('App::Layout::Messenger::RightSideComponent', () => {
-  let component: RightSidenavComponent;
+  let component: RightSideComponent;
-  let fixture: ComponentFixture<RightSidenavComponent>;
+  let fixture: ComponentFixture<RightSideComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [RightSidenavComponent]
+      declarations: [RightSideComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RightSidenavComponent);
+    fixture = TestBed.createComponent(RightSideComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+@Component({
+  selector: 'app-layout-messenger-right-side',
+  templateUrl: './right-side.component.html',
+  styleUrls: ['./right-side.component.scss'],
+  animations: ucapAnimations
+})
+export class RightSideComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts

@@ -27,4 +27,4 @@ import { COMPONENTS } from './components';
   declarations: [...COMPONENTS],
   entryComponents: []
 })
-export class AppChatLayoutModule {}
+export class AppMessengerLayoutModule {}

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -1,43 +1,26 @@
-<div id="messenger" class="page-layout carded fullwidth inner-scroll">
+<div class="container">
   <!-- TOP BACKGROUND -->
-  <div class="top-bg accent"></div>
+  <div></div>
   <!-- / TOP BACKGROUND -->
 
   <!-- CENTER -->
-  <div class="center">
+  <div>
     <!-- CONTENT CARD -->
-    <div class="content-card">
+    <div>
-      <mat-sidenav-container>
+      <div class="left-side">
-        <!-- LEFT SIDENAV -->
+        <app-layout-messenger-left-side></app-layout-messenger-left-side>
-        <mat-sidenav
+      </div>
-          class="sidenav left-sidenav"
+      <div>
-          position="start"
+        <app-layout-messenger-intro
-          opened="true"
+          *ngIf="!selectedChat"
-          mode="side"
+        ></app-layout-messenger-intro>
-          matIsLockedOpen="gt-md"
+        <app-layout-messenger-messages
-        >
-          <app-layout-chat-left-sidenav></app-layout-chat-left-sidenav>
-        </mat-sidenav>
-        <!-- / LEFT SIDENAV -->
-
-        <!-- CONTENT -->
-        <app-layout-chat-intro *ngIf="!selectedChat"></app-layout-chat-intro>
-
-        <app-layout-chat-messages
           *ngIf="selectedChat"
-        ></app-layout-chat-messages>
+        ></app-layout-messenger-messages>
-        <!-- / CONTENT -->
+      </div>
-        <!-- RIGHT SIDENAV -->
+      <div class="right-side">
-        <mat-sidenav
+        <app-layout-messenger-right-side></app-layout-messenger-right-side>
-          class="sidenav right-sidenav"
+      </div>
-          position="end"
-          opened="true"
-          mode="side"
-        >
-          <app-layout-chat-right-sidenav></app-layout-chat-right-sidenav>
-        </mat-sidenav>
-        <!-- / RIGHT SIDENAV -->
-      </mat-sidenav-container>
     </div>
     <!-- / CONTENT CARD -->
   </div>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -1,55 +1,12 @@
-#messenger {
+.container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: auto !important;
-
-  .center {
-    max-width: 1400px;
-    margin: 0 auto;
-
-    .content-card {
-      position: relative;
-      display: flex;
-      flex: 1;
-      border-radius: 8px;
-
-      .mat-sidenav-container {
-        display: flex;
-        flex: 1;
   width: 100%;
+  height: auto !important;
+}
 
-        .left-sidenav {
+.left-side {
   width: 300px;
 }
 
-        .right-sidenav {
+.right-side {
   width: 70px;
 }
-
-        > .mat-sidenav-content,
-        > .mat-drawer-content {
-          display: flex;
-          flex: 1 1 auto;
-          min-height: 100%;
-          width: auto;
-          height: auto;
-        }
-
-        > .mat-drawer-content {
-          max-width: 100%;
-        }
-
-        mat-sidenav {
-          display: flex;
-          flex-direction: column;
-          width: 400px;
-          max-width: 90%;
-          overflow: hidden;
-        }
-      }
-    }
-  }
-}

projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { MatSidenavModule } from '@angular/material/sidenav';
 
-import { AppChatLayoutModule } from '@app/layouts/chat/chat.layout.module';
+import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module';
 
 import { AppMessengerRoutingPageModule } from './messenger-routing.page.module';
 
@@ -13,7 +13,7 @@ import { COMPONENTS } from './components';
   imports: [
     CommonModule,
     MatSidenavModule,
-    AppChatLayoutModule,
+    AppMessengerLayoutModule,
     AppMessengerRoutingPageModule
   ],
   declarations: [...COMPONENTS],

projects/ucap-webmessenger-app/src/app/services/notification.service.ts

@@ -14,12 +14,14 @@ import {
 } from '@ucap-webmessenger/protocol-authentication';
 
 import * as AuthenticationStore from '../store/account/authentication';
+import { NGXLogger } from 'ngx-logger';
 
 @Injectable()
 export class AppNotificationService {
   constructor(
     private protocolService: ProtocolService,
-    private store: Store<any>
+    private store: Store<any>,
+    private logger: NGXLogger
   ) {}
 
   public subscribe(): void {
@@ -32,7 +34,7 @@ export class AppNotificationService {
         ),
         tap(message => {
           const logoutRes = decodeLogout(message);
-          console.log('logoutRes', logoutRes);
+          this.logger.debug('logoutRes', logoutRes);
           this.store.dispatch(AuthenticationStore.logout());
         })
       )

projects/ucap-webmessenger-app/src/app/store/messenger/sync/effects.ts

@@ -7,6 +7,8 @@ import { catchError, exhaustMap, map, withLatestFrom } from 'rxjs/operators';
 
 import { Store, select } from '@ngrx/store';
 
+import { NGXLogger } from 'ngx-logger';
+
 import {
   buddy2,
   buddy2Success,
@@ -38,7 +40,7 @@ export class Effects {
       withLatestFrom(
         this.store.pipe(
           select(state => {
-            console.log('state', state);
+            this.logger.debug('state', state);
             return state.messenger.sync.buddy2SyncDate as string;
           })
         )
@@ -72,7 +74,7 @@ export class Effects {
       withLatestFrom(
         this.store.pipe(
           select(state => {
-            console.log('state', state);
+            this.logger.debug('state', state);
             return state.messenger.sync.group2SyncDate as string;
           })
         )
@@ -104,6 +106,7 @@ export class Effects {
     private actions$: Actions,
     private store: Store<any>,
     private syncProtocolService: SyncProtocolService,
-    private sessionStorageService: SessionStorageService
+    private sessionStorageService: SessionStorageService,
+    private logger: NGXLogger
   ) {}
 }

projects/ucap-webmessenger-app/src/app/store/setting/version-info/effects.ts

@@ -10,6 +10,8 @@ import { PublicApiService } from '@ucap-webmessenger/api-public';
 import { StatusCode } from '@ucap-webmessenger/api';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 
+import { NGXLogger } from 'ngx-logger';
+
 import { fetch, fetchSuccess, fetchFailure } from './actions';
 
 @Injectable()
@@ -22,7 +24,7 @@ export class Effects {
         this.publicApiService.versionInfo2(req).pipe(
           map(res => {
             if (res.statusCode === StatusCode.Success) {
-              console.log('fetchSuccess', res);
+              this.logger.debug('fetchSuccess', res);
               return fetchSuccess(res);
             } else {
               return fetchFailure({ error: 'Failed' });
@@ -47,6 +49,7 @@ export class Effects {
     private actions$: Actions,
     private publicApiService: PublicApiService,
     private sessionStorageService: SessionStorageService,
-    private router: Router
+    private router: Router,
+    private logger: NGXLogger
   ) {}
 }

projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts

@@ -22,6 +22,8 @@ import { PacketBodyValue } from '../types/packet-body-value.type';
 import { SSVC_TYPE_ERROR_RES, ServerErrorCode } from '../types/service';
 import { ProtocolMessage } from '../models/protocol';
 
+import { NGXLogger } from 'ngx-logger';
+
 interface RequestState {
   subject: Subject<ProtocolMessage>;
   request: {
@@ -45,7 +47,10 @@ export class ProtocolService {
   private serverMessageSubject: Subject<ProtocolMessage> | null = null;
   private serverMessage$: Observable<ProtocolMessage> | null = null;
 
-  constructor(@Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig) {
+  constructor(
+    @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
+    private logger: NGXLogger
+  ) {
     this.pendingRequests = new Map();
     this.input$ = new QueueingSubject<string>();
     this.serverMessageSubject = new Subject();
@@ -106,16 +111,23 @@ export class ProtocolService {
           (error: Error) => {
             const { message } = error;
             if (message === NormalClosureMessage) {
-              console.log('server closed the websocket connection normally');
+              this.logger.info(
+                'server closed the websocket connection normally'
+              );
             } else {
-              console.log('socket was disconnected due to error:', message);
+              this.logger.error(
+                'socket was disconnected due to error:',
+                message
+              );
             }
           },
           () => {
             // The clean termination only happens in response to the last
             // subscription to the observable being unsubscribed, any
             // other closure is considered an error.
-            console.log('the connection was closed in response to the user');
+            this.logger.info(
+              'the connection was closed in response to the user'
+            );
           }
         );
       } catch (error) {
@@ -170,7 +182,7 @@ export class ProtocolService {
           if (this.pendingRequests.has(requestId)) {
             this.pendingRequests.delete(requestId);
           }
-          console.log(
+          this.logger.debug(
             'ProtocolService::pendingRequests.size',
             this.pendingRequests.size
           );

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -2,7 +2,7 @@
   <mat-expansion-panel *ngFor="let group of groupList">
     <mat-expansion-panel-header>
       <mat-panel-title> {{ group.name }} </mat-panel-title>
-      <mat-panel-description>{{ group.name }} </mat-panel-description>
+      <mat-panel-description> </mat-panel-description>
     </mat-expansion-panel-header>
   </mat-expansion-panel>
 </mat-accordion>