Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

refactorisation of the profile loading

This commit is contained in:
Nicolas Constant 2018-11-01 19:36:52 -04:00
parent 2ca7c0c226
commit cefb6d76fa
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
8 changed files with 108 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/components/stream/hashtag/hashtag.component.ts
View File

@ -1,15 +1,24 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
@Component({
selector: 'app-hashtag',
templateUrl: './hashtag.component.html',
styleUrls: ['./hashtag.component.scss']
selector: 'app-hashtag',
templateUrl: './hashtag.component.html',
styleUrls: ['./hashtag.component.scss']
})
export class HashtagComponent implements OnInit {
hashtag: string;
constructor() { }
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
ngOnInit() {
}
@Input('currentHashtag')
set currentAccount(hashtag: string) {
this.hashtag = hashtag;
}
constructor() { }
ngOnInit() {
}
}

8
src/app/components/stream/stream-overlay/stream-overlay.component.html
View File

@ -2,16 +2,14 @@
<div class="stream-overlay__header">
<a href class="overlay-close" (click)="close()">CLOSE</a>
<a href class="overlay-previous" (click)="previous()">PREV</a>
<a href class="overlay-refresh" [class.not-active]="!canRefresh" (click)="refresh()">REFRESH</a>
<a href class="overlay-next" [class.not-active]="!canGoForward" (click)="next()">NEXT</a>
<a href class="overlay-refresh" *ngIf="canRefresh" (click)="refresh()">REFRESH</a>
<a href class="overlay-next" *ngIf="canGoForward" (click)="next()">NEXT</a>
</div>
<!-- <div class="stream-overlay__title">
Account
</div> -->
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
<app-user-profile *ngIf="account" [currentAccount]="account" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-user-profile>
<app-user-profile *ngIf="accountName" [currentAccount]="accountName" (browseAccount)="accountSelected($event)" (browseHashtag)="hashtagSelected($event)"></app-user-profile>
<app-hashtag *ngIf="browseHashtag"></app-hashtag>
<app-thread *ngIf="browseThread"></app-thread>
</div>

63
src/app/components/stream/stream-overlay/stream-overlay.component.ts
View File

@ -12,11 +12,10 @@ export class StreamOverlayComponent implements OnInit {
canRefresh: boolean;
canGoForward: boolean;
account: Account;
private accountName: string;
// account: Account;
accountName: string;
private thread: string;
private hashtag: string;
hashtag: string;
error: string;
isLoading: boolean;
@ -24,42 +23,30 @@ export class StreamOverlayComponent implements OnInit {
@Output() closeOverlay = new EventEmitter();
@Input('browseAccount')
set browseAccount(accountName: string) {
this.loadAccount(accountName);
// let selectedAccounts = this.toolsService.getSelectedAccounts();
// if(selectedAccounts.length === 0)
// this.error = 'no user selected';
// this.account = account;
set browseAccount(accountName: string) {
// console.warn(`browseAccount ${accountName}`);
this.accountName = accountName;
// if(accountName) this.loadAccount(accountName);
}
// get browseAccount(): string{
// return this.account;
// }
@Input('browseThread')
set browseThread(thread: string) {
// console.warn(`browseThread ${thread}`);
this.thread = thread;
}
get browseThread(): string {
return this.thread;
}
@Input('browseHashtag')
set browseHashtag(hashtag: string) {
// console.warn(`browseHashtag ${hashtag}`);
this.hashtag = hashtag;
}
get browseHashtag(): string {
return this.hashtag;
}
}
constructor(
private readonly toolsService: ToolsService,
private readonly mastodonService: MastodonService) { }
ngOnInit() {
console.warn('ngOnInit stream-overlay');
}
close(): boolean {
@ -80,32 +67,10 @@ export class StreamOverlayComponent implements OnInit {
}
accountSelected(accountName: string): void {
this.loadAccount(accountName);
this.accountName = accountName;
// this.loadAccount(accountName);
}
hashtagSelected(hashtag: string): void {
}
private loadAccount(accountName: string): void {
this.account = null;
this.accountName = accountName;
let selectedAccounts = this.toolsService.getSelectedAccounts();
if (selectedAccounts.length === 0) {
this.error = 'no user selected';
return;
}
this.isLoading = true;
this.mastodonService.search(selectedAccounts[0], accountName, true)
.then((result: Results) => {
this.account = result.accounts[0];
})
.catch((err) => {
this.error = 'Error when retieving account';
})
.then(()=>{
this.isLoading = false;
});
}
}
}

6
src/app/components/stream/stream.component.html
View File

@ -1,7 +1,9 @@
<div class="stream-column">
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive"
(closeOverlay)="closeOverlay()" [browseAccount]="overlayAccountToBrowse"></app-stream-overlay>
(closeOverlay)="closeOverlay()"
[browseAccount]="overlayAccountToBrowse"
[browseHashtag]="overlayHashtagToBrowse"></app-stream-overlay>
<div class="stream-column__stream-header">
<a href title="return to top" (click)="goToTop()">
@ -11,7 +13,7 @@
<div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
<!-- data-simplebar -->
<div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)"></app-status>
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>
</div>
</div>
</div>

10
src/app/components/stream/stream.component.ts
View File

