pass cutoff-term to 'academicYearState' pipe via parameter

src/app/degree-planner/degree-planner.component.html

@@ -25,12 +25,12 @@
 		</div>
 
 		<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
-			<mat-accordion multi="true">
+			<mat-accordion multi="true" *ngIf="(firstActiveTermCode$ | async) as cutoffTermCode">
 				<ng-container *ngFor="let year of termsByYear$ | async">
 					<mat-expansion-panel class="year-container"[expanded]="true">
 						<mat-expansion-panel-header>
 							<mat-panel-title>
-								{{ year.twoDigitYearCode | academicYearState }}
+								{{ year.twoDigitYearCode | academicYearState:cutoffTermCode }}
 							</mat-panel-title>
 						</mat-expansion-panel-header>
 						<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" class="term-container-wrapper">

src/app/degree-planner/degree-planner.component.ts

@@ -14,65 +14,68 @@ import { Year } from '@app/core/models/year';
 
 // Selectors
 import {
-	getAllDegreePlans,
-	getVisibleRoadmapId,
-	getAllVisibleTermsByYear
+  getAllDegreePlans,
+  getVisibleRoadmapId,
+  firstActiveTermCode,
+  getAllVisibleTermsByYear,
 } from '@app/degree-planner/selectors';
 
 // Actions
 import { ChangeVisiblePlanRequest } from '@app/degree-planner/actions/plan.actions';
 
 @Component({
-	selector: 'cse-degree-planner',
-	templateUrl: './degree-planner.component.html',
-	styleUrls: ['./degree-planner.component.scss']
+  selector: 'cse-degree-planner',
+  templateUrl: './degree-planner.component.html',
+  styleUrls: ['./degree-planner.component.scss'],
 })
 export class DegreePlannerComponent implements OnInit {
-	public termsByAcademicYear: Object;
-	public mobileView: MediaQueryList;
-	public coursesData$: any;
+  public termsByAcademicYear: Object;
+  public mobileView: MediaQueryList;
+  public coursesData$: any;
 
-	public visibleRoadmapId$: Observable<number | undefined>;
-	public allDegreePlans$: Observable<DegreePlan[]>;
-	public termsByYear$: Observable<Year[]>;
+  public visibleRoadmapId$: Observable<number | undefined>;
+  public allDegreePlans$: Observable<DegreePlan[]>;
+  public firstActiveTermCode$: Observable<string | undefined>;
+  public termsByYear$: Observable<Year[]>;
 
-	constructor(
-		private store: Store<GlobalState>,
-		public mediaMatcher: MediaMatcher
-	) {
-		this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
-	}
+  constructor(
+    private store: Store<GlobalState>,
+    public mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
-	public ngOnInit() {
-		this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
-		this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
-		this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
-	}
+  public ngOnInit() {
+    this.visibleRoadmapId$ = this.store.pipe(select(getVisibleRoadmapId));
+    this.allDegreePlans$ = this.store.pipe(select(getAllDegreePlans));
+    this.firstActiveTermCode$ = this.store.pipe(select(firstActiveTermCode));
+    this.termsByYear$ = this.store.pipe(select(getAllVisibleTermsByYear));
+  }
 
-	public handleDegreePlanChange(event: MatSelectChange): void {
-		if (typeof event.value === 'number') {
-			this.store.dispatch(
-				new ChangeVisiblePlanRequest({ newVisibleRoadmapId: event.value })
-			);
-		}
-	}
+  public handleDegreePlanChange(event: MatSelectChange): void {
+    if (typeof event.value === 'number') {
+      this.store.dispatch(
+        new ChangeVisiblePlanRequest({ newVisibleRoadmapId: event.value }),
+      );
+    }
+  }
 
-	public getTermDropZone() {
-		const termCodes = ['favoriteCourse-dropZone'];
+  public getTermDropZone() {
+    const termCodes = ['favoriteCourse-dropZone'];
 
-		for (const yearCode in this.termsByAcademicYear) {
-			if (this.termsByAcademicYear[yearCode]) {
-				const year = this.termsByAcademicYear[yearCode];
-				for (const termKey in year.terms) {
-					if (year.terms[termKey]) {
-						const term = year.terms[termKey];
-						termCodes.push('term-' + term.termCode);
-					}
-				}
-			}
-		}
-		// console.log(termCodes);
+    for (const yearCode in this.termsByAcademicYear) {
+      if (this.termsByAcademicYear[yearCode]) {
+        const year = this.termsByAcademicYear[yearCode];
+        for (const termKey in year.terms) {
+          if (year.terms[termKey]) {
+            const term = year.terms[termKey];
+            termCodes.push('term-' + term.termCode);
+          }
+        }
+      }
+    }
+    // console.log(termCodes);
 
-		return termCodes;
-	}
+    return termCodes;
+  }
 }

src/app/degree-planner/effects/plan.effects.ts

@@ -8,10 +8,7 @@ import { Store } from '@ngrx/store';
 
 // Services
 import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
-import {
-  getDegreePlannerState,
-  getVisibleRoadmapId,
-} from '@app/degree-planner/selectors';
+import { getDegreePlannerState } from '@app/degree-planner/selectors';
 
 // Actions
 import {

src/app/degree-planner/selectors.ts

@@ -17,6 +17,17 @@ export const getSavedForLaterCourses = createSelector(
   state => state.savedForLaterCourses,
 );
 
+export const firstActiveTermCode = createSelector(
+  getDegreePlannerState,
+  state => {
+    if (state.activeTermCodes.length > 0) {
+      return state.activeTermCodes[0];
+    } else {
+      return undefined;
+    }
+  },
+);
+
 export const getAllDegreePlans = createSelector(
   getDegreePlannerState,
   state => state.allDegreePlans,

src/app/shared/pipes/academic-year-state.pipe.ts

 import { Pipe, PipeTransform } from '@angular/core';
-import { GlobalState } from '@app/core/state';
-import { State, select } from '@ngrx/store';
-
-import { getAllVisibleTerms } from './../../degree-planner/selectors';
-import { PlannedTerm } from './../../core/models/planned-term';
 
 @Pipe({
   name: 'academicYearState',
 })
 export class AcademicYearStatePipe implements PipeTransform {
-  terms: PlannedTerm[];
-  constructor(private store: State<GlobalState>) {
-    this.store
-      .pipe(select(getAllVisibleTerms))
-      .subscribe(terms => (this.terms = terms));
-  }
-
-  transform(year: string): string {
-    const termCode = this.terms[0].termCode;
+  transform(year: string, cutoffTermCode: string): string {
     let century = 2000;
-    if (termCode.substr(0, 1) === '0') {
+    if (cutoffTermCode.substr(0, 1) === '0') {
       century = 1900;
     }
     const YYYY = century + Number(year);
 
-    if (year < termCode.substr(1, 2)) {
+    if (year < cutoffTermCode.substr(1, 2)) {
       return 'Past: ' + (YYYY - 1) + '-' + YYYY;
-    } else if (year > termCode.substr(1, 2)) {
+    } else if (year > cutoffTermCode.substr(1, 2)) {
       return 'Future: ' + (YYYY - 1) + '-' + YYYY;
     } else {
       return 'Current: ' + (YYYY - 1) + '-' + YYYY;