simplify user component (#447)

* simplify user component

* language picker selector

src/app/app.component.ts

@@ -31,7 +31,7 @@ import {
 import { ElectronService } from '@ngstack/electron';
 import { Store } from '@ngrx/store';
 import { AppStore } from './store/states/app.state';
-import { SetHeaderColorAction, SetAppNameAction, SetLogoPathAction } from './store/actions';
+import { SetHeaderColorAction, SetAppNameAction, SetLogoPathAction, SetLanguagePickerAction } from './store/actions';
 
 @Component({
     selector: 'app-root',
@@ -115,5 +115,7 @@ export class AppComponent implements OnInit {
         if (logoPath) {
             this.store.dispatch(new SetLogoPathAction(logoPath));
         }
+        const languagePicker = this.config.get<boolean>('languagePicker');
+        this.store.dispatch(new SetLanguagePickerAction(languagePicker));
     }
 }

src/app/components/current-user/current-user.component.html

@@ -1,14 +1,14 @@
-<div title="{{ user?.id }}">
+<div title="{{ (profile$ | async)?.id }}">
-    <div class="current-user__full-name">{{ user?.userName }}</div>
+    <div class="current-user__full-name">{{ (profile$ | async)?.userName }}</div>
     <div
         class="current-user__avatar am-avatar"
         [matMenuTriggerFor]="userMenu">
-            {{ user?.initials }}
+            {{ (profile$ | async)?.initials }}
     </div>
 </div>
 
 <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
-    <button *ngIf="'languagePicker' | adfAppConfig"
+    <button *ngIf="languagePicker$ | async"
         mat-menu-item [matMenuTriggerFor]="langMenu">
         {{ 'APP.LANGUAGE' | translate }}
     </button>

src/app/components/current-user/current-user.component.ts

@@ -23,13 +23,11 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs/Rx';
-
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
+import { Observable } from 'rxjs/Rx';
-import { selectUser } from '../../store/selectors/app.selectors';
+import { selectUser, appLanguagePicker } from '../../store/selectors/app.selectors';
-import { ProfileState } from '../../store/states/profile.state';
+import { AppStore, ProfileState } from '../../store/states';
 
 @Component({
     selector: 'aca-current-user',
@@ -37,20 +35,12 @@ import { ProfileState } from '../../store/states/profile.state';
     encapsulation: ViewEncapsulation.None,
     host: { class: 'aca-current-user' }
 })
-export class CurrentUserComponent implements OnInit, OnDestroy {
+export class CurrentUserComponent {
-    private subscriptions: Subscription[] = [];
+    profile$: Observable<ProfileState>;
+    languagePicker$: Observable<boolean>;
 
-    user: ProfileState;
+    constructor(store: Store<AppStore>) {
-
+        this.profile$ = store.select(selectUser);
-    constructor(private store: Store<AppStore>) {}
+        this.languagePicker$ = store.select(appLanguagePicker);
-
-    ngOnInit() {
-        this.subscriptions = this.subscriptions.concat([
-            this.store.select(selectUser).subscribe((user) => this.user = user)
-        ]);
-    }
-
-    ngOnDestroy() {
-        this.subscriptions.forEach(s => s.unsubscribe());
     }
 }

src/app/store/actions/app.actions.ts

@@ -28,6 +28,7 @@ import { Action } from '@ngrx/store';
 export const SET_APP_NAME = 'SET_APP_NAME';
 export const SET_HEADER_COLOR = 'SET_HEADER_COLOR';
 export const SET_LOGO_PATH = 'SET_LOGO_PATH';
+export const SET_LANGUAGE_PICKER = 'SET_LANGUAGE_PICKER';
 
 export class SetAppNameAction implements Action {
     readonly type = SET_APP_NAME;
@@ -43,3 +44,8 @@ export class SetLogoPathAction implements Action {
     readonly type = SET_LOGO_PATH;
     constructor(public payload: string) {}
 }
+
+export class SetLanguagePickerAction implements Action {
+    readonly type = SET_LANGUAGE_PICKER;
+    constructor(public payload: boolean) {}
+}

src/app/store/app-store.module.ts

@@ -26,7 +26,7 @@
 import { NgModule } from '@angular/core';
 import { StoreModule } from '@ngrx/store';
 import { appReducer } from './reducers/app.reducer';
-import { INITIAL_STATE } from './states/app.state';
+import { INITIAL_STATE } from './states';
 import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { EffectsModule } from '@ngrx/effects';
 import { environment } from '../../environments/environment';

src/app/store/reducers/app.reducer.ts

@@ -37,6 +37,10 @@ import {
     SET_USER,
     SetUserAction
 } from '../actions';
+import {
+    SET_LANGUAGE_PICKER,
+    SetLanguagePickerAction
+} from '../actions/app.actions';
 
 export function appReducer(
     state: AppState = INITIAL_APP_STATE,
@@ -60,7 +64,10 @@ export function appReducer(
             ));
             break;
         case SET_USER:
-            newState = updateUser(state, <SetUserAction>(
+            newState = updateUser(state, <SetUserAction>action);
+            break;
+        case SET_LANGUAGE_PICKER:
+            newState = updateLanguagePicker(state, <SetLanguagePickerAction>(
                 action
             ));
             break;
@@ -80,6 +87,15 @@ function updateHeaderColor(
     return newState;
 }
 
+function updateLanguagePicker(
+    state: AppState,
+    action: SetLanguagePickerAction
+): AppState {
+    const newState = Object.assign({}, state);
+    newState.languagePicker = action.payload;
+    return newState;
+}
+
 function updateAppName(state: AppState, action: SetAppNameAction): AppState {
     const newState = Object.assign({}, state);
     newState.appName = action.payload;
@@ -100,7 +116,7 @@ function updateUser(state: AppState, action: SetUserAction): AppState {
     const firstName = user.firstName || '';
     const lastName = user.lastName || '';
     const userName = `${firstName} ${lastName}`;
-    const initials = [ firstName[0], lastName[0] ].join('');
+    const initials = [firstName[0], lastName[0]].join('');
     const isAdmin = user.capabilities ? user.capabilities.isAdmin : true;
 
     newState.user = {

src/app/store/selectors/app.selectors.ts

@@ -24,11 +24,12 @@
  */
 
 import { createSelector } from '@ngrx/store';
-import { AppStore, AppState } from '../states/app.state';
+import { AppStore } from '../states/app.state';
 
 export const selectApp = (state: AppStore) => state.app;
-export const selectHeaderColor = createSelector(selectApp, (state: AppState) => state.headerColor);
+export const selectHeaderColor = createSelector(selectApp, state => state.headerColor);
-export const selectAppName = createSelector(selectApp, (state: AppState) => state.appName);
+export const selectAppName = createSelector(selectApp, state => state.appName);
-export const selectLogoPath = createSelector(selectApp, (state: AppState) => state.logoPath);
+export const selectLogoPath = createSelector(selectApp, state => state.logoPath);
-export const appSelection =  createSelector(selectApp, (state: AppState) => state.selection);
+export const appSelection =  createSelector(selectApp, state => state.selection);
-export const selectUser =  createSelector(selectApp, (state: AppState) => state.user);
+export const appLanguagePicker = createSelector(selectApp, state => state.languagePicker);
+export const selectUser =  createSelector(selectApp, state => state.user);

src/app/store/states.ts

@@ -0,0 +1,28 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export * from './states/app.state';
+export * from './states/profile.state';
+export * from './states/selection.state';

src/app/store/states/app.state.ts

@@ -30,6 +30,7 @@ export interface AppState {
     appName: string;
     headerColor: string;
     logoPath: string;
+    languagePicker: boolean;
     selection: SelectionState;
     user: ProfileState;
 }
@@ -38,6 +39,7 @@ export const INITIAL_APP_STATE: AppState = {
     appName: 'Alfresco Example Content Application',
     headerColor: '#2196F3',
     logoPath: 'assets/images/alfresco-logo-white.svg',
+    languagePicker: false,
     user: {
         isAdmin: true, // 5.2.x
         id: null,