117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import {
|
|
Component,
|
|
OnInit,
|
|
OnDestroy,
|
|
AfterViewChecked,
|
|
ViewChild,
|
|
ElementRef
|
|
} from '@angular/core';
|
|
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
|
import { Store, select } from '@ngrx/store';
|
|
import { NGXLogger } from 'ngx-logger';
|
|
import { Observable, Subscription } from 'rxjs';
|
|
import { Info, EventType } from '@ucap-webmessenger/protocol-event';
|
|
|
|
import * as AppStore from '@app/store';
|
|
import * as EventStore from '@app/store/messenger/event';
|
|
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
|
|
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
|
|
import { LoginInfo, KEY_LOGIN_INFO } from '@app/types';
|
|
import { RoomInfo, UserInfo } from '@ucap-webmessenger/protocol-room';
|
|
import { tap } from 'rxjs/operators';
|
|
|
|
@Component({
|
|
selector: 'app-layout-messenger-messages',
|
|
templateUrl: './messages.component.html',
|
|
styleUrls: ['./messages.component.scss'],
|
|
animations: ucapAnimations
|
|
})
|
|
export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
|
|
@ViewChild('messageBoxContainer', { static: true })
|
|
private messageBoxContainer: ElementRef;
|
|
|
|
loginRes: LoginResponse;
|
|
loginResSubscription: Subscription;
|
|
eventList$: Observable<Info[]>;
|
|
roomInfo: RoomInfo;
|
|
roomInfoSubscription: Subscription;
|
|
userInfoList$: Observable<UserInfo[]>;
|
|
eventListProcessing$: Observable<boolean>;
|
|
|
|
constructor(
|
|
private store: Store<any>,
|
|
private sessionStorageService: SessionStorageService,
|
|
private logger: NGXLogger
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
const loginInfo = this.sessionStorageService.get<LoginInfo>(KEY_LOGIN_INFO);
|
|
|
|
this.loginResSubscription = this.store
|
|
.pipe(
|
|
select(AppStore.AccountSelector.AuthenticationSelector.loginRes),
|
|
tap(loginRes => {
|
|
this.loginRes = loginRes;
|
|
})
|
|
)
|
|
.subscribe();
|
|
|
|
this.roomInfoSubscription = this.store
|
|
.pipe(
|
|
select(AppStore.MessengerSelector.RoomSelector.roomInfo),
|
|
tap(roomInfo => {
|
|
this.roomInfo = roomInfo;
|
|
})
|
|
)
|
|
.subscribe();
|
|
|
|
this.userInfoList$ = this.store.pipe(
|
|
select(AppStore.MessengerSelector.RoomSelector.userInfoList)
|
|
);
|
|
|
|
this.eventListProcessing$ = this.store.pipe(
|
|
select(AppStore.MessengerSelector.EventSelector.infoListProcessing)
|
|
);
|
|
|
|
this.eventList$ = this.store.pipe(
|
|
select(AppStore.MessengerSelector.EventSelector.infoList)
|
|
);
|
|
|
|
this.scrollToBottomForMessageBoxContainer();
|
|
}
|
|
|
|
ngOnDestroy(): void {
|
|
if (!!this.loginResSubscription) {
|
|
this.loginResSubscription.unsubscribe();
|
|
}
|
|
if (!!this.roomInfoSubscription) {
|
|
this.roomInfoSubscription.unsubscribe();
|
|
}
|
|
}
|
|
|
|
ngAfterViewChecked(): void {
|
|
this.scrollToBottomForMessageBoxContainer();
|
|
}
|
|
|
|
selectContact() {}
|
|
|
|
onSendMessage(message: string) {
|
|
this.store.dispatch(
|
|
EventStore.send({
|
|
senderSeq: this.loginRes.userSeq,
|
|
req: {
|
|
roomSeq: this.roomInfo.roomSeq,
|
|
eventType: EventType.Character,
|
|
sentMessage: message
|
|
}
|
|
})
|
|
);
|
|
}
|
|
|
|
private scrollToBottomForMessageBoxContainer(): void {
|
|
try {
|
|
this.messageBoxContainer.nativeElement.scrollTop = this.messageBoxContainer.nativeElement.scrollHeight;
|
|
} catch (err) {}
|
|
}
|
|
}
|