From 5a0deefa80b1bbc70408c9f9340593b6d184ab33 Mon Sep 17 00:00:00 2001 From: Nicolas Constant Date: Mon, 25 Mar 2019 00:52:30 -0400 Subject: [PATCH] added displaying mentions #55 --- .../direct-messages.component.ts | 27 +++-- .../manage-account.component.html | 9 +- .../manage-account.component.ts | 5 +- .../mentions/mentions.component.ts | 114 ++++++++++++++++-- .../notifications/notifications.component.ts | 27 +++-- src/app/services/mastodon.service.ts | 2 +- .../user-notification-service.service.ts | 20 ++- 7 files changed, 174 insertions(+), 30 deletions(-) diff --git a/src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.ts b/src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.ts index 018ccab7..ff629724 100644 --- a/src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.ts +++ b/src/app/components/floating-column/manage-account/direct-messages/direct-messages.component.ts @@ -1,15 +1,28 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; + +import { AccountWrapper } from '../../../../models/account.models'; @Component({ - selector: 'app-direct-messages', - templateUrl: './direct-messages.component.html', - styleUrls: ['./direct-messages.component.scss'] + selector: 'app-direct-messages', + templateUrl: './direct-messages.component.html', + styleUrls: ['./direct-messages.component.scss'] }) export class DirectMessagesComponent implements OnInit { - constructor() { } + @Input('account') + set account(acc: AccountWrapper) { + console.warn('account'); + this._account = acc; + } + get account(): AccountWrapper { + return this._account; + } - ngOnInit() { - } + private _account: AccountWrapper; + + constructor() { } + + ngOnInit() { + } } diff --git a/src/app/components/floating-column/manage-account/manage-account.component.html b/src/app/components/floating-column/manage-account/manage-account.component.html index 9398a871..b85eb48d 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.html +++ b/src/app/components/floating-column/manage-account/manage-account.component.html @@ -28,10 +28,9 @@ - + - - - - + + + \ No newline at end of file diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts index b8640e1d..e52152ba 100644 --- a/src/app/components/floating-column/manage-account/manage-account.component.ts +++ b/src/app/components/floating-column/manage-account/manage-account.component.ts @@ -26,7 +26,6 @@ export class ManageAccountComponent implements OnInit, OnDestroy { @Input('account') set account(acc: AccountWrapper) { - console.warn('account'); this._account = acc; this.checkNotifications(); } @@ -49,6 +48,10 @@ export class ManageAccountComponent implements OnInit, OnDestroy { } private checkNotifications(){ + if(this.userNotificationServiceSub){ + this.userNotificationServiceSub.unsubscribe(); + } + this.userNotificationServiceSub = this.userNotificationService.userNotifications.subscribe((userNotifications: UserNotification[]) => { const userNotification = userNotifications.find(x => x.account.id === this.account.info.id); if(userNotification){ diff --git a/src/app/components/floating-column/manage-account/mentions/mentions.component.ts b/src/app/components/floating-column/manage-account/mentions/mentions.component.ts index 5b839408..bb51c0e9 100644 --- a/src/app/components/floating-column/manage-account/mentions/mentions.component.ts +++ b/src/app/components/floating-column/manage-account/mentions/mentions.component.ts @@ -1,15 +1,113 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy, Input, ViewChild, ElementRef } from '@angular/core'; +import { Subscription } from 'rxjs'; + +import { AccountWrapper } from '../../../../models/account.models'; +import { UserNotificationServiceService, UserNotification } from '../../../../services/user-notification-service.service'; +import { StatusWrapper } from '../../../../models/common.model'; +import { Status, Notification } from '../../../../services/models/mastodon.interfaces'; +import { MastodonService } from '../../../../services/mastodon.service'; +import { NotificationService } from '../../../../services/notification.service'; + @Component({ - selector: 'app-mentions', - templateUrl: './mentions.component.html', - styleUrls: ['./mentions.component.scss'] + selector: 'app-mentions', + templateUrl: '../../../stream/stream-statuses/stream-statuses.component.html', + styleUrls: ['../../../stream/stream-statuses/stream-statuses.component.scss'] }) -export class MentionsComponent implements OnInit { +export class MentionsComponent implements OnInit, OnDestroy { + statuses: StatusWrapper[] = []; + displayError: string; + isLoading = false; + isThread = false; + hasContentWarnings = false; + + @Input('account') + set account(acc: AccountWrapper) { + console.warn('account'); + this._account = acc; + this.loadMentions(); + } + get account(): AccountWrapper { + return this._account; + } + + @ViewChild('statusstream') public statustream: ElementRef; - constructor() { } + private maxReached = false; + private _account: AccountWrapper; + private userNotificationServiceSub: Subscription; + private lastId: string; - ngOnInit() { - } + constructor( + private readonly notificationService: NotificationService, + private readonly userNotificationService: UserNotificationServiceService, + private readonly mastodonService: MastodonService) { } + ngOnInit() { + } + + ngOnDestroy(): void { + this.userNotificationServiceSub.unsubscribe(); + } + + private loadMentions(){ + if(this.userNotificationServiceSub){ + this.userNotificationServiceSub.unsubscribe(); + } + + this.statuses.length = 0; + this.userNotificationService.markMentionsAsRead(this.account.info); + + this.userNotificationServiceSub = this.userNotificationService.userNotifications.subscribe((userNotifications: UserNotification[]) => { + const userNotification = userNotifications.find(x => x.account.id === this.account.info.id); + if(userNotification && userNotification.mentions){ + userNotification.mentions.forEach((mention: Status) => { + const statusWrapper = new StatusWrapper(mention, this.account.info); + this.statuses.push(statusWrapper); + }); + } + this.lastId = userNotification.lastId; + }); + } + + onScroll() { + var element = this.statustream.nativeElement as HTMLElement; + const atBottom = element.scrollHeight <= element.clientHeight + element.scrollTop + 1000; + + if (atBottom) { + this.scrolledToBottom(); + } + } + + private scrolledToBottom() { + if (this.isLoading || this.maxReached || this.statuses.length === 0) return; + + this.isLoading = true; + + console.warn(`this.lastId ${this.lastId}`); + + this.mastodonService.getNotifications(this.account.info, ['follow', 'favourite', 'reblog'], this.lastId) + .then((result: Notification[]) => { + console.warn(result); + + const statuses = result.map(x => x.status); + if (statuses.length === 0) { + this.maxReached = true; + return; + } + + for (const s of statuses) { + const wrapper = new StatusWrapper(s, this.account.info); + this.statuses.push(wrapper); + } + + this.lastId = result[result.length - 1].id; + }) + .catch(err => { + this.notificationService.notifyHttpError(err); + }) + .then(() => { + this.isLoading = false; + }); + } } diff --git a/src/app/components/floating-column/manage-account/notifications/notifications.component.ts b/src/app/components/floating-column/manage-account/notifications/notifications.component.ts index 51e07a49..180e273d 100644 --- a/src/app/components/floating-column/manage-account/notifications/notifications.component.ts +++ b/src/app/components/floating-column/manage-account/notifications/notifications.component.ts @@ -1,15 +1,28 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; + +import { AccountWrapper } from '../../../../models/account.models'; @Component({ - selector: 'app-notifications', - templateUrl: './notifications.component.html', - styleUrls: ['./notifications.component.scss'] + selector: 'app-notifications', + templateUrl: './notifications.component.html', + styleUrls: ['./notifications.component.scss'] }) export class NotificationsComponent implements OnInit { - constructor() { } + @Input('account') + set account(acc: AccountWrapper) { + console.warn('account'); + this._account = acc; + } + get account(): AccountWrapper { + return this._account; + } - ngOnInit() { - } + private _account: AccountWrapper; + + constructor() { } + + ngOnInit() { + } } diff --git a/src/app/services/mastodon.service.ts b/src/app/services/mastodon.service.ts index f673c6c8..b106831f 100644 --- a/src/app/services/mastodon.service.ts +++ b/src/app/services/mastodon.service.ts @@ -252,7 +252,7 @@ export class MastodonService { private formatArray(data: string[], paramName: string): string { let result = ''; data.forEach(x => { - if (result.includes('paramName')) result += '&'; + if (result.includes(paramName)) result += '&'; result += `${paramName}[]=${x}`; }); return result; diff --git a/src/app/services/user-notification-service.service.ts b/src/app/services/user-notification-service.service.ts index d58e5465..d040a5ea 100644 --- a/src/app/services/user-notification-service.service.ts +++ b/src/app/services/user-notification-service.service.ts @@ -11,7 +11,6 @@ import { NotificationService } from './notification.service'; providedIn: 'root' }) export class UserNotificationServiceService { - userNotifications = new BehaviorSubject([]); constructor( @@ -52,6 +51,8 @@ export class UserNotificationServiceService { const userNotifications = notifications.filter(x => x.type !== 'mention'); const userMentions = notifications.filter(x => x.type === 'mention').map(x => x.status); + const lastId = notifications[notifications.length - 1].id; + if (currentAccountNotifications) { const currentUserNotifications = currentAccountNotifications.notifications; const currentUserMentions = currentAccountNotifications.mentions; @@ -66,6 +67,7 @@ export class UserNotificationServiceService { currentAccountNotifications.hasNewNotifications = hasNewNotifications; currentAccountNotifications.notifications = userNotifications; currentAccountNotifications.mentions = userMentions; + currentAccountNotifications.lastId = lastId; currentNotifications = currentNotifications.filter(x => x.account.id !== account.id); currentNotifications.push(currentAccountNotifications); @@ -78,11 +80,26 @@ export class UserNotificationServiceService { newNotifications.hasNewMentions = false; //TODO: check in local settings newNotifications.notifications = userNotifications; newNotifications.mentions = userMentions; + newNotifications.lastId = lastId; currentNotifications.push(newNotifications); this.userNotifications.next(currentNotifications); } } + + markMentionsAsRead(account: AccountInfo) { + let currentNotifications = this.userNotifications.value; + const currentAccountNotifications = currentNotifications.find(x => x.account.id === account.id); + currentAccountNotifications.hasNewMentions = false; + this.userNotifications.next(currentNotifications); + } + + markNotificationAsRead(account: AccountInfo) { + let currentNotifications = this.userNotifications.value; + const currentAccountNotifications = currentNotifications.find(x => x.account.id === account.id); + currentAccountNotifications.hasNewNotifications = false; + this.userNotifications.next(currentNotifications); + } } export class UserNotification { @@ -91,4 +108,5 @@ export class UserNotification { hasNewMentions: boolean; notifications: Notification[] = []; mentions: Status[] = []; + lastId: string; }