Fix Router and NavigationService to fix issues related to page refresh

web/src/app/components/header/header.component.spec.ts

@@ -38,7 +38,7 @@ describe('HeaderComponent', () => {
         {provide: MatDialog, useValue: {}},
         {provide: AuthService, useValue: {getUser$: () => of()}},
         {provide: DraftSurveyService, useValue: {}},
-        {provide: Router, useValue: {}},
+        {provide: Router, useValue: {events: of()}},
         {provide: SurveyService, useValue: {canManageSurvey: () => false}},
       ],
     }).compileComponents();

web/src/app/components/header/header.component.ts

@@ -57,10 +57,10 @@ export class HeaderComponent {
     this.navigationService.getSurveyId$()?.subscribe(surveyId => {
       if (surveyId) this.surveyId = surveyId;
     });
-    if (this.navigationService.isSurveyPage(this.surveyId)) {
-      this.state = HeaderState.MAP_VIEW;
-    } else if (this.navigationService.isEditSurveyPage(this.surveyId)) {
+    if (this.navigationService.isEditSurveyPage(this.surveyId)) {
       this.state = HeaderState.EDIT_SURVEY;
+    } else if (this.navigationService.isSurveyPage(this.surveyId)) {
+      this.state = HeaderState.MAP_VIEW;
     }
     this.surveyService.getActiveSurvey$().subscribe(_ => {
       // Update "manage" state when survey changes.

web/src/app/components/sign-in-page/sign-in-page.component.spec.ts

@@ -15,8 +15,8 @@
  */
 
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {Router} from '@angular/router';
-import {NEVER} from 'rxjs';
+import {NavigationEnd, Router} from '@angular/router';
+import {BehaviorSubject, NEVER, of} from 'rxjs';
 
 import {AuthService} from 'app/services/auth/auth.service';
 
@@ -30,7 +30,7 @@ describe('SignInPageComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [SignInPageComponent],
       providers: [
-        {provide: Router, useValue: {}},
+        {provide: Router, useValue: {events: of()}},
         {
           provide: AuthService,
           useValue: {getUser$: () => NEVER, isAuthenticated$: () => NEVER},

web/src/app/pages/create-survey/create-survey.component.spec.ts

@@ -131,7 +131,6 @@ describe('CreateSurveyComponent', () => {
     navigationServiceSpy = jasmine.createSpyObj<NavigationService>(
       'NavigationService',
       [
-        'init',
         'getSurveyId$',
         'navigateToSurveyList',
         'navigateToCreateSurvey',

web/src/app/pages/create-survey/create-survey.component.ts

@@ -145,11 +145,8 @@ export class CreateSurveyComponent implements OnInit {
     private taskService: TaskService,
     private navigationService: NavigationService,
     private loiService: LocationOfInterestService,
-    private cdr: ChangeDetectorRef,
-    route: ActivatedRoute
-  ) {
-    navigationService.init(route);
-  }
+    private cdr: ChangeDetectorRef
+  ) {}
 
   ngAfterViewChecked(): void {
     this.cdr.detectChanges();

web/src/app/pages/edit-survey/edit-survey.component.spec.ts

@@ -95,7 +95,7 @@ describe('EditSurveyComponent', () => {
   beforeEach(waitForAsync(() => {
     navigationServiceSpy = jasmine.createSpyObj<NavigationService>(
       'NavigationService',
-      ['init', 'isShareSurveyPage', 'getSurveyId$']
+      ['isShareSurveyPage', 'getSurveyId$']
     );
     surveyId$ = new Subject<string | null>();
     navigationServiceSpy.getSurveyId$.and.returnValue(surveyId$);

web/src/app/pages/edit-survey/edit-survey.component.ts

@@ -56,11 +56,8 @@ export class EditSurveyComponent implements OnInit {
     private jobService: JobService,
     private draftSurveyService: DraftSurveyService,
     private navigationService: NavigationService,
-    private route: ActivatedRoute,
     private router: Router
-  ) {
-    navigationService.init(this.route);
-  }
+  ) {}
 
   ngOnInit(): void {
     this.subscription.add(

web/src/app/pages/main-page-container/main-page-container.component.ts

@@ -15,8 +15,7 @@
  */
 
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {Observable, Subscription} from 'rxjs';
+import {Observable, Subscription, distinctUntilChanged} from 'rxjs';
 
 import {Survey} from 'app/models/survey.model';
 import {NavigationService} from 'app/services/navigation/navigation.service';
@@ -33,19 +32,20 @@ export class MainPageContainerComponent implements OnInit, OnDestroy {
 
   constructor(
     private navigationService: NavigationService,
-    private surveyService: SurveyService,
-    route: ActivatedRoute
+    private surveyService: SurveyService
   ) {
     this.activeSurvey$ = surveyService.getActiveSurvey$();
-    navigationService.init(route);
   }
 
   ngOnInit() {
     // Activate new survey on route changes.
     this.subscription.add(
-      this.navigationService.getSurveyId$().subscribe(id => {
-        id && this.surveyService.activateSurvey(id);
-      })
+      this.navigationService
+        .getSurveyId$()
+        .pipe(distinctUntilChanged())
+        .subscribe(id => {
+          id && this.surveyService.activateSurvey(id);
+        })
     );
   }
 

web/src/app/pages/main-page-container/main-page/job-dialog/job-dialog.component.spec.ts

@@ -28,7 +28,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {Router} from '@angular/router';
-import {NEVER} from 'rxjs';
+import {NEVER, of} from 'rxjs';
 
 import {InlineEditorModule} from 'app/components/inline-editor/inline-editor.module';
 import {AuthService} from 'app/services/auth/auth.service';
@@ -93,5 +93,5 @@ describe('JobDialogComponent', () => {
 });
 
 function createRouterSpy() {
-  return jasmine.createSpyObj('Router', ['navigate']);
+  return jasmine.createSpyObj('Router', ['navigate'], {events: of()});
 }

web/src/app/pages/main-page-container/main-page/survey-header/survey-header.component.spec.ts

@@ -18,7 +18,7 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
 import {Router} from '@angular/router';
-import {NEVER} from 'rxjs';
+import {NEVER, of} from 'rxjs';
 
 import {SurveyService} from 'app/services/survey/survey.service';
 
@@ -44,6 +44,7 @@ describe('SurveyHeaderComponent', () => {
         {
           provide: Router,
           useValue: {
+            events: of(),
             isActive: () => true,
           },
         },

web/src/app/routing.module.ts

@@ -95,6 +95,24 @@ const routes: Routes = [
     path: `${NavigationService.SURVEY_SEGMENT}/:${SURVEY_ID}`,
     component: MainPageContainerComponent,
     canActivate: [AuthGuard],
+    children: [
+      {
+        path: `${LOI_SEGMENT}/:${LOI_ID}`,
+        component: MainPageContainerComponent,
+        children: [
+          {
+            path: `${SUBMISSION_SEGMENT}/:${SUBMISSION_ID}`,
+            component: MainPageContainerComponent,
+            children: [
+              {
+                path: `${TASK_SEGMENT}/:${TASK_ID}`,
+                component: MainPageContainerComponent,
+              },
+            ],
+          },
+        ],
+      },
+    ],
   },
   {
     path: NavigationService.ERROR,
@@ -115,21 +133,6 @@ const routes: Routes = [
     component: TermsComponent,
     canActivate: [AuthGuard],
   },
-  {
-    path: `${NavigationService.SURVEY_SEGMENT}/:${SURVEY_ID}/${LOI_SEGMENT}/:${LOI_ID}`,
-    component: MainPageContainerComponent,
-    canActivate: [AuthGuard],
-  },
-  {
-    path: `${NavigationService.SURVEY_SEGMENT}/:${SURVEY_ID}/${LOI_SEGMENT}/:${LOI_ID}/${SUBMISSION_SEGMENT}/:${SUBMISSION_ID}`,
-    component: MainPageContainerComponent,
-    canActivate: [AuthGuard],
-  },
-  {
-    path: `${NavigationService.SURVEY_SEGMENT}/:${SURVEY_ID}/${LOI_SEGMENT}/:${LOI_ID}/${SUBMISSION_SEGMENT}/:${SUBMISSION_ID}/${TASK_SEGMENT}/:${TASK_ID}`,
-    component: MainPageContainerComponent,
-    canActivate: [AuthGuard],
-  },
 ];
 const config = RouterModule.forRoot(routes, {});
 

web/src/app/services/auth/auth.service.spec.ts

@@ -41,7 +41,7 @@ describe('AuthService', () => {
           },
         },
         {provide: DataStoreService, useValue: {user$: () => of()}},
-        {provide: Router, useValue: {}},
+        {provide: Router, useValue: {events: of()}},
         {provide: HttpClientService, useValue: {}},
       ],
     });

web/src/app/services/navigation/navigation.service.spec.ts

@@ -16,6 +16,7 @@
 
 import {TestBed} from '@angular/core/testing';
 import {Router} from '@angular/router';
+import {of} from 'rxjs';
 
 import {NavigationService} from 'app/services/navigation/navigation.service';
 
@@ -24,7 +25,13 @@ describe('NavigationService', () => {
   let routerSpy: jasmine.SpyObj<Router>;
 
   beforeEach(() => {
-    routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+    routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl'], {
+      events: of(),
+      routerState: {
+        root: {},
+      },
+    });
+
     TestBed.configureTestingModule({
       providers: [{provide: Router, useValue: routerSpy}],
     });