Skip to content

Commit e5cf0aa

Browse files
hoebbelsBhoebbelsB
authored
Merge branch 'main' into chore-drop-vanilla-case-studies-project
2 parents cf19406 + 4f3033c commit e5cf0aa

File tree

22 files changed

+449
-270
lines changed

22 files changed

+449
-270
lines changed

‎apps/demos/src/app/features/experiments/structural-directives/rx-let-poc/rx-query.component.ts

Lines changed: 72 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,59 @@ import { RxStrategyProvider } from '@rx-angular/cdk/render-strategies';
33
import { RickAndMortyService } from './rick-and-morty.service';
44
import { query } from 'rx-query';
55
import { Observable, Subject } from 'rxjs';
6-
import { delay, filter, map, mapTo, pluck, share } from 'rxjs/operators';
6+
import { delay, filter, map, mapTo, share } from 'rxjs/operators';
77

88
@Component({
99
selector: 'rxa-rx-query',
1010
template: `
1111
<rxa-visualizer>
1212
<div visualizerHeader>
13-
<rxa-strategy-select (strategyChange)="strategyProvider.primaryStrategy = $event">
13+
<rxa-strategy-select
14+
(strategyChange)="strategyProvider.primaryStrategy = $event"
15+
>
1416
</rxa-strategy-select>
15-
<br/>
17+
<br />
1618
<mat-form-field>
1719
<label>Search</label>
18-
<input #i matInput type="text" (input)="search$.next(i.value)">
20+
<input #i matInput type="text" (input)="search$.next(i.value)" />
1921
</mat-form-field>
2022
</div>
2123
<div class="mt-5 row w-100 d-flex">
2224
<div class="col-4 dh-embedded-view p-2">
23-
<p *rxLet="suspenseTrg$; let n;">
24-
suspenseTrigger: {{n}}
25-
</p>
26-
<p *rxLet="errorTrg$; let n;">
27-
errorTrigger: {{n}}
28-
</p>
29-
<div *rxLet="charactersQueryResult$; let qr;">
30-
<p>qr.status: {{qr.status}}</p>
31-
<p>qr.data: {{qr?.data?.results?.length}}</p>
32-
<p>qr.error: {{qr?.error?.message}}</p>
33-
<p>qr.retries: {{qr?.retries}}</p>
25+
<p *rxLet="suspenseTrg$; let n">suspenseTrigger: {{ n }}</p>
26+
<p *rxLet="errorTrg$; let n">errorTrigger: {{ n }}</p>
27+
<div *rxLet="charactersQueryResult$; let qr">
28+
<p>qr.status: {{ qr.status }}</p>
29+
<p>qr.data: {{ qr?.data?.results?.length }}</p>
30+
<p>qr.error: {{ qr?.error?.message }}</p>
31+
<p>qr.retries: {{ qr?.retries }}</p>
3432
</div>
3533
</div>
3634
<div class="col-4 dh-embedded-view p-2">
37-
<div *rxContext="characters$;
38-
suspenseTpl: suspenseTpl;
39-
errorTpl: errorTpl;
40-
suspenseTrg: suspenseTrg$
41-
errorTrg: errorTrg$
42-
">
43-
<div *rxLet="characters$; let characters;
44-
let suspenseVal = $suspenseVal;
45-
let errorVal = $errorVal;
46-
suspenseTrg: suspenseTrg$
47-
errorTrg: errorTrg$
48-
">suspenseVal : {{suspenseVal}} <mat-progress-bar *ngIf="suspenseVal" [mode]="suspenseVal"></mat-progress-bar>
35+
<div
36+
*rxContext="
37+
characters$;
38+
suspenseTpl: suspenseTpl;
39+
errorTpl: errorTpl;
40+
suspenseTrg: suspenseTrg$;
41+
errorTrg: errorTrg$
42+
"
43+
>
44+
<div
45+
*rxLet="
46+
characters$;
47+
let characters;
48+
let suspenseVal = $suspenseVal;
49+
let errorVal = $errorVal;
50+
suspenseTrg: suspenseTrg$;
51+
errorTrg: errorTrg$
52+
"
53+
>
54+
suspenseVal : {{ suspenseVal }}
55+
<mat-progress-bar
56+
*ngIf="suspenseVal"
57+
[mode]="suspenseVal"
58+
></mat-progress-bar>
4959
<mat-card *ngIf="errorVal">
5060
<mat-card-title>Error</mat-card-title>
5161
</mat-card>
@@ -56,16 +66,18 @@ import { delay, filter, map, mapTo, pluck, share } from 'rxjs/operators';
5666
</ul>
5767
</div>
5868
</div>
59-
60-
6169
</div>
6270
<div class="col-4 dh-embedded-view p-2">
63-
<div *rxLet="characters$; let characters;
64-
suspenseTpl: suspenseTpl;
65-
errorTpl: errorTpl;
66-
suspenseTrg: suspenseTrg$
67-
errorTrg: errorTrg$
68-
">
71+
<div
72+
*rxLet="
73+
characters$;
74+
let characters;
75+
suspenseTpl: suspenseTpl;
76+
errorTpl: errorTpl;
77+
suspenseTrg: suspenseTrg$;
78+
errorTrg: errorTrg$
79+
"
80+
>
6981
<ul>
7082
<li *ngFor="let character of characters">
7183
<a [routerLink]="character.id">{{ character.name }}</a>
@@ -88,31 +100,42 @@ import { delay, filter, map, mapTo, pluck, share } from 'rxjs/operators';
88100
changeDetection: ChangeDetectionStrategy.Default,
89101
host: {
90102
class: 'm-1 p-1',
91-
style: 'display: block;'
103+
style: 'display: block;',
92104
},
93-
providers: []
105+
providers: [],
94106
})
95107
export class RxQueryComponent {
96108
search$ = new Subject<string>();
97109
charactersQueryResult$: Observable<any> = query(
98110
'character',
99111
this.search$,
100-
(search: string) => this.service.getCharacter({ name: search }).pipe(delay(200))
112+
(search: string) =>
113+
this.service.getCharacter({ name: search }).pipe(delay(200))
101114
);
102115

103116
loadingMap = {
104-
'loading': 'query',
105-
'refreshing': 'indeterminate'
117+
loading: 'query',
118+
refreshing: 'indeterminate',
106119
};
107-
status$ = this.charactersQueryResult$.pipe(pluck('status'), share());
108-
109-
110-
suspenseTrg$ = this.status$.pipe(map(s => this.loadingMap[s]), filter(v => !!v));
111-
characters$ = this.charactersQueryResult$.pipe(map(res => res?.data?.results));
112-
errorTrg$ = this.charactersQueryResult$.pipe(filter(res => res?.status === 'error'), mapTo(true));
120+
status$ = this.charactersQueryResult$.pipe(
121+
map((v) => v.status),
122+
share()
123+
);
113124

114-
constructor(public strategyProvider: RxStrategyProvider,
115-
public service: RickAndMortyService) {
116-
}
125+
suspenseTrg$ = this.status$.pipe(
126+
map((s) => this.loadingMap[s]),
127+
filter((v) => !!v)
128+
);
129+
characters$ = this.charactersQueryResult$.pipe(
130+
map((res) => res?.data?.results)
131+
);
132+
errorTrg$ = this.charactersQueryResult$.pipe(
133+
filter((res) => res?.status === 'error'),
134+
mapTo(true)
135+
);
117136

137+
constructor(
138+
public strategyProvider: RxStrategyProvider,
139+
public service: RickAndMortyService
140+
) {}
118141
}

0 commit comments

Comments
 (0)