added different themes, issue with ngrx

config/environment.default.js

@@ -155,5 +155,13 @@ module.exports = {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
-  }
+  },
+  themes: [
+    {
+      name: 'Preview Release',
+      cssClass: 'preview-release'
+    }
+  ]
+
+
 };

src/app/+home-page/home-page.component.default.scss

 :host {
     //color: red;
-}
\ No newline at end of file
+}

src/app/+home-page/themes/home-page.component.preview-release.scss

+:host-context(.preview-release) {
+    color: green;
+}
\ No newline at end of file

src/app/app.component.ts

@@ -32,7 +32,9 @@ import { Observable } from 'rxjs/internal/Observable';
 import { slideSidebarPadding } from './shared/animations/slide';
 import { combineLatest as combineLatestObservable, of } from 'rxjs';
 import { HostWindowService } from './shared/host-window.service';
+import { ThemeService } from './core/theme/theme.service';
 import { Theme } from '../config/theme.inferface';
+import { isNotEmpty } from './shared/empty.util';
 
 @Component({
   selector: 'ds-app',
@@ -63,6 +65,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private cssService: CSSVariableService,
     private menuService: MenuService,
     private windowService: HostWindowService,
+    private themeService: ThemeService
   ) {
 
     // Load all the languages that are defined as active from the config file
@@ -89,6 +92,11 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
+    const availableThemes: Theme[] = this.config.themes;
+    if (isNotEmpty(availableThemes)) {
+      this.themeService.setCurrentTheme(availableThemes[0]);
+    }
+    this.theme = this.themeService.getCurrentTheme();
 
     const env: string = this.config.production ? 'Production' : 'Development';
     const color: string = this.config.production ? 'red' : 'green';

src/app/core/core.effects.ts

@@ -5,6 +5,7 @@ import { AuthEffects } from './auth/auth.effects';
 import { JsonPatchOperationsEffects } from './json-patch/json-patch-operations.effects';
 import { ServerSyncBufferEffects } from './cache/server-sync-buffer.effects';
 import { ObjectUpdatesEffects } from './data/object-updates/object-updates.effects';
+import { ThemeEffects } from './theme/theme.effects';
 
 export const coreEffects = [
   RequestEffects,
@@ -14,4 +15,5 @@ export const coreEffects = [
   JsonPatchOperationsEffects,
   ServerSyncBufferEffects,
   ObjectUpdatesEffects,
+  ThemeEffects
 ];

src/app/core/core.module.ts

@@ -87,6 +87,7 @@ import { MyDSpaceResponseParsingService } from './data/mydspace-response-parsing
 import { ClaimedTaskDataService } from './tasks/claimed-task-data.service';
 import { PoolTaskDataService } from './tasks/pool-task-data.service';
 import { TaskResponseParsingService } from './tasks/task-response-parsing.service';
+import { ThemeService } from './theme/theme.service';
 
 const IMPORTS = [
   CommonModule,
@@ -175,6 +176,7 @@ const PROVIDERS = [
   TaskResponseParsingService,
   ClaimedTaskDataService,
   PoolTaskDataService,
+  ThemeService,
   // register AuthInterceptor as HttpInterceptor
   {
     provide: HTTP_INTERCEPTORS,

src/app/core/core.reducers.ts

@@ -13,6 +13,7 @@ import {
   objectUpdatesReducer,
   ObjectUpdatesState
 } from './data/object-updates/object-updates.reducer';
+import { themeReducer, ThemeState } from './theme/theme.reducer';
 
 export interface CoreState {
   'cache/object': ObjectCacheState,
@@ -21,7 +22,8 @@ export interface CoreState {
   'data/request': RequestState,
   'index': MetaIndexState,
   'auth': AuthState,
-  'json/patch': JsonPatchOperationsState
+  'json/patch': JsonPatchOperationsState,
+  'theme': ThemeState
 }
 
 export const coreReducers: ActionReducerMap<CoreState> = {
@@ -31,5 +33,6 @@ export const coreReducers: ActionReducerMap<CoreState> = {
   'data/request': requestReducer,
   'index': indexReducer,
   'auth': authReducer,
-  'json/patch': jsonPatchOperationsReducer
+  'json/patch': jsonPatchOperationsReducer,
+  'theme': themeReducer
 };

src/app/core/theme/theme.actions.ts

+/**
+ * The list of ObjectUpdatesAction type definitions
+ */
+import { type } from '../../shared/ngrx/type';
+import { Action } from '@ngrx/store';
+import { Theme } from '../../../config/theme.inferface';
+
+export const ThemeActionTypes = {
+  SET: type('dspace/core/theme/SET'),
+};
+
+/* tslint:disable:max-classes-per-file */
+
+/**
+ * An ngrx action to set a the repository's current theme
+ */
+export class SetThemeAction implements Action {
+  type = ThemeActionTypes.SET;
+  payload: {
+    theme: Theme
+  };
+
+  /**
+   * Create a new SetThemeAction
+   *
+   * @param theme
+   *    the theme configuration to change the current theme to
+   */
+  constructor(
+    theme: Theme
+  ) {
+    this.payload = { theme };
+  }
+}
+
+export type ThemeAction
+  = SetThemeAction;

src/app/core/theme/theme.effects.ts

+import { Inject, Injectable } from '@angular/core';
+import { Action, Store } from '@ngrx/store';
+import { Actions, Effect } from '@ngrx/effects';
+import { CoreState } from '../core.reducers';
+import { SetThemeAction } from './theme.actions';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { Theme } from '../../../config/theme.inferface';
+import { isNotEmpty } from '../../shared/empty.util';
+import { asyncScheduler, defer, Observable, of as observableOf } from 'rxjs';
+
+@Injectable()
+export class ThemeEffects {
+
+  // @Effect() setInitialTheme: Observable<Action> = defer(() => {
+  //   console.log('set theme');
+  //   const availableThemes: Theme[] = this.config.themes;
+  //   if (isNotEmpty(availableThemes)) {
+  //     return observableOf(new SetThemeAction(availableThemes[0]), asyncScheduler);
+  //   }
+  // });
+  //
+  // constructor(private actions: Actions, private store: Store<CoreState>, @Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
+  //   console.log("theme effects");
+  // }
+}

src/app/core/theme/theme.reducer.ts

+import { Theme } from '../../../config/theme.inferface';
+import { ThemeAction, ThemeActionTypes } from './theme.actions';
+
+export interface ThemeState {
+  theme: Theme
+}
+
+// Object.create(null) ensures the object has no default js properties (e.g. `__proto__`)
+const initialState = Object.create(null);
+
+export function themeReducer(state = initialState, action: ThemeAction): ThemeState {
+  switch (action.type) {
+    case ThemeActionTypes.SET: {
+      const newState =  Object.assign({}, state, { theme: action.payload.theme });
+      console.log(newState);
+      return newState;
+    }
+  }
+}

src/app/core/theme/theme.service.ts

+import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
+import { coreSelector, CoreState } from '../core.reducers';
+import { Inject, Injectable } from '@angular/core';
+import { Theme } from '../../../config/theme.inferface';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ThemeState } from './theme.reducer';
+import { SetThemeAction } from './theme.actions';
+
+function themeStateSelector(): MemoizedSelector<CoreState, ThemeState> {
+  return createSelector(coreSelector, (state: CoreState) => state['theme']);
+}
+
+/**
+ * Service that dispatches to and reads from the Theme state in the store
+ */
+@Injectable()
+export class ThemeService {
+  constructor(private store: Store<CoreState>) {
+
+  }
+
+  public getCurrentTheme(): Observable<Theme> {
+    return this.store.pipe(
+      select(themeStateSelector()),
+      map((state: ThemeState) => state.theme)
+    );
+  }
+
+  public setCurrentTheme(theme: Theme): void {
+    return this.store.dispatch(new SetThemeAction(theme));
+  }
+}
\ No newline at end of file