As a complete beginner to these technologies, please bear with me if my question sounds strange and the terminology is not quite right.
I have a component that displays data in a table format.
export class SourceFieldComponent implements OnInit {
...
componentState$: Observable<ComponentState<SourceFieldResponse>>;
fileUploadState$: Observable<FileUploadState>;
...
ngOnInit(): void {
...
this.componentState$ = this.sourceFieldService.sourcesFieldsByDataSource$(this.dataSourceId)
.pipe(
map(response => {
this.currentData.next(response)
return { dataState: DataState.LOADED_STATE, appData: response }
}),
startWith({ dataState: DataState.LOADING_STATE, appData: null }),
catchError((error: string) => {
return of({ dataState: DataState.ERROR_STATE, error: error })
})
);
...
}
onFileSelected(event) {
...
this.fileUploadState$ = this.fileUploadService.uploadFile$(formData)
.pipe(
map(response => {
if (response.statusCode != this.RESPONSE_OK) {
return { uploadState: UploadState.ERROR_STATE, error: response.message }
}
return { uploadState: UploadState.LOADED_STATE, error: response.message }
}),
startWith({ uploadState: UploadState.LOADED_STATE }),
catchError((error: string) => {
return of({ uploadState: UploadState.ERROR_STATE, error: error })
})
)
...
}
}
Whenever a new file is uploaded from the browser, the onFileSelected method is triggered and the file gets successfully uploaded to the backend.
The issue arises when the backend service responds, as I need to refresh the table displaying the data (new records are created from the uploaded file).
It seems like I need to somehow 'refresh' the componentState$ observable but I am unsure how to proceed.
I have attempted some solutions, but none seem to work effectively.