feat: improve check for related data being loaded

This commit is contained in:
Johannes Millan 2019-06-27 18:13:41 +02:00
parent d3a7fe528a
commit 2aaefd49dd
4 changed files with 27 additions and 16 deletions

View file

@ -1,4 +1,4 @@
<ng-container *ngIf="(isAllDataLoaded$|async)">
<ng-container *ngIf="(isAllDataLoadedInitially$|async)">
<main-header></main-header>
<bookmark-bar class="bg-800"></bookmark-bar>
<!--TODO move inside page container somehow -->

View file

@ -33,10 +33,10 @@ import {warpRouteAnimation} from './ui/animations/warp-route';
import {NoteService} from './features/note/note.service';
import {BreakpointObserver} from '@angular/cdk/layout';
import {DOCUMENT} from '@angular/common';
import {map, take} from 'rxjs/operators';
import {filter, map, take} from 'rxjs/operators';
import {MigrateService} from './imex/migrate/migrate.service';
import {combineLatest, Observable} from 'rxjs';
import {selectIsAllProjectDataLoaded} from './features/project/store/project.reducer';
import {selectIsRelatedDataLoadedForCurrentProject} from './features/project/store/project.reducer';
import {Store} from '@ngrx/store';
import {fadeAnimation} from './ui/animations/fade.ani';
import {IS_MAC} from './util/is-mac';
@ -59,10 +59,14 @@ const SIDE_PANEL_BREAKPOINT = 900;
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit {
isAllDataLoaded$: Observable<boolean> = combineLatest(
this._store.select(selectIsAllProjectDataLoaded),
isAllDataLoadedInitially$: Observable<boolean> = combineLatest(
this._store.select(selectIsRelatedDataLoadedForCurrentProject),
this._store.select(selectIsTaskDataLoaded),
).pipe(map(([isProjectDataLoaded, isTaskDataLoaded]) => isProjectDataLoaded && isTaskDataLoaded));
).pipe(
map(([isProjectDataLoaded, isTaskDataLoaded]) => isProjectDataLoaded && isTaskDataLoaded),
filter(isLoaded => isLoaded),
take(1),
);
isSidePanelBp$: Observable<boolean> = this._breakPointObserver.observe([
`(max-width: ${SIDE_PANEL_BREAKPOINT}px)`,
]).pipe(map(result => result.matches));

View file

@ -24,6 +24,7 @@ import {
selectArchivedProjects,
selectCurrentProject,
selectCurrentProjectId,
selectIsRelatedDataLoadedForCurrentProject,
selectProjectBasicCfg,
selectProjectBreakNr,
selectProjectBreakNrForDay,
@ -54,6 +55,8 @@ import {SnackService} from '../../core/snack/snack.service';
providedIn: 'root',
})
export class ProjectService {
isRelatedDataLoadedForCurrentProject$: Observable<boolean> = this._store$.pipe(select(selectIsRelatedDataLoadedForCurrentProject));
list$: Observable<Project[]> = this._store$.pipe(select(selectUnarchivedProjects));
archived$: Observable<Project[]> = this._store$.pipe(select(selectArchivedProjects));
currentProject$: Observable<Project> = this._store$.pipe(

View file

@ -1,16 +1,16 @@
import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
import { BreakNr, BreakNrCopy, Project, ProjectBasicCfg, WorkStartEnd } from '../project.model';
import { ProjectActions, ProjectActionTypes } from './project.actions';
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { FIRST_PROJECT } from '../project.const';
import { sortStringDates } from '../../../util/sortStringDates';
import {createEntityAdapter, EntityAdapter, EntityState} from '@ngrx/entity';
import {BreakNr, BreakNrCopy, Project, ProjectBasicCfg, WorkStartEnd} from '../project.model';
import {ProjectActions, ProjectActionTypes} from './project.actions';
import {createFeatureSelector, createSelector} from '@ngrx/store';
import {FIRST_PROJECT} from '../project.const';
import {sortStringDates} from '../../../util/sortStringDates';
export const PROJECT_FEATURE_NAME = 'projects';
export interface ProjectState extends EntityState<Project> {
// additional entities state properties
currentId: string | null;
isDataLoaded: boolean;
projectIdForLoadedRelatedData: string;
}
const sortByTitle = (p1: Project, p2: Project) => {
@ -31,7 +31,11 @@ export const selectAllProjects = createSelector(selectProjectFeatureState, selec
export const selectUnarchivedProjects = createSelector(selectAllProjects, (projects) => projects.filter(p => !p.isArchived));
export const selectArchivedProjects = createSelector(selectAllProjects, (projects) => projects.filter(p => p.isArchived));
export const selectIsAllProjectDataLoaded = createSelector(selectProjectFeatureState, state => state.isDataLoaded);
export const selectIsRelatedDataLoadedForCurrentProject = createSelector(
selectProjectFeatureState,
(state): boolean => state.currentId === state.projectIdForLoadedRelatedData
);
export const selectCurrentProject = createSelector(selectProjectFeatureState,
(state) => state.entities[state.currentId]
);
@ -100,7 +104,7 @@ export const initialProjectState: ProjectState = projectAdapter.getInitialState(
entities: {
[FIRST_PROJECT.id]: FIRST_PROJECT
},
isDataLoaded: false,
projectIdForLoadedRelatedData: null,
});
@ -123,7 +127,7 @@ export function projectReducer(
case ProjectActionTypes.LoadProjectRelatedDataSuccess: {
return {
...state,
isDataLoaded: true,
projectIdForLoadedRelatedData: state.currentId,
};
}