{{ 'anms.examples.stocks.text1' | translate }} HTTP
diff --git a/src/app/examples/stock-market/components/stock-market-container.component.scss b/src/app/examples/stock-market/components/stock-market-container.component.scss
index e1be3a0bc..7469dde50 100755
--- a/src/app/examples/stock-market/components/stock-market-container.component.scss
+++ b/src/app/examples/stock-market/components/stock-market-container.component.scss
@@ -33,7 +33,7 @@ mat-spinner {
margin: auto;
}
-.error {
+.error-state {
text-align: center;
padding: 20px;
diff --git a/src/app/examples/stock-market/components/stock-market-container.component.scss-theme.scss b/src/app/examples/stock-market/components/stock-market-container.component.scss-theme.scss
index 778002e5c..360d26366 100755
--- a/src/app/examples/stock-market/components/stock-market-container.component.scss-theme.scss
+++ b/src/app/examples/stock-market/components/stock-market-container.component.scss-theme.scss
@@ -10,7 +10,7 @@
}
}
- .error {
+ .error-state {
fa-icon {
color: mat-color($warn);
}
diff --git a/src/app/examples/stock-market/components/stock-market-container.component.spec.ts b/src/app/examples/stock-market/components/stock-market-container.component.spec.ts
index 4093b58cb..803305e08 100755
--- a/src/app/examples/stock-market/components/stock-market-container.component.spec.ts
+++ b/src/app/examples/stock-market/components/stock-market-container.component.spec.ts
@@ -22,7 +22,7 @@ describe('StockMarketContainerComponent', () => {
const getSpinner = () => fixture.debugElement.query(By.css('mat-spinner'));
- const getError = () => fixture.debugElement.query(By.css('.error'));
+ const getError = () => fixture.debugElement.query(By.css('.error-state'));
const getStocks = () =>
fixture.debugElement.query(By.css('mat-card mat-card-title'));
diff --git a/src/app/examples/stock-market/components/stock-market-container.component.ts b/src/app/examples/stock-market/components/stock-market-container.component.ts
index f17301e2f..7eccdf46e 100755
--- a/src/app/examples/stock-market/components/stock-market-container.component.ts
+++ b/src/app/examples/stock-market/components/stock-market-container.component.ts
@@ -1,12 +1,7 @@
-import {
- Component,
- OnInit,
- OnDestroy,
- ChangeDetectionStrategy
-} from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Store, select } from '@ngrx/store';
-import { Subject, Observable } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
@@ -21,32 +16,17 @@ import { State } from '../../examples.state';
styleUrls: ['./stock-market-container.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class StockMarketContainerComponent implements OnInit, OnDestroy {
- private unsubscribe$: Subject = new Subject();
- private initialized: boolean;
-
- stocks$: Observable = this.store.pipe(
- select(selectStockMarket)
- );
+export class StockMarketContainerComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
+ stocks$: Observable;
constructor(public store: Store) {}
ngOnInit() {
- this.initialized = false;
- this.stocks$.pipe(takeUntil(this.unsubscribe$)).subscribe(stocks => {
- if (!this.initialized) {
- this.initialized = true;
- this.store.dispatch(
- new ActionStockMarketRetrieve({ symbol: stocks.symbol })
- );
- }
- });
- }
-
- ngOnDestroy(): void {
- this.unsubscribe$.next();
- this.unsubscribe$.complete();
+ this.stocks$ = this.store.pipe(select(selectStockMarket));
+ this.stocks$
+ .pipe(take(1))
+ .subscribe(stocks => this.onSymbolChange(stocks.symbol));
}
onSymbolChange(symbol: string) {
diff --git a/src/app/examples/stock-market/stock-market.effects.spec.ts b/src/app/examples/stock-market/stock-market.effects.spec.ts
index 65f0d4bc7..fcf4442e4 100644
--- a/src/app/examples/stock-market/stock-market.effects.spec.ts
+++ b/src/app/examples/stock-market/stock-market.effects.spec.ts
@@ -9,7 +9,7 @@ import {
} from './stock-market.actions';
import { StockMarketEffects, STOCK_MARKET_KEY } from './stock-market.effects';
import { Stock } from './stock-market.model';
-import { StockMarketService } from '@app/examples/stock-market/stock-market.service';
+import { StockMarketService } from './stock-market.service';
describe('StockMarketEffects', () => {
let localStorage: jasmine.SpyObj;
diff --git a/src/app/examples/todos/components/todos-container.component.html b/src/app/examples/todos/components/todos-container.component.html
index 92b2ea567..d4b10c54a 100755
--- a/src/app/examples/todos/components/todos-container.component.html
+++ b/src/app/examples/todos/components/todos-container.component.html
@@ -1,4 +1,4 @@
-
+
-
-
- {{ 'anms.examples.todos.list' | translate }}
-
-
+
+
+
+ {{todo.name}}
+
+
+
+
+
+
{{ 'anms.examples.todos.example' | translate }}
@@ -80,4 +82,5 @@
{{ 'anms.examples.todos.example' | translate }}
+
diff --git a/src/app/examples/todos/components/todos-container.component.spec.ts b/src/app/examples/todos/components/todos-container.component.spec.ts
index 1601272cb..f2cd3b387 100755
--- a/src/app/examples/todos/components/todos-container.component.spec.ts
+++ b/src/app/examples/todos/components/todos-container.component.spec.ts
@@ -8,6 +8,7 @@ import {
} from '@angular-extensions/testing-library';
import { MockStore, TestingModule } from '@testing/utils';
+import { NotificationService } from '@app/core';
import {
ActionTodosFilter,
@@ -17,7 +18,6 @@ import {
import { TodosState } from '../todos.model';
import { TodosContainerComponent } from './todos-container.component';
import { State } from '../../examples.state';
-import { NotificationService } from '@app/core/notifications/notification.service';
describe('TodosComponent', () => {
let component: RenderResult;
diff --git a/src/app/examples/todos/components/todos-container.component.ts b/src/app/examples/todos/components/todos-container.component.ts
index 0762d8f3c..d8db710e6 100755
--- a/src/app/examples/todos/components/todos-container.component.ts
+++ b/src/app/examples/todos/components/todos-container.component.ts
@@ -1,30 +1,18 @@
-import {
- Component,
- OnDestroy,
- OnInit,
- ChangeDetectionStrategy
-} from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { select, Store } from '@ngrx/store';
-import { Subject, Observable } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
-import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
-import { NotificationService } from '@app/core/notifications/notification.service';
+import { ROUTE_ANIMATIONS_ELEMENTS, NotificationService } from '@app/core';
import {
ActionTodosAdd,
ActionTodosFilter,
- ActionTodosPersist,
ActionTodosRemoveDone,
ActionTodosToggle
} from '../todos.actions';
-import {
- selectTodos,
- selectTodosState,
- selectRemoveDoneTodosDisabled
-} from '../todos.selectors';
+import { selectTodos, selectRemoveDoneTodosDisabled } from '../todos.selectors';
import { Todo, TodosFilter } from '../todos.model';
import { State } from '../../examples.state';
@@ -34,12 +22,10 @@ import { State } from '../../examples.state';
styleUrls: ['./todos-container.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class TodosContainerComponent implements OnInit, OnDestroy {
- private unsubscribe$: Subject
= new Subject();
-
+export class TodosContainerComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
- todos: Observable;
- removeDoneDisabled: Observable;
+ todos$: Observable;
+ removeDoneDisabled$: Observable;
newTodo = '';
constructor(
@@ -50,26 +36,12 @@ export class TodosContainerComponent implements OnInit, OnDestroy {
) {}
ngOnInit() {
- this.store
- .pipe(
- select(selectTodosState),
- takeUntil(this.unsubscribe$)
- )
- .subscribe(todos => {
- this.store.dispatch(new ActionTodosPersist({ todos }));
- });
-
- this.todos = this.store.pipe(select(selectTodos));
- this.removeDoneDisabled = this.store.pipe(
+ this.todos$ = this.store.pipe(select(selectTodos));
+ this.removeDoneDisabled$ = this.store.pipe(
select(selectRemoveDoneTodosDisabled)
);
}
- ngOnDestroy(): void {
- this.unsubscribe$.next();
- this.unsubscribe$.complete();
- }
-
get isAddTodoDisabled() {
return this.newTodo.length < 4;
}
diff --git a/src/app/examples/todos/todos.actions.spec.ts b/src/app/examples/todos/todos.actions.spec.ts
index 3054554e4..f54e65507 100755
--- a/src/app/examples/todos/todos.actions.spec.ts
+++ b/src/app/examples/todos/todos.actions.spec.ts
@@ -1,7 +1,6 @@
import {
ActionTodosAdd,
ActionTodosFilter,
- ActionTodosPersist,
ActionTodosRemoveDone,
ActionTodosToggle,
TodosActionTypes
@@ -52,17 +51,4 @@ describe('Todos Actions', () => {
});
});
});
-
- describe('ActionTodosPersist', () => {
- it('should create an action', () => {
- const action = new ActionTodosPersist({
- todos: { filter: 'ALL', items: [] }
- });
-
- expect({ ...action }).toEqual({
- type: TodosActionTypes.PERSIST,
- payload: { todos: { filter: 'ALL', items: [] } }
- });
- });
- });
});
diff --git a/src/app/examples/todos/todos.actions.ts b/src/app/examples/todos/todos.actions.ts
index df02fb460..6b98287dc 100755
--- a/src/app/examples/todos/todos.actions.ts
+++ b/src/app/examples/todos/todos.actions.ts
@@ -7,8 +7,7 @@ export enum TodosActionTypes {
ADD = '[Todos] Add',
TOGGLE = '[Todos] Toggle',
REMOVE_DONE = '[Todos] Remove Done',
- FILTER = '[Todos] Filter',
- PERSIST = '[Todos] Persist'
+ FILTER = '[Todos] Filter'
}
export class ActionTodosAdd implements Action {
@@ -36,15 +35,8 @@ export class ActionTodosFilter implements Action {
constructor(readonly payload: { filter: TodosFilter }) {}
}
-export class ActionTodosPersist implements Action {
- readonly type = TodosActionTypes.PERSIST;
-
- constructor(readonly payload: { todos: TodosState }) {}
-}
-
export type TodosActions =
| ActionTodosAdd
| ActionTodosToggle
| ActionTodosRemoveDone
- | ActionTodosFilter
- | ActionTodosPersist;
+ | ActionTodosFilter;
diff --git a/src/app/examples/todos/todos.effects.spec.ts b/src/app/examples/todos/todos.effects.spec.ts
index e192ccb15..f140ca4a3 100644
--- a/src/app/examples/todos/todos.effects.spec.ts
+++ b/src/app/examples/todos/todos.effects.spec.ts
@@ -1,41 +1,47 @@
import { LocalStorageService } from '@app/core';
import { Actions, getEffectsMetadata } from '@ngrx/effects';
+import { Store } from '@ngrx/store';
import { cold } from 'jasmine-marbles';
-import { EMPTY } from 'rxjs';
-import { ActionTodosPersist } from './todos.actions';
+import { of } from 'rxjs';
+
+import { State } from '../examples.state';
+import { ActionTodosToggle } from './todos.actions';
import { TodosEffects, TODOS_KEY } from './todos.effects';
import { TodosState } from './todos.model';
describe('TodosEffects', () => {
let localStorage: jasmine.SpyObj;
+ let store: jasmine.SpyObj>;
beforeEach(() => {
localStorage = jasmine.createSpyObj('LocalStorageService', ['setItem']);
+ store = jasmine.createSpyObj('store', ['pipe']);
});
describe('persistTodos', () => {
it('should not dispatch any action', () => {
- const actions = new Actions(EMPTY);
- const effect = new TodosEffects(actions, localStorage);
+ const actions$ = new Actions();
+ const effect = new TodosEffects(actions$, store, localStorage);
const metadata = getEffectsMetadata(effect);
expect(metadata.persistTodos).toEqual({ dispatch: false });
});
- it('should call setItem on LocalStorageService for PERSIST action', () => {
+ it('should call setItem on LocalStorageService for any action', () => {
const todosState: TodosState = {
items: [{ id: '1', name: 'Test ToDo', done: false }],
filter: 'ALL'
};
- const persistAction = new ActionTodosPersist({ todos: todosState });
+ store.pipe.and.returnValue(of(todosState));
+ const persistAction = new ActionTodosToggle({ id: 'a' });
const source = cold('a', { a: persistAction });
const actions = new Actions(source);
- const effect = new TodosEffects(actions, localStorage);
+ const effect = new TodosEffects(actions, store, localStorage);
effect.persistTodos.subscribe(() => {
expect(localStorage.setItem).toHaveBeenCalledWith(
TODOS_KEY,
- persistAction.payload.todos
+ todosState
);
});
});
diff --git a/src/app/examples/todos/todos.effects.ts b/src/app/examples/todos/todos.effects.ts
index 75516f275..be0268424 100755
--- a/src/app/examples/todos/todos.effects.ts
+++ b/src/app/examples/todos/todos.effects.ts
@@ -1,11 +1,13 @@
import { Injectable } from '@angular/core';
-import { Action } from '@ngrx/store';
+import { Action, select, Store } from '@ngrx/store';
import { Actions, Effect, ofType } from '@ngrx/effects';
-import { tap } from 'rxjs/operators';
+import { tap, withLatestFrom } from 'rxjs/operators';
import { LocalStorageService } from '@app/core';
-import { ActionTodosPersist, TodosActionTypes } from './todos.actions';
+import { State } from '../examples.state';
+import { TodosActionTypes } from './todos.actions';
+import { selectTodosState } from './todos.selectors';
export const TODOS_KEY = 'EXAMPLES.TODOS';
@@ -13,14 +15,19 @@ export const TODOS_KEY = 'EXAMPLES.TODOS';
export class TodosEffects {
constructor(
private actions$: Actions,
+ private store: Store,
private localStorageService: LocalStorageService
) {}
@Effect({ dispatch: false })
persistTodos = this.actions$.pipe(
- ofType(TodosActionTypes.PERSIST),
- tap(action =>
- this.localStorageService.setItem(TODOS_KEY, action.payload.todos)
- )
+ ofType(
+ TodosActionTypes.ADD,
+ TodosActionTypes.FILTER,
+ TodosActionTypes.REMOVE_DONE,
+ TodosActionTypes.TOGGLE
+ ),
+ withLatestFrom(this.store.pipe(select(selectTodosState))),
+ tap(([action, todos]) => this.localStorageService.setItem(TODOS_KEY, todos))
);
}
diff --git a/src/app/settings/components/settings-container.component.html b/src/app/settings/components/settings-container.component.html
index d906194e2..7cab2a716 100755
--- a/src/app/settings/components/settings-container.component.html
+++ b/src/app/settings/components/settings-container.component.html
@@ -3,86 +3,88 @@
{{ 'anms.settings.title' | translate }}
-
-
-
{{ 'anms.settings.general.title' | translate }}
-
-
-
-
{{ 'anms.settings.themes.title' | translate }}
-
diff --git a/src/app/settings/components/settings-container.component.spec.ts b/src/app/settings/components/settings-container.component.spec.ts
index 880dcbf3a..92d122fe9 100755
--- a/src/app/settings/components/settings-container.component.spec.ts
+++ b/src/app/settings/components/settings-container.component.spec.ts
@@ -48,13 +48,6 @@ describe('SettingsComponent', () => {
fixture.detectChanges();
}));
- it('should be created', () => {
- expect(component).toBeTruthy();
- expect(component.settings.theme).toBe('DEFAULT-THEME');
- expect(component.settings.autoNightMode).toBeTruthy();
- expect(component.settings.pageAnimations).toBeTruthy();
- });
-
it('should dispatch change sticky header on sticky header toggle', () => {
dispatchSpy = spyOn(store, 'dispatch');
const componentDebug = fixture.debugElement;
@@ -63,7 +56,7 @@ describe('SettingsComponent', () => {
slider.triggerEventHandler('change', { checked: false });
fixture.detectChanges();
- expect(dispatchSpy).toHaveBeenCalledTimes(2);
+ expect(dispatchSpy).toHaveBeenCalledTimes(1);
expect(dispatchSpy).toHaveBeenCalledWith(
new ActionSettingsChangeStickyHeader({ stickyHeader: false })
);
@@ -79,7 +72,7 @@ describe('SettingsComponent', () => {
fixture.detectChanges();
- expect(dispatchSpy).toHaveBeenCalledTimes(2);
+ expect(dispatchSpy).toHaveBeenCalledTimes(1);
expect(dispatchSpy).toHaveBeenCalledWith(
new ActionSettingsChangeTheme({ theme: 'LIGHT-THEME' })
);
@@ -93,7 +86,7 @@ describe('SettingsComponent', () => {
slider.triggerEventHandler('change', { checked: false });
fixture.detectChanges();
- expect(dispatchSpy).toHaveBeenCalledTimes(2);
+ expect(dispatchSpy).toHaveBeenCalledTimes(1);
expect(dispatchSpy).toHaveBeenCalledWith(
new ActionSettingsChangeAutoNightMode({ autoNightMode: false })
);
@@ -107,7 +100,7 @@ describe('SettingsComponent', () => {
slider.triggerEventHandler('change', { checked: false });
fixture.detectChanges();
- expect(dispatchSpy).toHaveBeenCalledTimes(2);
+ expect(dispatchSpy).toHaveBeenCalledTimes(1);
expect(dispatchSpy).toHaveBeenCalledWith(
new ActionSettingsChangeAnimationsPage({ pageAnimations: false })
);
@@ -121,7 +114,7 @@ describe('SettingsComponent', () => {
slider.triggerEventHandler('change', { checked: false });
fixture.detectChanges();
- expect(dispatchSpy).toHaveBeenCalledTimes(2);
+ expect(dispatchSpy).toHaveBeenCalledTimes(1);
expect(dispatchSpy).toHaveBeenCalledWith(
new ActionSettingsChangeAnimationsElements({ elementsAnimations: false })
);
diff --git a/src/app/settings/components/settings-container.component.ts b/src/app/settings/components/settings-container.component.ts
index df5bed8fb..479a5ef19 100755
--- a/src/app/settings/components/settings-container.component.ts
+++ b/src/app/settings/components/settings-container.component.ts
@@ -1,13 +1,13 @@
import {
Component,
OnInit,
- OnDestroy,
ChangeDetectionStrategy,
ChangeDetectorRef
} from '@angular/core';
import { Store, select } from '@ngrx/store';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
import {
ActionSettingsChangeAnimationsElements,
@@ -15,13 +15,9 @@ import {
ActionSettingsChangeAutoNightMode,
ActionSettingsChangeLanguage,
ActionSettingsChangeTheme,
- ActionSettingsPersist,
ActionSettingsChangeStickyHeader
} from '../settings.actions';
-
-import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
-
-import { SettingsState } from '../settings.model';
+import { SettingsState, State } from '../settings.model';
import { selectSettings } from '../settings.selectors';
@Component({
@@ -30,10 +26,9 @@ import { selectSettings } from '../settings.selectors';
styleUrls: ['./settings-container.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-export class SettingsContainerComponent implements OnInit, OnDestroy {
- private unsubscribe$: Subject
= new Subject();
+export class SettingsContainerComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
- settings: SettingsState;
+ settings$: Observable;
themes = [
{ value: 'DEFAULT-THEME', label: 'blue' },
@@ -51,58 +46,39 @@ export class SettingsContainerComponent implements OnInit, OnDestroy {
{ value: 'pt-br', label: 'pt-br' }
];
- constructor(private store: Store<{}>, private cd: ChangeDetectorRef) {}
+ constructor(private store: Store) {}
ngOnInit() {
- this.store
- .pipe(
- select(selectSettings),
- takeUntil(this.unsubscribe$)
- )
- .subscribe(settings => {
- this.settings = settings;
- this.cd.markForCheck();
- });
- }
-
- ngOnDestroy(): void {
- this.unsubscribe$.next();
- this.unsubscribe$.complete();
+ this.settings$ = this.store.pipe(select(selectSettings));
}
onLanguageSelect({ value: language }) {
this.store.dispatch(new ActionSettingsChangeLanguage({ language }));
- this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
}
onThemeSelect({ value: theme }) {
this.store.dispatch(new ActionSettingsChangeTheme({ theme }));
- this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
}
onAutoNightModeToggle({ checked: autoNightMode }) {
this.store.dispatch(
new ActionSettingsChangeAutoNightMode({ autoNightMode })
);
- this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
}
onStickyHeaderToggle({ checked: stickyHeader }) {
this.store.dispatch(new ActionSettingsChangeStickyHeader({ stickyHeader }));
- this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
}
onPageAnimationsToggle({ checked: pageAnimations }) {
this.store.dispatch(
new ActionSettingsChangeAnimationsPage({ pageAnimations })
);
- this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
}
onElementsAnimationsToggle({ checked: elementsAnimations }) {
this.store.dispatch(
new ActionSettingsChangeAnimationsElements({ elementsAnimations })
);
- this.store.dispatch(new ActionSettingsPersist({ settings: this.settings }));
}
}
diff --git a/src/app/settings/settings.actions.spec.ts b/src/app/settings/settings.actions.spec.ts
index c5cc9d75d..b22097461 100755
--- a/src/app/settings/settings.actions.spec.ts
+++ b/src/app/settings/settings.actions.spec.ts
@@ -6,7 +6,6 @@ import {
ActionSettingsChangeLanguage,
ActionSettingsChangeStickyHeader,
ActionSettingsChangeTheme,
- ActionSettingsPersist,
SettingsActionTypes
} from './settings.actions';
import { NIGHT_MODE_THEME } from './settings.model';
@@ -78,31 +77,4 @@ describe('Settings Actions', () => {
expect(action.type).toEqual(SettingsActionTypes.CHANGE_STICKY_HEADER);
expect(action.payload.stickyHeader).toEqual(true);
});
-
- it('should create ActionSettingsPersist action', () => {
- const action = new ActionSettingsPersist({
- settings: {
- autoNightMode: true,
- elementsAnimations: true,
- language: 'en',
- theme: NIGHT_MODE_THEME,
- pageAnimations: true,
- pageAnimationsDisabled: true,
- stickyHeader: true
- }
- });
-
- expect(action.type).toEqual(SettingsActionTypes.PERSIST);
- expect(action.payload.settings).toEqual(
- jasmine.objectContaining({
- autoNightMode: true,
- elementsAnimations: true,
- language: 'en',
- theme: NIGHT_MODE_THEME,
- pageAnimations: true,
- pageAnimationsDisabled: true,
- stickyHeader: true
- })
- );
- });
});
diff --git a/src/app/settings/settings.actions.ts b/src/app/settings/settings.actions.ts
index 4055ebe4d..9ac1cec43 100755
--- a/src/app/settings/settings.actions.ts
+++ b/src/app/settings/settings.actions.ts
@@ -1,6 +1,6 @@
import { Action } from '@ngrx/store';
-import { Language, SettingsState } from './settings.model';
+import { Language } from './settings.model';
export enum SettingsActionTypes {
CHANGE_LANGUAGE = '[Settings] Change Language',
@@ -9,8 +9,7 @@ export enum SettingsActionTypes {
CHANGE_STICKY_HEADER = '[Settings] Change Sticky Header',
CHANGE_ANIMATIONS_PAGE = '[Settings] Change Animations Page',
CHANGE_ANIMATIONS_PAGE_DISABLED = '[Settings] Change Animations Page Disabled',
- CHANGE_ANIMATIONS_ELEMENTS = '[Settings] Change Animations Elements',
- PERSIST = '[Settings] Persist'
+ CHANGE_ANIMATIONS_ELEMENTS = '[Settings] Change Animations Elements'
}
export class ActionSettingsChangeLanguage implements Action {
@@ -55,14 +54,7 @@ export class ActionSettingsChangeAnimationsElements implements Action {
constructor(readonly payload: { elementsAnimations: boolean }) {}
}
-export class ActionSettingsPersist implements Action {
- readonly type = SettingsActionTypes.PERSIST;
-
- constructor(readonly payload: { settings: SettingsState }) {}
-}
-
export type SettingsActions =
- | ActionSettingsPersist
| ActionSettingsChangeLanguage
| ActionSettingsChangeTheme
| ActionSettingsChangeAnimationsPage
diff --git a/src/app/settings/settings.effects.spec.ts b/src/app/settings/settings.effects.spec.ts
index d22877e68..c62025bfc 100755
--- a/src/app/settings/settings.effects.spec.ts
+++ b/src/app/settings/settings.effects.spec.ts
@@ -1,14 +1,18 @@
import { AnimationsService, LocalStorageService } from '@app/core';
import { Actions, getEffectsMetadata } from '@ngrx/effects';
import { cold } from 'jasmine-marbles';
-import { EMPTY } from 'rxjs';
-import { ActionSettingsPersist } from './settings.actions';
+import { of } from 'rxjs';
+
import { SettingsEffects, SETTINGS_KEY } from './settings.effects';
import { SettingsState } from './settings.model';
+import { ActionSettingsChangeTheme } from './settings.actions';
+import { Store } from '@ngrx/store';
+import { State } from '@app/examples/examples.state';
describe('SettingsEffects', () => {
let localStorageService: jasmine.SpyObj;
let animationsService: jasmine.SpyObj;
+ let store: jasmine.SpyObj>;
beforeEach(() => {
localStorageService = jasmine.createSpyObj('LocalStorageService', [
@@ -17,13 +21,15 @@ describe('SettingsEffects', () => {
animationsService = jasmine.createSpyObj('AnimationsService', [
'updateRouteAnimationType'
]);
+ store = jasmine.createSpyObj('store', ['pipe']);
});
describe('persistSettings', () => {
it('should not dispatch any action', () => {
- const actions = new Actions(EMPTY);
+ const actions = new Actions();
const effect = new SettingsEffects(
actions,
+ store,
localStorageService,
animationsService
);
@@ -43,11 +49,13 @@ describe('SettingsEffects', () => {
stickyHeader: false,
pageAnimationsDisabled: true
};
- const persistAction = new ActionSettingsPersist({ settings: settings });
+ store.pipe.and.returnValue(of(settings));
+ const persistAction = new ActionSettingsChangeTheme({ theme: 'DEFAULT' });
const source = cold('a', { a: persistAction });
const actions = new Actions(source);
const effect = new SettingsEffects(
actions,
+ store,
localStorageService,
animationsService
);
@@ -55,7 +63,7 @@ describe('SettingsEffects', () => {
effect.persistSettings.subscribe(() => {
expect(localStorageService.setItem).toHaveBeenCalledWith(
SETTINGS_KEY,
- persistAction.payload.settings
+ settings
);
expect(animationsService.updateRouteAnimationType).toHaveBeenCalledWith(
true,
diff --git a/src/app/settings/settings.effects.ts b/src/app/settings/settings.effects.ts
index fc704d8cb..a5e3cbb63 100755
--- a/src/app/settings/settings.effects.ts
+++ b/src/app/settings/settings.effects.ts
@@ -1,11 +1,13 @@
import { Injectable } from '@angular/core';
-import { Action } from '@ngrx/store';
+import { Action, select, Store } from '@ngrx/store';
import { Actions, Effect, ofType } from '@ngrx/effects';
-import { tap } from 'rxjs/operators';
+import { tap, withLatestFrom } from 'rxjs/operators';
import { LocalStorageService, AnimationsService } from '@app/core';
-import { ActionSettingsPersist, SettingsActionTypes } from './settings.actions';
+import { SettingsActionTypes } from './settings.actions';
+import { State } from './settings.model';
+import { selectSettingsState } from './settings.selectors';
export const SETTINGS_KEY = 'SETTINGS';
@@ -13,15 +15,24 @@ export const SETTINGS_KEY = 'SETTINGS';
export class SettingsEffects {
constructor(
private actions$: Actions,
+ private store: Store,
private localStorageService: LocalStorageService,
private animationsService: AnimationsService
) {}
@Effect({ dispatch: false })
persistSettings = this.actions$.pipe(
- ofType(SettingsActionTypes.PERSIST),
- tap(action => {
- const { settings } = action.payload;
+ ofType(
+ SettingsActionTypes.CHANGE_ANIMATIONS_ELEMENTS,
+ SettingsActionTypes.CHANGE_ANIMATIONS_PAGE,
+ SettingsActionTypes.CHANGE_ANIMATIONS_PAGE_DISABLED,
+ SettingsActionTypes.CHANGE_AUTO_NIGHT_AUTO_MODE,
+ SettingsActionTypes.CHANGE_LANGUAGE,
+ SettingsActionTypes.CHANGE_STICKY_HEADER,
+ SettingsActionTypes.CHANGE_THEME
+ ),
+ withLatestFrom(this.store.pipe(select(selectSettingsState))),
+ tap(([action, settings]) => {
const { pageAnimations, elementsAnimations } = settings;
this.localStorageService.setItem(SETTINGS_KEY, settings);
this.animationsService.updateRouteAnimationType(
diff --git a/src/app/settings/settings.selectors.ts b/src/app/settings/settings.selectors.ts
index 615ea4e0d..d4b30a322 100755
--- a/src/app/settings/settings.selectors.ts
+++ b/src/app/settings/settings.selectors.ts
@@ -10,3 +10,8 @@ export const selectSettings = createSelector(
selectSettingsState,
(state: SettingsState) => state
);
+
+export const selectSettingsLanguage = createSelector(
+ selectSettings,
+ (state: SettingsState) => state.language
+);
diff --git a/src/app/static/features/features.component.ts b/src/app/static/features/features.component.ts
index 52226b220..08d933ad2 100755
--- a/src/app/static/features/features.component.ts
+++ b/src/app/static/features/features.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@app/core';
-import { features } from './features.data';
+import { Feature, features } from './features.data';
@Component({
selector: 'anms-features',
@@ -12,7 +12,7 @@ import { features } from './features.data';
})
export class FeaturesComponent implements OnInit {
routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
- features = features;
+ features: Feature[] = features;
ngOnInit() {}
diff --git a/src/app/static/features/features.data.ts b/src/app/static/features/features.data.ts
index 4ad861c39..2595e1cb6 100644
--- a/src/app/static/features/features.data.ts
+++ b/src/app/static/features/features.data.ts
@@ -1,5 +1,13 @@
import { environment as env } from '@env/environment';
-import { Feature } from './features.model';
+
+export interface Feature {
+ name: string;
+ version?: string;
+ description: string;
+ github?: string;
+ documentation: string;
+ medium?: string;
+}
export const features: Feature[] = [
{
diff --git a/src/app/static/features/features.model.ts b/src/app/static/features/features.model.ts
deleted file mode 100644
index 0a7b0b55d..000000000
--- a/src/app/static/features/features.model.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface Feature {
- name: string;
- version?: string;
- description: string;
- github?: string;
- documentation: string;
- medium?: string;
-}