Get flag details on details page

[KD1712]

Get details on navigation. Issue to load details on page reload or url hit

[danoswaltCL]

So I'm guessing the issue you're seeing is this: what's happening is that the data you see when you nav from root page is from the pre-existing flag data, not actually from the fetch-by-id response. It's a trick! Your set-up is working up to that point. You can spy on the featureFlags.entities data-store value in the dev tools, when you navigate from root, the selector takes the id from url and finds it in there already because it exists from in the paginated call. When you refresh, that call is absent, so it will be empty, and it won't work that way because you're missing this:

Please add this in the reducer to pop the flag into the data store on success:

on(FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess, (state, { flag }) => {
    return adapter.addOne(flag, {
      ...state,
      isLoadingFeatureFlags: false,
    });
  }),

2. If you put that in there, couple other things:

• you'll want to make sure to wait until "data" is defined because this is an async call and it can be undefined at first
  <app-common-section-card-list *ngIf="featureFlag">. It would be good to show a load-spinner if else.

• I found that I needed to help angular realize there was a change with this.changeDetectorRef.detectChanges(); after setting this.featureFlag

Now when the data store is updated on success, the page will render it when ready.

[KD1712]

So I'm guessing the issue you're seeing is this: what's happening is that the data you see when you nav from root page is from the pre-existing flag data, not actually from the fetch-by-id response. It's a trick! Your set-up is working up to that point. You can spy on the featureFlags.entities data-store value in the dev tools, when you navigate from root, the selector takes the id from url and finds it in there already because it exists from in the paginated call. When you refresh, that call is absent, so it will be empty, and it won't work that way because you're missing this:

Please add this in the reducer to pop the flag into the data store on success:

on(FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess, (state, { flag }) => {
    return adapter.addOne(flag, {
      ...state,
      isLoadingFeatureFlags: false,
    });
  }),

2. If you put that in there, couple other things:

• you'll want to make sure to wait until "data" is defined because this is an async call and it can be undefined at first
  <app-common-section-card-list *ngIf="featureFlag">. It would be good to show a load-spinner if else.
• I found that I needed to help angular realize there was a change with this.changeDetectorRef.detectChanges(); after setting this.featureFlag

Now when the data store is updated on success, the page will render it when ready.

Yes i get it now

[danoswaltCL]

if we sub to the feature flag directly with an async pipe in template, we can do this and eliminate half of the component code:

<ng-container *ngIf="(featureFlag$ | async) as featureFlag; else loading">
  <app-common-section-card-list class="common-section-card-list">
    <app-feature-flag-overview-details-section-card [data]="featureFlag" section-card></app-feature-flag-overview-details-section-card>
    <app-feature-flag-inclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card>inclusions-card</app-feature-flag-inclusions-section-card>
    <app-feature-flag-exclusions-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 0" section-card>exclusions-card</app-feature-flag-exclusions-section-card>
    <app-feature-flag-exposures-section-card [data]="featureFlag" *ngIf="(activeTabIndex$ | async) === 1" section-card>exposures-card</app-feature-flag-exposures-section-card>
  </app-common-section-card-list>
</ng-container>

<ng-template #loading>
  <mat-spinner></mat-spinner>
</ng-template>

[danoswaltCL]

then in component code, you just need this, no need to manage anything about this subscription by hand, the "filter" pipe isn't really doing anything very helpful, and change detector ref can be eliminated

featureFlag$ = this.featureFlagsService.selectedFeatureFlag$

[danoswaltCL]

yeah i'll need this as an observable like suggested above in order to complete some work I'm currently doing, let me know if this suggestion works for you, I tried it in my local and it works fine.

[KD1712]

Yes works for me too