Add action logging and some refactoring

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -59,6 +59,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   private itemTypeSub: Subscription;
   private mapStateSub: Subscription;
   private queryStateSub: Subscription;
+  private querySub: Subscription;
   public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
   public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
   public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
@@ -92,7 +93,47 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     private geolocationService: GeolocationService,
     private zone: NgZone,
     private deviceorientationService:DeviceOrientationService) {
-      
+      this.querySub = this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
+        if(queryState) {
+          let newQueryState = tassign(mapReducers.initialQueryState);
+          let initial =  this.serializeService.serialize(newQueryState) ==  this.serializeService.serialize(queryState);
+          if(setStateCount>1 && !initial) {
+            console.debug(`Do Query ${setStateCount}`);
+            let urlparts=[];
+            if (queryState.itemCode && queryState.itemCode != "") {         
+              if(queryState.itemType && queryState.itemType!= "") {
+                let itemType = this.itemTypeService.itemTypes[queryState.itemType];
+                if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
+                  urlparts.push('/editor');
+                  urlparts.push(itemType.editor);
+                  urlparts.push('item');
+                  urlparts.push(queryState.itemCode);               
+                }    
+              }         
+            } else {
+              newQueryState= queryState;
+            }
+            if(urlparts.length==0 ) {
+              newQueryState.itemCode = queryState.itemCode;
+              this.replaceUrl(mapState,newQueryState,false);
+            } else {
+              this.router.navigate(urlparts);
+            }
+          }
+        }
+      });   
+      this.mapStateSub = this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{
+        if(setStateCount>0) {
+          console.debug(`Mapstate ${setStateCount}`);
+          this.replaceUrl(mapState,queryState,true);
+        }
+      });    
+      this.queryStateSub = this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
+        if(setStateCount>0) {
+          console.debug(`Querystate ${setStateCount}`);
+          this.replaceUrl(mapState,queryState,true);
+        }
+      })      
   }
 
   @HostListener('document:keyup', ['$event'])
@@ -132,44 +173,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.store.dispatch(new mapActions.Clear());
     this.selectedFeatures$.next({x:0,y:0,features:[]});
     this.selectedFeatures$.next(null);
-    this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
+    
-      console.debug(`Do Query ${setStateCount}`);
-      if(setStateCount>1) {
-        let newQueryState = tassign(mapReducers.initialQueryState);
-        let urlparts=[];
-        if (queryState.itemCode && queryState.itemCode != "") {         
-          if(queryState.itemType && queryState.itemType!= "") {
-            let itemType = this.itemTypeService.itemTypes[queryState.itemType];
-            if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
-              urlparts.push('/editor');
-              urlparts.push(itemType.editor);
-              urlparts.push('item');
-              urlparts.push(queryState.itemCode);               
-            }    
-          }         
-        } else {
-          newQueryState= queryState;
-        }
-        if(urlparts.length==0 ) {
-          newQueryState.itemCode = queryState.itemCode;
-          this.replaceUrl(mapState,newQueryState,false);
-        } else {
-          this.router.navigate(urlparts);
-        }
-      }
-    });   
-    this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{
-      console.debug(`Mapstate ${setStateCount}`);
-      if(setStateCount>0) {
-        this.replaceUrl(mapState,queryState,true);
-      }
-    });    
-    this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
-      console.debug(`Querystate ${setStateCount}`);
-      if(setStateCount>0) {
-        this.replaceUrl(mapState,queryState,true);
-      }
-    }) 
   }
 
   initCustomStyles() {
@@ -218,6 +222,8 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         }
         queryStateChanged = this.serializeService.serialize(lastQueryState) !=  queryState;
       }     