@ -23,6 +23,7 @@ export class StreamComponent implements OnInit {
overlayActive: boolean;
overlayAccountToBrowse: string;
overlayHashtagToBrowse: string;
@Input()
set streamElement(streamElement: StreamElement) {
@ -52,12 +53,15 @@ export class StreamComponent implements OnInit {
browseAccount(account: string): void {
this.overlayAccountToBrowse = account;
this.overlayActive = true;
this.overlayHashtagToBrowse = null;
this.overlayActive = true;
}
browseHashtag(hashtag: string): void {
console.warn('browseHashtag');
console.warn(hashtag);
console.warn(`browseHashtag ${hashtag}`);
this.overlayAccountToBrowse = null;
this.overlayHashtagToBrowse = hashtag;
this.overlayActive = true;
}
browseThread(thread: string): void {

6
src/app/components/stream/user-profile/user-profile.component.html
View File

@ -1,5 +1,7 @@
<div class="profile flexcroll">
<div class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
<app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
<div *ngIf="account" class="profile-header" [ngStyle]="{'background-image':'url('+account.header+')'}">
<div class="profile-header__inner">
<!-- <img class="profile-header__header" src="{{account.header}}" alt="header" /> -->
<img class="profile-header__avatar" src="{{account.avatar}}" alt="header" />
@ -7,7 +9,7 @@
<h2 class="profile-header__fullhandle">@{{account.acct}}</h2>
</div>
</div>
<div class="profile-description" *ngIf="hasNote">
<div *ngIf="account && hasNote" class="profile-description">
<app-databinded-text class="status__content" [textIsSelectable]="false" [text]="account.note" (accountSelected)="accountSelected($event)"
(hashtagSelected)="hashtagSelected($event)"></app-databinded-text>
<!-- <p innerHTML="{{account.note}}"></p> -->

13
src/app/components/stream/user-profile/user-profile.component.scss
View File

@ -16,23 +16,12 @@
height: 160px;
background-color: rgba(0, 0, 0, .45);
}
// &__header {
// position: absolute;
// // width: calc(100%);
// width: calc(100%);
// height: auto;
// float: left;
// display: block;
// opacity: 0.3;
// }
&__avatar {
position: absolute;
top: 15px;
left: 15px;
width: 80px;
border-radius: 50%; // border: 1px solid black;
// background-color: black;
border-radius: 50%;
}
&__display-name {
position: absolute;

75
src/app/components/stream/user-profile/user-profile.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Account, Status } from "../../../services/models/mastodon.interfaces";
import { Account, Status, Results } from "../../../services/models/mastodon.interfaces";
import { MastodonService } from '../../../services/mastodon.service';
import { ToolsService } from '../../../services/tools.service';
import { StatusWrapper } from '../stream.component';
@ -13,19 +13,37 @@ export class UserProfileComponent implements OnInit {
account: Account;
hasNote: boolean;
isLoading: boolean;
statusLoading: boolean;
statuses: StatusWrapper[] = [];
error: string;
statuses: StatusWrapper[] = [];
private accountName: string;
@Output() browseAccount = new EventEmitter<string>();
@Output() browseHashtag = new EventEmitter<string>();
@Input('currentAccount')
set currentAccount(account: Account) {
this.account = account;
this.hasNote = account && account.note && account.note !== '<p></p>';
console.warn('currentAccount');
console.warn(account);
this.getStatuses(account);
//set currentAccount(account: Account) {
set currentAccount(accountName: string) {
this.loadAccount(accountName)
.then((account: Account) => {
this.account = account;
return this.getStatuses(this.account);
})
.catch(err => {
this.error = 'Error when retieving account';
this.isLoading = false;
this.statusLoading = false;
});
// this.account = account;
// this.hasNote = account && account.note && account.note !== '<p></p>';
// console.warn('currentAccount');
// console.warn(account);
// this.getStatuses(account);
}
constructor(
@ -43,23 +61,48 @@ export class UserProfileComponent implements OnInit {
this.browseHashtag.next(hashtag);
}
private getStatuses(account: Account): void {
private loadAccount(accountName: string): Promise<Account> {
this.account = null;
this.accountName = accountName;
let selectedAccounts = this.toolsService.getSelectedAccounts();
if (selectedAccounts.length === 0) {
this.error = 'no user selected';
return;
}
this.isLoading = true;
return this.mastodonService.search(selectedAccounts[0], accountName, true)
.then((result: Results) => {
this.isLoading = false;
return result.accounts[0];
});
// .catch((err) => {
// this.error = 'Error when retieving account';
// })
// .then(()=>{
// this.isLoading = false;
// });
}
private getStatuses(account: Account): Promise<void> {
let selectedAccounts = this.toolsService.getSelectedAccounts();
if (selectedAccounts.length === 0) return;
this.statusLoading = true;
this.mastodonService.getAccountStatuses(selectedAccounts[0], account.id, false, false, true, null, null, 40)
return this.mastodonService.getAccountStatuses(selectedAccounts[0], account.id, false, false, true, null, null, 40)
.then((result: Status[]) => {
for (const status of result) {
const wrapper = new StatusWrapper(status,selectedAccounts[0]);
const wrapper = new StatusWrapper(status, selectedAccounts[0]);
this.statuses.push(wrapper);
}
})
.catch(err => {
})
.then(() => {
this.statusLoading = false;
});
// .catch(err => {
// })
// .then(() => {
// this.statusLoading = false;
// });
}
}