Commit d54bfe80 authored by micha's avatar micha
Browse files

fix property accessors

parent 6f25eea8
import {Injectable} from '@angular/core';
import {BehaviorSubject, combineLatest, Observable, of} from 'rxjs';
import {BehaviorSubject, Observable, of} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import {Item, JoinedItem, List, mergeListsAndItems, upsertEntities} from "shared";
import {StartHttpV1Service} from "combining-streams/lib/exercises/http-service-v1/start.http-v1.service";
import {Item, List, upsertEntities} from "shared";
import {HttpClient} from "@angular/common/http";
interface ListServiceState {
......@@ -13,7 +12,7 @@ interface ListServiceState {
@Injectable({
providedIn: 'root'
})
export class optInUpdatesV1ListService {
export class OptInUpdatesV1ListService {
private readonly baseUrl = 'api';
private readonly itemUrl = [this.baseUrl, 'item'].join('/');
private readonly listUrl = [this.baseUrl, 'list'].join('/');
......
import {Component} from '@angular/core';
import {combineLatest, concat, Observable, of, Subject} from "rxjs";
import {combineLatest, concat, Observable, Subject} from "rxjs";
import {filter, map, shareReplay, take, withLatestFrom} from "rxjs/operators";
import {JoinedItem, mergeListsAndItems} from "shared";
import {optInUpdatesV1ListService} from "combining-streams/lib/exercises/opt-in-updates-v1/opt-in-updates-v1-list.service";
import {mergeListsAndItems} from "shared";
import {OptInUpdatesV1ListService} from "combining-streams/lib/exercises/opt-in-updates-v1/opt-in-updates-v1-list.service";
@Component({
selector: 'solution-opt-in-updates-basic',
......@@ -60,7 +60,7 @@ export class SolutionOptInUpdatesV1Component {
);
constructor(private listService: optInUpdatesV1ListService) {
constructor(public listService: OptInUpdatesV1ListService) {
this.listService.refetchLists();
this.listService.refetchItems();
}
......
import {Component} from '@angular/core';
import {combineLatest, concat, of, Subject} from "rxjs";
import {filter, map, shareReplay, take, withLatestFrom} from "rxjs/operators";
import {combineLatest, of, Subject} from "rxjs";
import {filter, map, shareReplay} from "rxjs/operators";
import {mergeListsAndItems} from "shared";
import {optInUpdatesV1ListService} from "combining-streams/lib/exercises/opt-in-updates-v1/opt-in-updates-v1-list.service";
import {OptInUpdatesV1ListService} from "combining-streams/lib/exercises/opt-in-updates-v1/opt-in-updates-v1-list.service";
@Component({
selector: 'opt-in-updates',
......@@ -45,7 +45,7 @@ export class StartOptInUpdatesV1Component {
shareReplay(1)
);
constructor(private listService: optInUpdatesV1ListService) {
constructor(public listService: OptInUpdatesV1ListService) {
this.listService.refetchLists();
this.listService.refetchItems();
}
......
import {Component, Input, Output} from '@angular/core';
import {Observable, ReplaySubject} from 'rxjs';
import {map, shareReplay, startWith, switchMap} from 'rxjs/operators';
import {distinctUntilChanged, map, shareReplay, startWith, switchMap} from 'rxjs/operators';
import {FormBuilder, FormGroup} from '@angular/forms';
@Component({
selector: 'solution-state-selection',
template: `
<div class="case-content">
<form *ngIf="formGroup$ | async as formGroup" [formGroup]="formGroup">
<form *ngIf="derivation$ | async as formGroup" [formGroup]="formGroup">
<mat-form-field *ngFor="let c of formGroup.controls | keyvalue">
<label>{{ c.key }}</label>
<input matInput [formControlName]="c.key"/>
......@@ -17,21 +17,22 @@ import {FormBuilder, FormGroup} from '@angular/forms';
`
})
export class SolutionStateSelectionComponent {
state$ = new ReplaySubject(1);
formModel$ = new ReplaySubject(1);
@Input()
set formGroupModel(modelFromInput: { [key: string]: any }) {
if (modelFromInput) {
this.state$.next(modelFromInput);
this.formModel$.next(modelFromInput);
}
}
formGroup$: Observable<FormGroup> = this.state$.pipe(
derivation$: Observable<FormGroup> = this.formModel$.pipe(
startWith({}),
map(input => this.getFormGroupFromConfig(input))
map(input => this.getFormGroupFromConfig(input)),
this.select
);
@Output() formValueChange = this.formGroup$.pipe(
@Output() formValueChange = this.derivation$.pipe(
switchMap((fg: FormGroup) => fg.valueChanges)
);
......@@ -39,7 +40,10 @@ export class SolutionStateSelectionComponent {
}
select(o$: Observable<any>) {
return o$.pipe(shareReplay(1));
return o$.pipe(
distinctUntilChanged(),
shareReplay(1)
);
}
getFormGroupFromConfig(modelFromInput) {
......
......@@ -7,7 +7,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
selector: 'state-selection',
template: `
<div class="case-content">
<form *ngIf="formGroup$ | async as formGroup" [formGroup]="formGroup">
<form *ngIf="derivation$ | async as formGroup" [formGroup]="formGroup">
<mat-form-field *ngFor="let c of formGroup.controls | keyvalue">
<label>{{ c.key }}</label>
<input matInput [formControlName]="c.key"/>
......@@ -17,31 +17,28 @@ import {FormBuilder, FormGroup} from '@angular/forms';
`
})
export class StartStateSelectionComponent {
state$ = new ReplaySubject(1);
formModel$ = new ReplaySubject(1);
@Input()
set formGroupModel(modelFromInput: { [key: string]: any }) {
if (modelFromInput) {
this.state$.next(modelFromInput);
this.formModel$.next(modelFromInput);
}
}
formGroup$: Observable<FormGroup> = this.state$.pipe(
derivation$: Observable<FormGroup> = this.formModel$.pipe(
startWith({}),
map(input => this.getFormGroupFromConfig(input))
);
@Output() formValueChange = this.formGroup$.pipe(
@Output()
formValueChange = this.derivation$.pipe(
switchMap((fg: FormGroup) => fg.valueChanges)
);
constructor(private fb: FormBuilder) {
}
select(o$: Observable<any>) {
return o$.pipe(shareReplay(1));
}
getFormGroupFromConfig(modelFromInput) {
const config = Object.entries(modelFromInput).reduce(
(c, [name, initialValue]) => ({...c, [name]: [initialValue]}),
......
import {Component, OnDestroy} from '@angular/core';
import {Subject, Subscription} from 'rxjs';
import {takeUntil, tap} from 'rxjs/operators';
import {Component} from '@angular/core';
import {tap} from 'rxjs/operators';
import {SourceService} from './source.service';
import {SubscriptionHandlingService} from './subscription.service';
......@@ -12,10 +11,7 @@ import {SubscriptionHandlingService} from './subscription.service';
`,
providers: [SubscriptionHandlingService]
})
export class SolutionSubscriptionHandlingComponent implements OnDestroy {
subscription = new Subscription();
onDestroy$ = new Subject<void>();
export class SolutionSubscriptionHandlingComponent {
process1$ = this.source.$.pipe(
tap(num => {
console.log('New value: ', num);
......@@ -26,10 +22,8 @@ export class SolutionSubscriptionHandlingComponent implements OnDestroy {
private source: SourceService,
private subs: SubscriptionHandlingService
) {
this.process1$.pipe(takeUntil(this.onDestroy$)).subscribe();
this.subs.hold(this.process1$);
}
ngOnDestroy(): void {
this.onDestroy$.next();
}
}
......@@ -9,8 +9,7 @@ import {SubscriptionHandlingService} from './subscription.service';
template: `
<h2>Subscription Handling</h2>
<div class="case-content">Process running internally</div>
`,
providers: [SubscriptionHandlingService]
`
})
export class StartSubscriptionHandlingComponent implements OnDestroy {
subscription = new Subscription();
......@@ -24,7 +23,6 @@ export class StartSubscriptionHandlingComponent implements OnDestroy {
constructor(
private source: SourceService,
private subs: SubscriptionHandlingService
) {
this.process1$.pipe(takeUntil(this.onDestroy$)).subscribe();
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment