From b8e9b4a7d1346e57d02fdc483cb72d3bdce6c801 Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Tue, 21 May 2019 09:55:46 -0500
Subject: [PATCH] ROENROLL-1751 configur router for `/dars` route

- Creates DARS view as a child view of the degree planner
- Moves constants resolver services into the degree planner router instead of the app router
- Updates the navigation links so that the degree planner link and the dars link will be appropriately marked as "active"
---
 src/app/app.module.ts                         | 19 ++++-----------
 src/app/app.routing.module.ts                 | 10 ++++++--
 .../core/navigation/navigation.component.html |  4 ++--
 .../dars/dars-view/dars-view.component.html   |  1 +
 .../dars/dars-view/dars-view.component.scss   |  0
 src/app/dars/dars-view/dars-view.component.ts | 10 ++++++++
 src/app/dars/dars.module.ts                   | 12 ++++++++++
 .../degree-planner-view.component.html}       |  0
 .../degree-planner-view.component.scss}       |  0
 .../degree-planner-view.component.spec.ts}    | 12 +++++-----
 .../degree-planner-view.component.ts}         | 19 ++++++++-------
 .../degree-planner/degree-planner.module.ts   | 24 +++++++++++++++----
 .../degree-planner.routing.module.ts          | 12 ----------
 .../store/actions/plan.actions.ts             |  5 ++++
 .../store/effects/plan.effects.ts             |  4 ++--
 15 files changed, 80 insertions(+), 52 deletions(-)
 create mode 100644 src/app/dars/dars-view/dars-view.component.html
 create mode 100644 src/app/dars/dars-view/dars-view.component.scss
 create mode 100644 src/app/dars/dars-view/dars-view.component.ts
 create mode 100644 src/app/dars/dars.module.ts
 rename src/app/degree-planner/{degree-planner.component.html => degree-planner-view/degree-planner-view.component.html} (100%)
 rename src/app/degree-planner/{degree-planner.component.scss => degree-planner-view/degree-planner-view.component.scss} (100%)
 rename src/app/degree-planner/{degree-planner.component.spec.ts => degree-planner-view/degree-planner-view.component.spec.ts} (74%)
 rename src/app/degree-planner/{degree-planner.component.ts => degree-planner-view/degree-planner-view.component.ts} (93%)
 delete mode 100644 src/app/degree-planner/degree-planner.routing.module.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bdc4ca5..316bc13 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,7 +4,6 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
-import { EffectsModule } from '@ngrx/effects';
 import { A11yModule } from '@angular/cdk/a11y';
 
 import { AppRoutingModule } from './app.routing.module';
@@ -13,11 +12,6 @@ import { CoreModule } from '@app/core/core.module';
 import { SharedModule } from '@app/shared/shared.module';
 import { HeaderComponent } from './core/header/header.component';
 import { degreePlannerReducer } from '@app/degree-planner/store/reducer';
-import { DegreePlanEffects } from '@app/degree-planner/store/effects/plan.effects';
-import { UserPreferencesEffects } from '@app/degree-planner/store/effects/userPreferences.effects';
-import { NoteEffects } from '@app/degree-planner/store/effects/note.effects';
-import { CourseEffects } from '@app/degree-planner/store/effects/course.effects';
-import { ErrorEffects } from '@app/degree-planner/store/effects/error.effects';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { CourseDetailsDialogComponent } from './degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
 import { FeedbackDialogComponent } from './degree-planner/dialogs/feedback-dialog/feedback-dialog.component';
@@ -25,22 +19,17 @@ import { CreditOverloadDialogComponent } from './degree-planner/dialogs/credit-o
 import { GoogleAnalyticsService } from './shared/services/google-analytics.service';
 import { IE11WarningDialogComponent } from './degree-planner/dialogs/ie11-warning-dialog/ie11-warning-dialog.component';
 import { darsReducer } from './dars/store/reducer';
