account selection now handled in state management

This commit is contained in:
Nicolas Constant 2018-09-25 19:29:49 -04:00
parent bf1a944e1a
commit 4e83d55ea6
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
9 changed files with 50 additions and 38 deletions

View File

@ -18,9 +18,9 @@ export class ManageAccountComponent implements OnInit {
ngOnInit() {
this.availableStreams.length = 0;
this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Global Timeline', this.account.username));
this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.username));
this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.account.username));
this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Global Timeline', this.account.info.id));
this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id));
this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Personnal Timeline', this.account.info.id));
}
addStream(stream: StreamElement): boolean {

View File

@ -1,4 +1,4 @@
<a class="account-icon"
href title="{{ account.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
<img class="account-icon__avatar" [class.account-icon__avatar--selected]="isSelected" src="{{ account.avatar }}" />
href title="{{ account.info.username }}" (click)="toogleAccount()" (contextmenu)="openMenu()">
<img class="account-icon__avatar" [class.account-icon__avatar--selected]="account.info.isSelected" src="{{ account.avatar }}" />
</a>

View File

@ -11,8 +11,6 @@ export class AccountIconComponent implements OnInit {
@Output() toogleAccountNotify = new EventEmitter<AccountWrapper>();
@Output() openMenuNotify = new EventEmitter<AccountWrapper>();
isSelected: boolean = false;
constructor() { }
ngOnInit() {
@ -20,7 +18,6 @@ export class AccountIconComponent implements OnInit {
toogleAccount(): boolean {
this.toogleAccountNotify.emit(this.account);
this.isSelected = !this.isSelected;
return false;
}

View File

@ -4,7 +4,7 @@ import { Store } from "@ngxs/store";
import { Account } from "../../services/models/mastodon.interfaces";
import { AccountWrapper } from "../../models/account.models";
import { AccountsStateModel, AccountInfo } from "../../states/accounts.state";
import { AccountsStateModel, AccountInfo, SelectAccount } from "../../states/accounts.state";
import { NavigationService, LeftPanelType } from "../../services/navigation.service";
import { MastodonService } from "../../services/mastodon.service";
@ -16,9 +16,9 @@ import { MastodonService } from "../../services/mastodon.service";
})
export class LeftSideBarComponent implements OnInit, OnDestroy {
accounts: AccountWrapper[] = [];
accounts$: Observable<AccountInfo[]>;
private accounts$: Observable<AccountInfo[]>;
private loadedAccounts: { [index: string]: AccountInfo } = {};
// private loadedAccounts: { [index: string]: AccountInfo } = {};
private sub: Subscription;
constructor(
@ -33,19 +33,26 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
ngOnInit() {
this.accounts$.subscribe((accounts: AccountInfo[]) => {
if (accounts) {
this.loadedAccounts = {};
this.accounts.length = 0;
for (let acc of accounts) {
const accWrapper = new AccountWrapper();
accWrapper.username = `${acc.username}@${acc.instance}`;
this.accounts.push(accWrapper);
this.loadedAccounts[accWrapper.username] = acc;
const previousAcc = this.accounts.find(x => x.info.id === acc.id)
if (previousAcc) {
previousAcc.info.isSelected = acc.isSelected;
} else {
const accWrapper = new AccountWrapper();
accWrapper.info = acc;
this.accounts.push(accWrapper);
this.mastodonService.retrieveAccountDetails(acc)
.then((result: Account) => {
accWrapper.avatar = result.avatar;
});
}
//TODO: see when deleted
this.mastodonService.retrieveAccountDetails(acc)
.then((result: Account) => {
accWrapper.avatar = result.avatar;
});
}
}
});
@ -56,11 +63,12 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
}
onToogleAccountNotify(acc: AccountWrapper) {
console.warn(`onToogleAccountNotify username ${acc.username}`);
console.warn(`onToogleAccountNotify username ${acc.info.username}`);
this.store.dispatch([new SelectAccount(acc.info)]);
}
onOpenMenuNotify(acc: AccountWrapper) {
console.warn(`onOpenMenuNotify username ${acc.username}`);
console.warn(`onOpenMenuNotify username ${acc.info.username}`);
this.navigationService.openColumnEditor(acc);
}
@ -73,7 +81,7 @@ export class LeftSideBarComponent implements OnInit, OnDestroy {
this.navigationService.openPanel(LeftPanelType.Search);
return false;
}
addNewAccount(): boolean {
this.navigationService.openPanel(LeftPanelType.AddNewAccount);
return false;

View File

@ -25,7 +25,7 @@ export class StreamComponent implements OnInit {
set streamElement(streamElement: StreamElement) {
this._streamElement = streamElement;
const splitedUserName = streamElement.username.split('@');
const splitedUserName = streamElement.accountId.split('@');
const user = splitedUserName[0];
const instance = splitedUserName[1];
this.account = this.getRegisteredAccounts().find(x => x.username == user && x.instance == instance);

View File

@ -1,12 +1,14 @@
import { Account } from "../services/models/mastodon.interfaces";
import { AccountInfo } from "../states/accounts.state";
export class AccountWrapper {
constructor() {
}
id: number;
username: string;
display_name: string;
// id: number;
// username: string;
// display_name: string;
info: AccountInfo;
avatar: string;
}

View File

@ -33,8 +33,6 @@ export class RegisterNewAccountComponent implements OnInit {
if (!appDataWrapper) return;
const appInfo = this.getAllSavedApps().filter(x => x.instance === appDataWrapper.instance)[0];
console.warn('appInfo');
console.warn(appInfo);
this.authService.getToken(appDataWrapper.instance, appInfo.app.client_id, appInfo.app.client_secret, code, appInfo.app.redirect_uri)
.then((tokenData: TokenData) => {

View File

@ -24,9 +24,12 @@ export interface AccountsStateModel {
export class AccountsState {
@Action(AddAccount)
AddAccount(ctx: StateContext<AccountsStateModel>, action: AddAccount) {
const newAcc = action.account;
newAcc.id = `${newAcc.username}@${newAcc.instance}`;
const state = ctx.getState();
ctx.patchState({
accounts: [...state.accounts, action.account]
accounts: [...state.accounts, newAcc]
});
}
@ -35,22 +38,26 @@ export class AccountsState {
const state = ctx.getState();
const multiSelection = action.multiselection;
const selectedAccount = action.account;
const accounts = [...state.accounts];
const copyAccounts = [...state.accounts];
if(!multiSelection) {
accounts.forEach(x => x.isSelected = false);
copyAccounts
.filter(x => x.id !== selectedAccount.id)
.forEach(x => x.isSelected = false);
}
const acc = accounts.find(x => x.username === selectedAccount.username && x.instance === selectedAccount.instance);
const acc = copyAccounts.find(x => x.id === selectedAccount.id);
acc.isSelected = !acc.isSelected;
ctx.patchState({
accounts: accounts
accounts: copyAccounts
});
}
}
export class AccountInfo {
id: string;
order: number;
username: string;
instance: string;
token: TokenData;
isSelected: boolean;
isSelected: boolean;
}

View File

@ -26,7 +26,7 @@ export class StreamsState {
}
export class StreamElement {
constructor(public type: StreamTypeEnum, public name: string, public username: string) {
constructor(public type: StreamTypeEnum, public name: string, public accountId: string) {
}
}