From bc554bb8d304f3956b5564506a7f0cd567cd0275 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@gmail.com>
Date: Fri, 22 Jun 2018 04:59:53 +0100
Subject: [PATCH] simplify user component (#447)

* simplify user component

* language picker selector
---
 src/app/app.component.ts                      |  4 ++-
 .../current-user/current-user.component.html  |  8 ++---
 .../current-user/current-user.component.ts    | 30 +++++++------------
 src/app/store/actions/app.actions.ts          |  6 ++++
 src/app/store/app-store.module.ts             |  2 +-
 src/app/store/reducers/app.reducer.ts         | 20 +++++++++++--
 src/app/store/selectors/app.selectors.ts      | 13 ++++----
 src/app/store/states.ts                       | 28 +++++++++++++++++
 src/app/store/states/app.state.ts             |  2 ++
 9 files changed, 79 insertions(+), 34 deletions(-)
 create mode 100644 src/app/store/states.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c34e999e2..c65451ac0 100644
--- a/src/app/app.component.ts
+++ b/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));
     }
 }
diff --git a/src/app/components/current-user/current-user.component.html b/src/app/components/current-user/current-user.component.html
index 17d9c756d..46858be8c 100644
--- a/src/app/components/current-user/current-user.component.html
+++ b/src/app/components/current-user/current-user.component.html
@@ -1,14 +1,14 @@
-<div title="{{ user?.id }}">
-    <div class="current-user__full-name">{{ user?.userName }}</div>
+<div title="{{ (profile$ | async)?.id }}">
+    <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>
diff --git a/src/app/components/current-user/current-user.component.ts b/src/app/components/current-user/current-user.component.ts
index 014207cc5..2f10576f6 100644
--- a/src/app/components/current-user/current-user.component.ts
+++ b/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 { Subscription } from 'rxjs/Rx';
-
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
-import { selectUser } from '../../store/selectors/app.selectors';
-import { ProfileState } from '../../store/states/profile.state';
+import { Observable } from 'rxjs/Rx';
+import { selectUser, appLanguagePicker } from '../../store/selectors/app.selectors';
+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 {
-    private subscriptions: Subscription[] = [];
+export class CurrentUserComponent {
+    profile$: Observable<ProfileState>;
+    languagePicker$: Observable<boolean>;
 
-    user: ProfileState;
-
-    constructor(private store: Store<AppStore>) {}
-
-    ngOnInit() {
-        this.subscriptions = this.subscriptions.concat([
-            this.store.select(selectUser).subscribe((user) => this.user = user)
-        ]);
-    }
-
-    ngOnDestroy() {
-        this.subscriptions.forEach(s => s.unsubscribe());
+    constructor(store: Store<AppStore>) {
+        this.profile$ = store.select(selectUser);
+        this.languagePicker$ = store.select(appLanguagePicker);
     }
 }
diff --git a/src/app/store/actions/app.actions.ts b/src/app/store/actions/app.actions.ts
index 7b800f8fd..c73a019f5 100644
--- a/src/app/store/actions/app.actions.ts
+++ b/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) {}
+}
diff --git a/src/app/store/app-store.module.ts b/src/app/store/app-store.module.ts
index 2fff5f17b..ecf31fd66 100644
--- a/src/app/store/app-store.module.ts
+++ b/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';
diff --git a/src/app/store/reducers/app.reducer.ts b/src/app/store/reducers/app.reducer.ts
index 03e736edc..f8d234372 100644
--- a/src/app/store/reducers/app.reducer.ts
+++ b/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 = {
diff --git a/src/app/store/selectors/app.selectors.ts b/src/app/store/selectors/app.selectors.ts
index c5ce779e0..8fe15c58c 100644
--- a/src/app/store/selectors/app.selectors.ts
+++ b/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 selectAppName = createSelector(selectApp, (state: AppState) => state.appName);
-export const selectLogoPath = createSelector(selectApp, (state: AppState) => state.logoPath);
-export const appSelection =  createSelector(selectApp, (state: AppState) => state.selection);
-export const selectUser =  createSelector(selectApp, (state: AppState) => state.user);
+export const selectHeaderColor = createSelector(selectApp, state => state.headerColor);
+export const selectAppName = createSelector(selectApp, state => state.appName);
+export const selectLogoPath = createSelector(selectApp, state => state.logoPath);
+export const appSelection =  createSelector(selectApp, state => state.selection);
+export const appLanguagePicker = createSelector(selectApp, state => state.languagePicker);
+export const selectUser =  createSelector(selectApp, state => state.user);
diff --git a/src/app/store/states.ts b/src/app/store/states.ts
new file mode 100644
index 000000000..7309f63a5
--- /dev/null
+++ b/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';
diff --git a/src/app/store/states/app.state.ts b/src/app/store/states/app.state.ts
index 46848f894..e63212685 100644
--- a/src/app/store/states/app.state.ts
+++ b/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,