I am currently utilizing the "mainData" service, which is composed of 3 key parts:
currentPageis utilized by the paginator component for page navigation and can be updated dynamically.foldersholds all folders within the current directory. This observable is used by 2 different components for listing folder content.filescontains all files within the current folder. This observable is utilized by 3 components for listing folder content.
The default view does not display any folders, so unnecessary HTTP calls should be avoided.
public currentPage = new ReplaySubject(1);
public folders: Observable<FLFolder[]>;
public files: Observable<FLFile[]>;
constructor(
activatedRoute: ActivatedRoute,
folderService: FolderService,
fileService: FileService,
) {
// Logic to populate `this.currentPage`
// Internal observable only accessed by `folders` and `files`
const folderIDAndPage: Observable<[string, number]> = combineLatest(
activatedRoute.url.pipe(
switchMap(segments => folderService.getFoldersFromSegments(segments)),
distinctUntilChanged(),
),
this.currentPage.pipe(
distinctUntilChanged(),
),
).pipe(
// Prevent multiple HTTP requests…
publishReplay(1),
refCount(),
);
this.folders = folderIDAndPage.pipe(
switchMap(([folderID, page]) => folderService.getFfolders(folderID, page)),
// Prevent multiple HTTP requests…
publishReplay(1),
refCount(),
);
this.files = folderIDAndPage.pipe(
switchMap(([folderID, page]) => fileService.getFiles(folderID, page)),
// Prevent multiple HTTP requests…
publishReplay(1),
refCount(),
);
}
If neither folders nor files are subscribed to, no HTTP requests are made. However, if just one is subscribed to, both folders and files will be populated and updated simultaneously with a single HTTP call.