account selection now handled in state management
This commit is contained in:
parent
bf1a944e1a
commit
4e83d55ea6
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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) => {
|
||||
|
@ -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;
|
||||
}
|
@ -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) {
|
||||
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user