Skip to content

Commit c9cefaa

Browse files
igorstojanovic91igorstojanovic91
committed
making loading spinner work
1 parent f0afed0 commit c9cefaa

File tree

2 files changed

+61
-70
lines changed

2 files changed

+61
-70
lines changed

‎src/app/riders/rider-profile/rider-timeline/rider-history.service.ts

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Injectable} from '@angular/core';
2-
import {BehaviorSubject, Observable} from "rxjs";
2+
import {Observable, Subject} from "rxjs";
33
import {EventTimeLine} from "./time-line/event-timeline.model";
44
import {distinctUntilChanged, map} from "rxjs/operators";
55
import {HttpClient} from "@angular/common/http";
@@ -13,8 +13,8 @@ export class RiderHistoryService {
1313

1414
RIDER_PAT = "/api/riders/";
1515
EVENTTIMELINE_ENDPOINT = "/eventtimeline"
16-
17-
private eventTimeLines = new BehaviorSubject<EventTimeLine[]>([]);
16+
private eventTimeLineData: EventTimeLine[] = [];
17+
private eventTimeLines = new Subject<EventTimeLine[]>();
1818
private eventTimeLines$ = this.eventTimeLines.asObservable();
1919

2020
constructor(
@@ -28,46 +28,42 @@ export class RiderHistoryService {
2828
}
2929

3030
getRiderTimeLines(id: string): Observable<EventTimeLine[]> {
31-
if (this.eventTimeLines.value.every(eventTimeLine => eventTimeLine.riderId !== id)) {
32-
let requestUrl = this.appConfigService.getProtocol() + this.appConfigService.getHostName() + this.RIDER_PAT + id + this.EVENTTIMELINE_ENDPOINT;
33-
this.httpClient.get<EventTimeLine[]>(requestUrl).subscribe(
34-
(responseData: EventTimeLine[]) => {
35-
const allEventTimeLines = this.eventTimeLines.getValue();
36-
allEventTimeLines.push(...responseData);
37-
allEventTimeLines.forEach(eventTimeLine => {
38-
const isongoing = new Date(eventTimeLine.timeline[0].time).toDateString() === new Date().toDateString();
39-
eventTimeLine.ongoing = isongoing;
40-
});
41-
this.eventTimeLines.next(allEventTimeLines);
42-
},
43-
error => {
44-
console.log('ERROR loading competitions data :-(', error)
45-
}
46-
)
47-
}
31+
let requestUrl = this.appConfigService.getProtocol() + this.appConfigService.getHostName() + this.RIDER_PAT + id + this.EVENTTIMELINE_ENDPOINT;
32+
this.httpClient.get<EventTimeLine[]>(requestUrl).subscribe(
33+
(responseData: EventTimeLine[]) => {
34+
this.eventTimeLineData = responseData;
35+
this.eventTimeLineData.forEach(eventTimeLine => {
36+
eventTimeLine.ongoing = new Date(eventTimeLine.timeline[0].time).toDateString() === new Date().toDateString();
37+
});
38+
this.eventTimeLines.next(this.eventTimeLineData);
39+
},
40+
error => {
41+
console.log('ERROR loading competitions data :-(', error)
42+
}
43+
)
44+
4845

4946
return this.eventTimeLines$.pipe(
5047
map(eventTimeLines => eventTimeLines.filter(eventTimeLine => eventTimeLine.riderId === id)),
5148
// filter for if any of riders timelines has changed reference
5249
distinctUntilChanged((prevTimeLines, nextTimelines) => {
5350
return prevTimeLines.length === nextTimelines.length &&
54-
prevTimeLines.every(timeline => nextTimelines.includes(timeline));
51+
prevTimeLines.every(timeline => nextTimelines.includes(timeline));
5552
})
5653
);
54+
5755
}
5856

5957
private updateTimeLine(updatedTimeLine: EventTimeLine) {
60-
const currentEventTimeLines = this.eventTimeLines.value;
61-
const index = currentEventTimeLines.findIndex(item => item.id === updatedTimeLine.id);
62-
if (index != -1) {
63-
currentEventTimeLines[index] = updatedTimeLine;
64-
} else {
65-
currentEventTimeLines.push(updatedTimeLine);
66-
}
67-
currentEventTimeLines.forEach(eventTimeLine => {
68-
const isongoing = new Date(eventTimeLine.timeline[0].time).toDateString() === new Date().toDateString();
69-
eventTimeLine.ongoing = isongoing;
58+
const index = this.eventTimeLineData.findIndex(item => item.id === updatedTimeLine.id);
59+
if (index != -1) {
60+
this.eventTimeLineData[index] = updatedTimeLine;
61+
} else {
62+
this.eventTimeLineData.push(updatedTimeLine);
63+
}
64+
this.eventTimeLineData.forEach(eventTimeLine => {
65+
eventTimeLine.ongoing = new Date(eventTimeLine.timeline[0].time).toDateString() === new Date().toDateString();
7066
});
71-
this.eventTimeLines.next(currentEventTimeLines);
67+
this.eventTimeLines.next(this.eventTimeLineData);
7268
}
7369
}

‎src/app/riders/rider-profile/rider-timeline/rider-time-line.component.ts

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, Input, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
1+
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
22
import {EventTimeLine, EventTimeLineCollection} from "./time-line/event-timeline.model";
33
import {RiderHistoryService} from "./rider-history.service";
44
import {Subscription} from "rxjs";
@@ -8,16 +8,13 @@ import {Subscription} from "rxjs";
88
templateUrl: './rider-time-line.component.html',
99
styleUrls: ['./rider-time-line.component.scss']
1010
})
11-
export class RiderTimeLineComponent implements OnDestroy, OnChanges {
12-
13-
private riderTimeLineSubscription?: Subscription;
11+
export class RiderTimeLineComponent implements OnDestroy, OnInit {
1412

1513
currentTimeLines ?: EventTimeLine[];
1614
historyTimeLineCollection ?: EventTimeLineCollection[];
17-
18-
loading: boolean = false;
19-
20-
@Input() riderId ?: string;
15+
loading: boolean = true;
16+
@Input() riderId!: string;
17+
private riderTimeLineSubscription!: Subscription;
2118

2219
constructor(private riderHistoryService: RiderHistoryService) {
2320
}
@@ -26,41 +23,38 @@ export class RiderTimeLineComponent implements OnDestroy, OnChanges {
2623
this.riderTimeLineSubscription?.unsubscribe();
2724
}
2825

29-
ngOnChanges(changes: SimpleChanges): void {
30-
if (changes.riderId.currentValue != changes.riderId.previousValue && changes.riderId.currentValue != undefined) {
31-
this.riderTimeLineSubscription?.unsubscribe();
32-
33-
if (this.riderId) {
34-
35-
this.loading = true;
36-
37-
this.riderTimeLineSubscription = this.riderHistoryService.getRiderTimeLines(this.riderId).subscribe((timelines) => {
26+
ngOnInit(): void {
27+
this.riderTimeLineSubscription = this.riderHistoryService.getRiderTimeLines(this.riderId).subscribe((timelines) => {
28+
const currentTimeLines = timelines.filter(timeline => timeline.ongoing).sort((a, b) => this.timeLineSorter(a, b));
29+
this.currentTimeLines = currentTimeLines.length > 0 ? currentTimeLines : undefined;
30+
const historyTimeLines = timelines.filter(timeline => !timeline.ongoing).sort((a, b) => this.timeLineSorter(a, b));
31+
const historyTimeLineCollection: EventTimeLineCollection[] = [];
32+
for (const timeLine of historyTimeLines) {
33+
const year = new Date(timeLine.surfEvent.startDateTime).getFullYear();
34+
const index = historyTimeLineCollection.findIndex(htl => htl.year === year);
35+
if (index != -1) {
36+
historyTimeLineCollection[index].timeLines.push(timeLine);
3837

39-
const currentTimeLines = timelines.filter(timeline => timeline.ongoing).sort((a, b) => this.timeLineSorter(a, b));
40-
this.currentTimeLines = currentTimeLines.length > 0 ? currentTimeLines : undefined;
41-
42-
const historyTimeLines = timelines.filter(timeline => !timeline.ongoing).sort((a, b) => this.timeLineSorter(a, b));
43-
const historyTimeLineCollection: EventTimeLineCollection[] = [];
44-
for (const timeLine of historyTimeLines) {
45-
const year = new Date(timeLine.surfEvent.startDateTime).getFullYear();
46-
const index = historyTimeLineCollection.findIndex(htl => htl.year === year);
47-
if (index != -1) {
48-
historyTimeLineCollection[index].timeLines.push(timeLine);
49-
} else {
50-
historyTimeLineCollection.push({
51-
year: year,
52-
timeLines: [timeLine]
53-
})
54-
}
38+
} else {
39+
historyTimeLineCollection.push({
40+
year: year,
41+
timeLines: [timeLine]
42+
})
5543
}
56-
this.historyTimeLineCollection = historyTimeLineCollection.length > 0 ? historyTimeLineCollection : undefined;
44+
}
45+
this.historyTimeLineCollection = historyTimeLineCollection.length > 0 ? historyTimeLineCollection : undefined;
46+
this.loading = false;
47+
48+
},
49+
error => {
50+
this.currentTimeLines = undefined;
51+
this.historyTimeLineCollection = undefined;
52+
this.loading = false;
53+
})
5754

58-
this.loading = false;
59-
})
60-
}
61-
}
6255
}
6356

57+
6458
private timeLineSorter(tlA: EventTimeLine, tlB: EventTimeLine): number {
6559
if (new Date(tlA.surfEvent.startDateTime).getFullYear() < new Date(tlB.surfEvent.startDateTime).getFullYear()) {
6660
return -1;
@@ -72,4 +66,5 @@ export class RiderTimeLineComponent implements OnDestroy, OnChanges {
7266
}
7367
}
7468
}
69+
7570
}

0 commit comments

Comments
 (0)