favorites-container.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';
import { SavedForLaterCourse } from '@app/core/models/saved-for-later-course';
import { GlobalState } from '@app/core/state';
import { getSavedForLaterCourses } from '@app/degree-planner/selectors';

// rsjx / ngrx
import { DegreePlannerState } from '@app/degree-planner/state';
import {
	AddSavedForLaterRequest, RemoveCourseRequest
} from '@app/degree-planner/actions/plan.actions';

// Selectors
import {
	getDropZones
} from '@app/degree-planner/selectors';

@Component({
	selector: 'cse-favorites-container',
	templateUrl: './favorites-container.component.html',
	styleUrls: ['./favorites-container.component.scss']
})
export class SavedForLaterContainerComponent implements OnInit {
	public courses$: Observable<SavedForLaterCourse[]>;
	public dropZones$: Observable<String[]>;

	constructor(private store: Store<{ degreePlanner: DegreePlannerState }>) {}

	public ngOnInit() {
		this.dropZones$ = this.store.pipe(select(getDropZones));
		this.courses$ = this.store.pipe(select(getSavedForLaterCourses));
	}

	drop(event) {
		const newContainer = event.container.id;
		const previousContainer = event.previousContainer.id;

		if (newContainer === previousContainer) {
			// If the user dropped a course into the same container do nothing
			return;

		} else if (previousContainer.indexOf('term-') === 0) {
			// If moving from term to to saved for later

			const {subjectCode, courseId, id} = event.item.data;
			this.store.dispatch(new AddSavedForLaterRequest({subjectCode, courseId}));
			this.store.dispatch(new RemoveCourseRequest({id}));
		}
	}
}