+      console.debug(newQueryState);
+      console.debug(queryStateChanged?"Changed":"");
       let t =0;
       if(setStateCount==0) t=600;
       setTimeout(() => {
@@ -272,6 +278,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
       if(mapState.baseLayerCode!="") {
         parts.push(mapState.baseLayerCode);
         parts.push( this.serializeService.serialize(queryState));
+        console.debug("Replace url",mapState,queryState,replace);
         this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
       }      
   }
@@ -341,8 +348,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   ngOnDestroy() {
-    this.paramSub.unsubscribe();
+    if (this.paramSub) this.paramSub.unsubscribe();
     if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
     if (this.mapStateSub) this.mapStateSub.unsubscribe();
-    if (this.queryStateSub) this.queryStateSub.unsubscribe();  }
+    if (this.queryStateSub) this.queryStateSub.unsubscribe();  
+    if (this.querySub) this.querySub.unsubscribe();
+  }
 }

projects/common-map/src/fm-map/effects/map.effects.ts

@@ -129,7 +129,7 @@ export class MapEffects {
           ),
           catchError(error => of(new commonActions.Fail(error))));
       } else {
-        newAction=  of(new commonActions.Escape(true,false));
+        return [];
       }     
       return newAction;
     }));
@@ -251,27 +251,39 @@ export class MapEffects {
   @Effect()
   setQueryState$: Observable<Action> = this.actions$.pipe(
     ofType(mapActions.SETQUERYSTATE),
-    switchMap((action: mapActions.SetQueryState) => {
+    withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)),
-        var newAction:Action;
+    switchMap(([action,inSearch]) => {
-        if (action.queryState.itemCode && action.queryState.itemCode != "") {         
+        if(!inSearch) {
-          newAction= new mapActions.SelectItem(action.queryState.itemCode);          
+          let a = action as mapActions.SetQueryState;
+          var newAction:Action;
+          if (a.queryState.itemCode && a.queryState.itemCode != "") {         
+            newAction= new mapActions.SelectItem(a.queryState.itemCode);          
+          } else {
+            newAction= new mapActions.StartSearch(a.queryState);
+          }
+          return of(newAction);  
         } else {
-          newAction= new mapActions.StartSearch(action.queryState);
+          return [];
         }
-        return of(newAction);
       }));
 
   @Effect()
   setState$: Observable<Action> = this.actions$.pipe(
     ofType(mapActions.SETSTATE),
-    switchMap((action: mapActions.SetState) => {
+    withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)),
-      var newAction:Action;
+    switchMap(([action,inSearch]) => {
-      if (action.queryState.itemCode && action.queryState.itemCode != "") {
+      if(!inSearch) {
-        newAction=  new mapActions.SelectItem(action.queryState.itemCode);
+        let a = action as mapActions.SetQueryState;
+        var newAction:Action;
+        if (a.queryState.itemCode && a.queryState.itemCode != "") {         
+          newAction= new mapActions.SelectItem(a.queryState.itemCode);          
+        } else {
+          newAction= new mapActions.StartSearch(a.queryState);
+        }
+        return of(newAction);  
       } else {
-        newAction=  new mapActions.StartSearch(action.queryState);
+        return [];
       }
-      return of(newAction);
     }));
 
     constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService,private featureIconService$:FeatureIconService,private itemTypeService$:ItemTypeService) {

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -56,7 +56,8 @@ export interface State {
   selectedOverlayLayer: IItemLayer,
   styles:IStyles,
   showLayerSwitcher:boolean,
-  setStateCount:number
+  setStateCount:number,
+  inSearch:boolean
 }
 
 export const initialState: State = {
@@ -73,7 +74,7 @@ export const initialState: State = {
   },
   viewExtent:[],
   queryState: tassign(initialQueryState),
-  query: tassign(initialQueryState),
+  query: null,
   parentCode: null,
   features: [],
   panelVisible: false,
@@ -92,7 +93,8 @@ export const initialState: State = {
   selectedItemLayer: null,
   styles: {},
   showLayerSwitcher: false,
-  setStateCount: 0
+  setStateCount: 0,
+  inSearch:false
 }
 
 export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {    
@@ -138,7 +140,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       }
       return tassign(state, {       
         features: a.features,
-        extent:extent
+        extent:extent,
+        inSearch:false
       });
     }
     case mapActions.SELECTFEATURE: {
@@ -148,10 +151,14 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       });
     }    
     case mapActions.SELECTITEM: {  
+      let a = action as mapActions.SelectItem;
+      let itemCode = state.selectedItem ? state.selectedItem.code : "";
+      let inSearch = (a.itemCode != itemCode || state.setStateCount == 1)
       return tassign(state, {
         selectedItem: null,
         selectedItemLayer: null,
-        features:[]
+        features:[],
+        inSearch:inSearch
       });
     }
     case mapActions.SELECTITEMSUCCESS: {
@@ -164,6 +171,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         itemLayer = new TemporalItemLayer(a.item);       
       }
       return tassign(state, {
+        inSearch:false,
         selectedItem: a.item,
         selectedItemLayer: itemLayer,
         panelVisible: a.item != null,
@@ -255,17 +263,21 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     }
     case mapActions.STARTSEARCH: {
       let a = action as mapActions.StartSearch;
+      let panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null;
       return tassign(state, {
         selectedItem: null,
         features:[],
         selectedItemLayer:null,
-        queryState: tassign(a.queryState),
+        searchCollapsed: !panelVisible,
-        searchCollapsed: false,
+        panelVisible: panelVisible,
-        panelVisible: true,
+        clearEnabled: panelVisible,
-        clearEnabled: true,
+        searchMinified: panelVisible,
-        searchMinified: true,
+        inSearch:panelVisible
       });
     }
+    case commonActions.FAIL:{
+      return tassign(state,{inSearch:false});
+    }
     case mapActions.DOQUERY: {
       let a = action as mapActions.DoQuery;
       return tassign(state, {
@@ -455,7 +467,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       let a = action as mapActions.ShowLayerSwitcher;
       return tassign(state,{showLayerSwitcher:a.show});
     }
-    case mapActions.CLEAR:{
+   
+    case commonActions.INITUSER: {
       return tassign(state,{setStateCount:0,features:[],selectedFeature:null,selectedItem:null});
     }
     default: {
@@ -487,6 +500,7 @@ export const getPeriod = (state:State) => state.period;
 export const getStyles = (state:State) => state.styles;
 export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
 export const getSetStateCount = (state:State) => state.setStateCount;
+export const getInSearch = (state:State) => state.inSearch;
 
 export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
 export const selectGetMapState= createSelector(selectMapState, getMapState);
@@ -512,5 +526,6 @@ export const selectGetPeriod = createSelector(selectMapState, getPeriod);
 export const selectGetStyles = createSelector(selectMapState, getStyles);
 export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);
 export const selectgetSetStateCount = createSelector(selectMapState,getSetStateCount);
+export const selectGetInSearch = createSelector(selectMapState,getInSearch);
 
 

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { AppCommonMapModule} from '@farmmaps/common-map';
 
 import {AppRootComponent} from './app.component';
 
-import {StoreModule, Store} from '@ngrx/store';
+import {StoreModule, ActionReducer,MetaReducer} from '@ngrx/store';
 import {EffectsModule, EffectSources} from '@ngrx/effects';
 import { StoreRouterConnectingModule} from '@ngrx/router-store';
 
@@ -48,6 +48,18 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
   ];
 }
 
+// console.log all actions
+export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
+  return function(state, action) {
+    console.debug('-- State', state);
+    console.debug('-- Action', action);
+ 
+    return reducer(state, action);
+  };
+}
+
+export const metaReducers: MetaReducer<any>[] = [debug];
+
 @NgModule({
   declarations: [
     AppRootComponent,
@@ -61,7 +73,7 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
     AppCommonServiceModule.forRoot(),
     AppCommonMapModule.forRoot(),
     BrowserModule,
-    StoreModule.forRoot({},{runtimeChecks: { // TODO fix this should all be true
+    StoreModule.forRoot({},{metaReducers,runtimeChecks: { // TODO fix this should all be true
 			strictStateImmutability: false,
 			strictActionImmutability: false,
 			strictStateSerializability: false,