Merge pull request #391 from TAMULib/sprint19-382-mobile_store-to-lay…

…out_store

[Issue 382] Refactor mobile store to layout store.

package.json

@@ -104,6 +104,7 @@
     "coveralls": "^3.1.0",
     "dotenv-override": "^5.0.1",
     "dotenv-override-true": "^6.2.2",
+    "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "handlebars-loader": "^1.7.1",
     "jasmine-core": "~3.7.1",

projects/wvr-elements/src/lib/core/actions.ts

@@ -1,13 +1,13 @@
 import * as Manifest from './manifest/manifest.actions';
-import * as Mobile from './mobile/mobile.actions';
+import * as Layout from './layout/layout.actions';
 import * as Modal from './modal/modal.actions';
 import * as Rest from './rest/rest.actions';
 import * as Theme from './theme/theme.actions';
 import * as Wysiwyg from './wysiwyg/wysiwyg.actions';
 
 export const actions = {
+  Layout,
   Manifest,
-  Mobile,
   Modal,
   Rest,
   Theme,

projects/wvr-elements/src/lib/core/layout/layout.actions.ts

@@ -0,0 +1,6 @@
+import { createAction, props } from '@ngrx/store';
+
+export const setIsMobile = createAction(
+  '[Layout] Set Mobile',
+  props<{ isMobile: boolean }>()
+);

projects/wvr-elements/src/lib/core/mobile/mobile.effects.ts → projects/wvr-elements/src/lib/core/layout/layout.effects.ts

@@ -4,10 +4,10 @@ import { Action, select, Store } from '@ngrx/store';
 import { fromEvent } from 'rxjs';
 import { switchMap, withLatestFrom } from 'rxjs/operators';
 import { RootState, selectIsMobileLayout } from '../store';
-import * as MobileActions from './mobile.actions';
+import * as LayoutActions from './layout.actions';
 
 @Injectable()
-export class MobileEffects implements OnInitEffects {
+export class LayoutEffects implements OnInitEffects {
 
   constructor(private readonly store: Store<RootState>) {
 
@@ -16,19 +16,19 @@ export class MobileEffects implements OnInitEffects {
   resize = createEffect(() => fromEvent(window, 'resize')
     .pipe(
       withLatestFrom(this.store.pipe(select(selectIsMobileLayout))),
-      switchMap(([event, isMobileLayout]) => isMobileLayout !== this.isMobileLayout()
+      switchMap(([event, isMobile]) => isMobile !== this.isMobile()
         ? [this.ngrxOnInitEffects()]
         : [])
     )
   );
 
   ngrxOnInitEffects(): Action {
-    return MobileActions.setMobileLayout({
-      mobileLayout: this.isMobileLayout()
+    return LayoutActions.setIsMobile({
+      isMobile: this.isMobile()
     });
   }
 
   /** A mapping method to map resize events to boolean.  */
-  private readonly isMobileLayout = (): boolean => window.innerWidth < 992;
+  private readonly isMobile = (): boolean => window.innerWidth < 992;
 
 }

projects/wvr-elements/src/lib/core/layout/layout.reducers.ts

@@ -0,0 +1,22 @@
+import { createReducer, on } from '@ngrx/store';
+import { Layout } from './layout';
+import * as LayoutActions from './layout.actions';
+
+export interface State {
+  layout: Layout;
+}
+
+export const initialState: State = {
+  layout: { isMobile: false }
+};
+
+export const reducer = createReducer(
+  initialState,
+  on(LayoutActions.setIsMobile, (state, { isMobile }) => ({
+    ...state,
+    layout: {
+      ...state.layout,
+      isMobile
+    }
+  }))
+);

projects/wvr-elements/src/lib/core/layout/layout.ts

@@ -0,0 +1,3 @@
+export interface Layout {
+  isMobile: boolean;
+}

projects/wvr-elements/src/lib/core/store.ts

@@ -8,34 +8,34 @@ import { ManifestEntry } from './manifest/manifest-entry';
 import * as fromManifest from './manifest/manifest.reducers';
 import * as fromRest from './rest/rest.reducers';
 import * as fromTheme from './theme/theme.reducers';
-import * as fromMobile from './mobile/mobile.reducers';
+import * as fromLayout from './layout/layout.reducers';
 import * as fromModal from './modal/modal.reducers';
 import * as fromWysiwyg from './wysiwyg/wysiwyg.reducers';
 
 export interface RootState {
+  layout: fromLayout.State;
   manifests: fromManifest.State;
+  modals: fromModal.State;
   rest: fromRest.State;
   theme: fromTheme.State;
-  mobile: fromMobile.State;
-  modals: fromModal.State;
   wysiwyg: fromWysiwyg.State;
 }
 
 export const initialState: RootState = {
+  layout: fromLayout.initialState,
   manifests: fromManifest.initialState,
+  modals: fromModal.initialState,
   rest: fromRest.initialState,
   theme: fromTheme.initialState,
-  mobile: fromMobile.initialState,
-  modals: fromModal.initialState,
   wysiwyg: fromWysiwyg.initialState
 };
 
 export const reducers: ActionReducerMap<RootState> = {
+  layout: fromLayout.reducer,
   manifests: fromManifest.reducer,
+  modals: fromModal.reducer,
   rest: fromRest.reducer,
   theme: fromTheme.reducer,
-  mobile: fromMobile.reducer,
-  modals: fromModal.reducer,
   wysiwyg: fromWysiwyg.reducer
 };
 
@@ -137,13 +137,13 @@ export const selectCurrentTheme = createSelector(
   (themeState: fromTheme.State) => themeState.themes[themeState.currentTheme]
 );
 
-// mobile selectors
-export const selectMobileState = createFeatureSelector<RootState, fromMobile.State>('mobile');
+// layout selectors
+export const selectLayoutState = createFeatureSelector<RootState, fromLayout.State>('layout');
 
 // TODO - determine how to pass states into tests without requiring null checks.
 export const selectIsMobileLayout = createSelector(
-  selectMobileState,
-  (mobileState: fromMobile.State) => mobileState?.mobile.mobileLayout
+  selectLayoutState,
+  (layoutState: fromLayout.State) => layoutState?.layout.isMobile
 );
 
 // modal selectors

projects/wvr-elements/src/lib/core/wvr-core.module.ts

@@ -31,7 +31,7 @@ import { ActionRegistryService } from './action-registry.service';
 import { AnimationService } from './animation.service';
 import { ComponentRegistryService } from './component-registry.service';
 import { ManifestEffects } from './manifest/manifest.effects';
-import { MobileEffects } from './mobile/mobile.effects';
+import { LayoutEffects } from './layout/layout.effects';
 import { RestEffects } from './rest/rest.effects';
 import { metaReducers, ROOT_REDUCER } from './store';
 import { TemplateService } from './template.service';
@@ -85,7 +85,7 @@ export const showHiddentContent = (injector: Injector) => {
 const MODULES: Array<any> = [
   EffectsModule.forRoot([
     ManifestEffects,
-    MobileEffects,
+    LayoutEffects,
     RestEffects,
     ThemeEffects,
     WysiwygEffects

projects/wvr-elements/src/lib/shared/wvr-base.component.ts

@@ -143,8 +143,8 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit, OnDe
     this._templateService.parseProjectedContent(this, this.eRef.nativeElement);
 
     this.subscriptions.push(this.store.pipe(select(selectIsMobileLayout))
-      .subscribe((isMobileLayout: boolean) => {
-        this.isMobileLayout = isMobileLayout;
+      .subscribe((isMobile: boolean) => {
+        this.isMobileLayout = isMobile;
       }));
   }