-import { DARSEffects } from './dars/store/effects';
+import { DARSModule } from './dars/dars.module';
+import { DegreePlannerModule } from './degree-planner/degree-planner.module';
 
 @NgModule({
   imports: [
+    DARSModule,
+    DegreePlannerModule,
     StoreModule.forRoot({
       degreePlanner: degreePlannerReducer,
       dars: darsReducer,
     }),
-    EffectsModule.forRoot([
-      DegreePlanEffects,
-      NoteEffects,
-      CourseEffects,
-      ErrorEffects,
-      UserPreferencesEffects,
-      DARSEffects,
-    ]),
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
diff --git a/src/app/app.routing.module.ts b/src/app/app.routing.module.ts
index 858ac83..a5ec65d 100644
--- a/src/app/app.routing.module.ts
+++ b/src/app/app.routing.module.ts
@@ -1,12 +1,18 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { ConstantsService } from '@app/degree-planner/services/constants.service';
+import { ConstantsService } from './degree-planner/services/constants.service';
+import { DegreePlannerViewComponent } from './degree-planner/degree-planner-view/degree-planner-view.component';
+import { DARSViewComponent } from './dars/dars-view/dars-view.component';
 
 const routes: Routes = [
+  {
+    path: 'dars',
+    component: DARSViewComponent,
+  },
   {
     path: '',
     resolve: { constants: ConstantsService },
-    loadChildren: './degree-planner/degree-planner.module#DegreePlannerModule',
+    component: DegreePlannerViewComponent,
   },
 ];
 
diff --git a/src/app/core/navigation/navigation.component.html b/src/app/core/navigation/navigation.component.html
index 28eac68..ce00e7d 100644
--- a/src/app/core/navigation/navigation.component.html
+++ b/src/app/core/navigation/navigation.component.html
@@ -3,10 +3,10 @@
     <a mat-tab-link href="/search">Search</a>
     <a mat-tab-link href="/my-courses">My Courses</a>
     <a mat-tab-link href="/scheduler">Scheduler</a>
-    <a mat-tab-link class="active" href="/degree-planner">Degree Planner</a>
+    <a mat-tab-link routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Degree Planner</a>
     <ng-container *ngIf="useNewDARSView; then linkToNewDARSView else linkToOldDARSView"></ng-container>
     <ng-template #linkToNewDARSView>
-      <a mat-tab-link href="/degree-planner/dars">Degree Audit (DARS)</a>
+      <a mat-tab-link routerLink="/dars" routerLinkActive="active">Degree Audit (DARS)</a>
     </ng-template>
     <ng-template #linkToOldDARSView>
       <a mat-tab-link href="/dars">Degree Audit (DARS)</a>
diff --git a/src/app/dars/dars-view/dars-view.component.html b/src/app/dars/dars-view/dars-view.component.html
new file mode 100644
index 0000000..80b0f80
--- /dev/null
+++ b/src/app/dars/dars-view/dars-view.component.html
@@ -0,0 +1 @@
+<h1>Degree Audit (DARS)</h1>
diff --git a/src/app/dars/dars-view/dars-view.component.scss b/src/app/dars/dars-view/dars-view.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dars/dars-view/dars-view.component.ts b/src/app/dars/dars-view/dars-view.component.ts
new file mode 100644
index 0000000..b7c7eb2
--- /dev/null
+++ b/src/app/dars/dars-view/dars-view.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cse-dars-view',
+  templateUrl: './dars-view.component.html',
+  styleUrls: ['./dars-view.component.scss'],
+})
+export class DARSViewComponent {
+  // TODO
+}
diff --git a/src/app/dars/dars.module.ts b/src/app/dars/dars.module.ts
new file mode 100644
index 0000000..97a6937
--- /dev/null
+++ b/src/app/dars/dars.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { DARSViewComponent } from './dars-view/dars-view.component';
+import { EffectsModule } from '@ngrx/effects';
+import { DARSEffects } from './store/effects';
+
+@NgModule({
+  imports: [EffectsModule.forRoot([DARSEffects])],
+  exports: [],
+  declarations: [DARSViewComponent],
+  entryComponents: [],
+})
+export class DARSModule {}
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
similarity index 100%
rename from src/app/degree-planner/degree-planner.component.html
rename to src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.scss
similarity index 100%
rename from src/app/degree-planner/degree-planner.component.scss
rename to src/app/degree-planner/degree-planner-view/degree-planner-view.component.scss
diff --git a/src/app/degree-planner/degree-planner.component.spec.ts b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.spec.ts
similarity index 74%
rename from src/app/degree-planner/degree-planner.component.spec.ts
rename to src/app/degree-planner/degree-planner-view/degree-planner-view.component.spec.ts
index bb965e3..c80025d 100644
--- a/src/app/degree-planner/degree-planner.component.spec.ts
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.spec.ts
@@ -6,13 +6,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SharedModule } from '@app/shared/shared.module';
 import { CoreModule } from '@app/core/core.module';
 
