#Update data after put request

9 messages · Page 1 of 1 (latest)

sonic gulch
#

Hello! If my parent sends data to children.
And now in child component I do put request, how can I reload the data again.

// parent
export class ViewComponent implements OnInit, OnDestroy {

    @Input()
    public repair: RepairDetailResponse
    private _ngDestroy: Subject<any> = new Subject();
    private _repairSource: ReplaySubject<RepairDetailResponse> = new ReplaySubject(1);

    constructor(
        private repairService: RepairService,
        private route: ActivatedRoute
    ) {
        this.route.params
            .pipe(takeUntil(this._ngDestroy))
            .subscribe((params: Params) => {
                this.getRepair(+params['id']);
            });
    }

     private getRepair(id: number): void {
        this.repairService.getRepair(id)
            .pipe(takeUntil(this._ngDestroy))
            .subscribe((repair: RepairDetailResponse) => {
                this.repair = repair;
                this._repairSource.next(this.repair);
            });
    }
}

// child 
export class ChildCompnoent implements OnDestroy {
    @Input()
    public set _repair(response: RepairDetailResponse) {
        this.repair = response;

        this.setFormData(this.repair);
    }
    
public save() {
        this.repairService.updateRepair(this.repair.id, dto);
}
}
ember storm
#

your question is unclear. what kind of data does the parent send to children? please show the code (ts and html)
what kind of PUT request do you want to do in the Children? please show the code

#

.
also it's bad practice do do a subscribe() inside another subscribe()
here is a way to do it with no nested subscribe()

this.route.params.pipe(
    takeUntil(this._ngDestroy),
    switchMap((params: Params) => this.repairService.getRepair(+params['id']))
).subscribe((repair: RepairDetailResponse) => {
    this.repair = repair;
    this._repairSource.next(this.repair);
});
#

or maybe you don't even need to subscribe, if you use _repairSource (idk)

private _repairSource$: Observable<RepairDetailResponse> = this.route.params.pipe(
    takeUntil(this._ngDestroy),
    switchMap((params: Params) => this.repairService.getRepair(+params['id'])),
    tap((repair: RepairDetailResponse) => this.repair = repair)
);
sonic gulch
#

I managed to create observable in Service.
And after

#

one sec

#

This seemed to work but i'm not sure if it's the cleanest way to do it

// service
    public dataSource: Subject<any> = new Subject<any>();
    public _data$ = this.dataSource.asObservable();
    public load(id: number) {
        return this.http.get(Config.getBackendUrl(`/repairs/${id}`)).subscribe((response) => {
            this.dataSource.next(response);
        })
    }

In child

constrcutor() {
        this.repairService._data$.pipe(takeUntil(this._ngDestroy)).subscribe(data => {
            this.repair = data;
        })
}

 public save() {
        this.repairService.updateRepair(this.repair.id, dto).subscribe(() => {
            this.repairService.load(this.repair.id);
        });
}
ember storm
#

idk why you are doing it so complicate, maybe I am missing something.
can't you just do it like this?

// service
public load(id: number): Obsercable<IDontKnowTheType> {
    return this.http.get(Config.getBackendUrl(`/repairs/${id}`));
}

// component
constrcutor() {} // nothing here

public save() {
    this.repairService.updateRepair(this.repair.id, dto).pipe(
        switchMap(() => this.repairService.load(this.repair.id))
    ).subscribe(data => {
        this.repair = data
    });
}
ember storm