Skip to content

Commit ecffe6a

Browse files
jhadesjhades
committed
Angular NgRx Course
1 parent 4d339f1 commit ecffe6a

File tree

6 files changed

+84
-145
lines changed

6 files changed

+84
-145
lines changed

‎src/app/courses/course.selectors.ts

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const selectAllLessons = createSelector(
1717
);
1818

1919

20+
2021
export const selectLessonsPage = (courseId:number, page:PageQuery) => createSelector(
2122
selectAllLessons,
2223
allLessons => {
@@ -33,11 +34,6 @@ export const selectLessonsPage = (courseId:number, page:PageQuery) => createSele
3334
);
3435

3536

36-
export const selectLessonsLoading = createSelector(
37-
selectLessonsState,
38-
lessonsState => lessonsState.loading
39-
);
40-
4137

4238

4339

‎src/app/courses/course/course.component.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
}
77

88
.course-thumbnail {
9-
width: 150px;
9+
width: 175px;
1010
margin: 20px auto 0 auto;
1111
display: block;
12+
border-radius: 4px;
1213
}
1314

1415
.description-cell {
@@ -42,3 +43,8 @@
4243
h2 {
4344
font-family: "Roboto";
4445
}
46+
47+
48+
.bottom-toolbar {
49+
margin-top: 20px;
50+
}

‎src/app/courses/course/course.component.html

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,51 @@
1-
<div class="course">
1+
<div class="course" *ngIf="(course$ | async) as course">
22

3-
<h2>{{course?.description}}</h2>
3+
<h2>{{course?.description}}</h2>
44

5-
<img class="course-thumbnail" [src]="course?.iconUrl">
5+
<img class="course-thumbnail mat-elevation-z8" [src]="course?.iconUrl">
66

7-
<div class="mat-elevation-z8 lessons-table-container">
7+
<div class="spinner-container" *ngIf="(loading$ | async )">
88

9-
<div class="spinner-container" *ngIf="loading$ | async">
9+
<mat-spinner></mat-spinner>
1010

11-
<mat-spinner></mat-spinner>
11+
</div>
1212

13-
</div>
13+
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="lessons">
1414

15-
<mat-table class="lessons-table" [dataSource]="dataSource">
15+
<ng-container matColumnDef="seqNo">
1616

17-
<ng-container matColumnDef="seqNo">
17+
<mat-header-cell *matHeaderCellDef>#</mat-header-cell>
1818

19-
<mat-header-cell *matHeaderCellDef>#</mat-header-cell>
19+
<mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
2020

21-
<mat-cell *matCellDef="let lesson">{{lesson.seqNo}}</mat-cell>
21+
</ng-container>
2222

23-
</ng-container>
23+
<ng-container matColumnDef="description">
2424

25-
<ng-container matColumnDef="description">
25+
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
2626

27-
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
27+
<mat-cell class="description-cell"
28+
*matCellDef="let lesson">{{lesson.description}}</mat-cell>
2829

29-
<mat-cell class="description-cell"
30-
*matCellDef="let lesson">{{lesson.description}}
31-
</mat-cell>
30+
</ng-container>
3231

33-
</ng-container>
32+
<ng-container matColumnDef="duration">
3433

35-
<ng-container matColumnDef="duration">
34+
<mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
3635

37-
<mat-header-cell *matHeaderCellDef>Duration</mat-header-cell>
36+
<mat-cell class="duration-cell"
37+
*matCellDef="let lesson">{{lesson.duration}}</mat-cell>
3838

39-
<mat-cell class="duration-cell"
40-
*matCellDef="let lesson">{{lesson.duration}}
41-
</mat-cell>
39+
</ng-container>
4240

43-
</ng-container>
41+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
4442

45-
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
43+
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
4644

47-
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
45+
</mat-table>
4846

49-
</mat-table>
50-
51-
52-
<mat-paginator [length]="course?.lessonsCount" [pageSize]="3"></mat-paginator>
53-
54-
</div>
5547

48+
<button class="bottom-toolbar" mat-raised-button color="accent"
49+
(click)="loadMore()">Load More</button>
5650

5751
</div>
58-
59-
60-
61-
62-
63-

‎src/app/courses/course/course.component.ts

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,81 @@
1-
2-
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
3-
import {ActivatedRoute} from "@angular/router";
4-
import { MatPaginator } from "@angular/material/paginator";
5-
import { MatSort } from "@angular/material/sort";
6-
import { MatTableDataSource } from "@angular/material/table";
7-
import {Course} from "../model/course";
8-
import {CoursesHttpService} from "../services/courses-http.service";
9-
import {debounceTime, distinctUntilChanged, startWith, tap, delay} from 'rxjs/operators';
10-
import {merge, fromEvent, Observable} from "rxjs";
11-
import {LessonsDataSource} from "../services/lessons.datasource";
1+
import {AfterViewInit, Component, OnInit} from '@angular/core';
2+
import {ActivatedRoute} from '@angular/router';
3+
import {Course} from '../model/course';
4+
import {Observable} from 'rxjs';
125
import {AppState} from '../../reducers';
13-
import {select, Store} from '@ngrx/store';
6+
import {createSelector, select, Store} from '@ngrx/store';
147
import {PageQuery} from '../course.actions';
15-
import {selectLessonsLoading} from '../course.selectors';
8+
import {Lesson} from '../model/lesson';
9+
import {CourseEntityService} from '../services/course-entity.service';
1610

1711

1812
@Component({
19-
selector: 'course',
20-
templateUrl: './course.component.html',
21-
styleUrls: ['./course.component.css']
13+
selector: 'course',
14+
templateUrl: './course.component.html',
15+
styleUrls: ['./course.component.css']
2216
})
23-
export class CourseComponent implements OnInit, AfterViewInit {
17+
export class CourseComponent implements OnInit {
18+
19+
course$: Observable<Course>;
2420

25-
course:Course;
21+
lessons: Lesson[] = [];
2622

27-
dataSource: LessonsDataSource;
23+
displayedColumns = ['seqNo', 'description', 'duration'];
2824

29-
displayedColumns = ["seqNo", "description", "duration"];
25+
loading$: Observable<boolean>;
3026

31-
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
3227

33-
loading$ : Observable<boolean>;
28+
constructor(
29+
private route: ActivatedRoute,
30+
private store: Store<AppState>,
31+
private coursesService: CourseEntityService) {
3432

33+
}
3534

36-
constructor(private route: ActivatedRoute, private store: Store<AppState>) {
35+
ngOnInit() {
3736

38-
}
37+
const courseUrl = this.route.snapshot.paramMap.get('id');
3938

40-
ngOnInit() {
39+
this.loading$ = this.coursesService.loading$;
4140

42-
this.course = this.route.snapshot.data["course"];
41+
const selectAllCourses = this.coursesService.selectors.selectEntities;
4342

44-
this.loading$ = this.store.pipe(select(selectLessonsLoading));
43+
const selectCourseByUrl = createSelector(
44+
selectAllCourses,
45+
courses => courses.find(course => course.url == courseUrl)
46+
);
4547

46-
this.dataSource = new LessonsDataSource(this.store);
48+
this.course$ = this.store.pipe(select(selectCourseByUrl));
4749

48-
const initialPage: PageQuery = {
49-
pageIndex: 0,
50-
pageSize: 3
51-
};
50+
/*
51+
const initialPage: PageQuery = {
52+
pageIndex: 0,
53+
pageSize: 3
54+
};
5255
53-
this.dataSource.loadLessons(this.course.id, initialPage);
56+
this.dataSource.loadLessons(courseUrl, initialPage);
5457
55-
}
58+
*/
5659

57-
ngAfterViewInit() {
60+
}
5861

59-
this.paginator.page
60-
.pipe(
61-
tap(() => this.loadLessonsPage())
62-
)
63-
.subscribe();
6462

63+
/*
64+
loadLessonsPage() {
6565
66-
}
66+
const newPage: PageQuery = {
67+
pageIndex: this.paginator.pageIndex,
68+
pageSize: this.paginator.pageSize
69+
};
6770
68-
loadLessonsPage() {
71+
this.dataSource.loadLessons(this.course.id, newPage);
6972
70-
const newPage: PageQuery = {
71-
pageIndex: this.paginator.pageIndex,
72-
pageSize: this.paginator.pageSize
73-
};
73+
}
7474
75-
this.dataSource.loadLessons(this.course.id, newPage);
75+
*/
7676

77-
}
7877

78+
loadMore() {
7979

80+
}
8081
}

‎src/app/courses/courses-card-list/courses-card-list.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<mat-card-actions class="course-actions">
1818

19-
<button mat-raised-button color="primary" [routerLink]="['/courses', course.id]">
19+
<button mat-raised-button color="primary" [routerLink]="['/courses', course.url]">
2020
VIEW
2121
</button>
2222

‎src/app/courses/services/lessons.datasource.ts

Lines changed: 0 additions & 52 deletions
This file was deleted.

0 commit comments

Comments
 (0)