-import { DegreePlannerComponent } from './degree-planner.component';
+import { DegreePlannerViewComponent } from './degree-planner-view.component';
 import { HttpClientModule } from '@angular/common/http';
 import { MAT_DIALOG_DATA } from '@angular/material';
 
-describe('DegreePlannerComponent', () => {
-  let component: DegreePlannerComponent;
-  let fixture: ComponentFixture<DegreePlannerComponent>;
+describe('DegreePlannerViewComponent', () => {
+  let component: DegreePlannerViewComponent;
+  let fixture: ComponentFixture<DegreePlannerViewComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -23,14 +23,14 @@ describe('DegreePlannerComponent', () => {
         SharedModule,
         BrowserAnimationsModule,
       ],
-      declarations: [DegreePlannerComponent],
+      declarations: [DegreePlannerViewComponent],
       providers: [{ provide: MAT_DIALOG_DATA }],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DegreePlannerComponent);
+    fixture = TestBed.createComponent(DegreePlannerViewComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
similarity index 93%
rename from src/app/degree-planner/degree-planner.component.ts
rename to src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
index 2bbe9f7..1a26b17 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.ts
@@ -25,6 +25,7 @@ import {
   ChangePlanName,
   DeletePlan,
   ChangeGradeVisibility,
+  InitialLoadRequest,
 } from '@app/degree-planner/store/actions/plan.actions';
 import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
 import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confirm-dialog.component';
@@ -35,12 +36,12 @@ import {
   ExpandAcademicYear,
   CollapseAcademicYear,
   AddAcademicYear,
-} from './store/actions/ui.actions';
+} from '../store/actions/ui.actions';
 import { YearCode } from '@app/degree-planner/shared/term-codes/yearcode';
-import { ConstantsService } from './services/constants.service';
-import { TermCodeFactory } from './services/termcode.factory';
-import { IE11WarningDialogComponent } from './dialogs/ie11-warning-dialog/ie11-warning-dialog.component';
-import { UpdateUserPreferences } from './store/actions/userPreferences.actions';
+import { ConstantsService } from '../services/constants.service';
+import { TermCodeFactory } from '../services/termcode.factory';
+import { IE11WarningDialogComponent } from '../dialogs/ie11-warning-dialog/ie11-warning-dialog.component';
+import { UpdateUserPreferences } from '../store/actions/userPreferences.actions';
 
 // From: https://stackoverflow.com/a/21825207
 const isIE11 =
@@ -48,10 +49,10 @@ const isIE11 =
 
 @Component({
   selector: 'cse-degree-planner',
-  templateUrl: './degree-planner.component.html',
-  styleUrls: ['./degree-planner.component.scss'],
+  templateUrl: './degree-planner-view.component.html',
+  styleUrls: ['./degree-planner-view.component.scss'],
 })
-export class DegreePlannerComponent implements OnInit {
+export class DegreePlannerViewComponent implements OnInit {
   public termsByAcademicYear: Object;
   public mobileView: MediaQueryList;
   public coursesData$: any;
@@ -80,6 +81,8 @@ export class DegreePlannerComponent implements OnInit {
   }
 
   public ngOnInit() {
+    this.store.dispatch(new InitialLoadRequest());
+
     this.degreePlan$ = this.store.pipe(
       select(selectors.selectVisibleDegreePlan),
       filter(isntUndefined),
diff --git a/src/app/degree-planner/degree-planner.module.ts b/src/app/degree-planner/degree-planner.module.ts
index 0633b86..894b97f 100644
--- a/src/app/degree-planner/degree-planner.module.ts
+++ b/src/app/degree-planner/degree-planner.module.ts
@@ -1,8 +1,6 @@
 import { NgModule } from '@angular/core';
-
-import { DegreePlannerComponent } from './degree-planner.component';
+import { DegreePlannerViewComponent } from './degree-planner-view/degree-planner-view.component';
 import { SharedModule } from '@app/shared/shared.module';
-import { DegreePlannerRoutingModule } from './degree-planner.routing.module';
 import { TermContainerComponent } from './term-container/term-container.component';
 import { SidenavMenuItemComponent } from './sidenav-menu-item/sidenav-menu-item.component';
 import { SavedForLaterContainerComponent } from './saved-for-later-container/saved-for-later-container.component';
@@ -13,12 +11,28 @@ import { RemoveCourseConfirmDialogComponent } from './dialogs/remove-course-conf
 import { YearContainerComponent } from '@app/degree-planner/year-container/year-container.component';
 import { CourseSearchComponent } from '@app/degree-planner/course-search/course-search.component';
 import { AlertContainerComponent } from './alert-container/alert-container.component';
+import { EffectsModule } from '@ngrx/effects';
+import { DegreePlanEffects } from './store/effects/plan.effects';
+import { NoteEffects } from './store/effects/note.effects';
+import { CourseEffects } from './store/effects/course.effects';
+import { ErrorEffects } from './store/effects/error.effects';
+import { UserPreferencesEffects } from './store/effects/userPreferences.effects';
 
 @NgModule({
-  imports: [SharedModule, DragDropModule, DegreePlannerRoutingModule],
+  imports: [
+    SharedModule,
+    DragDropModule,
+    EffectsModule.forRoot([
+      DegreePlanEffects,
+      NoteEffects,
+      CourseEffects,
+      ErrorEffects,
+      UserPreferencesEffects,
+    ]),
+  ],
   exports: [DragDropModule],
   declarations: [
-    DegreePlannerComponent,
+    DegreePlannerViewComponent,
     TermContainerComponent,
     CourseItemComponent,
     SidenavMenuItemComponent,
diff --git a/src/app/degree-planner/degree-planner.routing.module.ts b/src/app/degree-planner/degree-planner.routing.module.ts
deleted file mode 100644
index ad9d0fb..0000000
--- a/src/app/degree-planner/degree-planner.routing.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { DegreePlannerComponent } from './degree-planner.component';
-
-const routes: Routes = [{ path: '', component: DegreePlannerComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class DegreePlannerRoutingModule {}
diff --git a/src/app/degree-planner/store/actions/plan.actions.ts b/src/app/degree-planner/store/actions/plan.actions.ts
index 10896ab..b73dd2a 100644
--- a/src/app/degree-planner/store/actions/plan.actions.ts
+++ b/src/app/degree-planner/store/actions/plan.actions.ts
@@ -4,6 +4,7 @@ import { DegreePlannerState } from '@app/degree-planner/store/state';
 import { YearMapping } from '@app/core/models/year';
 
 export enum PlanActionTypes {
+  InitialLoadRequest = '[Plan] Initial Load (Request)',
   InitialLoadSuccess = '[Plan] Initial Load (Success)',
 
   SwitchPlan = '[Plan] Switch',
@@ -28,6 +29,10 @@ export enum PlanActionTypes {
   ChangeGradeVisibility = '[Plan] Change Grade Visibility',
 }
 
+export class InitialLoadRequest implements Action {
+  public readonly type = PlanActionTypes.InitialLoadRequest;
+}
+
 export class InitialLoadSuccess implements Action {
   public readonly type = PlanActionTypes.InitialLoadSuccess;
   constructor(public payload: DegreePlannerState) {}
diff --git a/src/app/degree-planner/store/effects/plan.effects.ts b/src/app/degree-planner/store/effects/plan.effects.ts
index 4add386..087b5fc 100644
--- a/src/app/degree-planner/store/effects/plan.effects.ts
+++ b/src/app/degree-planner/store/effects/plan.effects.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ROOT_EFFECTS_INIT, Actions, Effect, ofType } from '@ngrx/effects';
+import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Observable, forkJoin, of } from 'rxjs';
 import {
   tap,
@@ -56,7 +56,7 @@ export class DegreePlanEffects {
 
   @Effect()
   init$ = this.actions$.pipe(
-    ofType(ROOT_EFFECTS_INIT),
+    ofType(PlanActionTypes.InitialLoadRequest),
     // Load the list of degree plans and data used by all degree plans.
     flatMap(() => {
       return forkJoinWithKeys({
-- 
GitLab