How to set/access activeId for Entity Props

[Synkretik]

Hi,

I have a use case similar to your Angular Product/Cart example: My app has projects and each project has one or more scenario(s): projectStore.

In the projectStore I need to track both the activeProjectId and the activeScenarioId .

const { scenariosEntitiesRef, withScenariosEntities } = entitiesPropsFactory('scenarios');

const {state, config} = createState(
    withEntities<AppProject, 'uid'>({idKey: 'uid'}),
    withScenariosEntities<AppScenario, 'uid'>({idKey: 'uid'}),
    withActiveId(),
    withRequestsStatus<`projects`>(initializeAsPending('projects')),
    withRequestsStatus<`scenarios`>(initializeAsPending('scenarios'))
);

I thought one (hackish) way of doing it would be with setActiveIds([activeProjectId , activeScenarioId])

    setActiveProjectId(projectId: AppProject['uid']) {
        const activeScenarioId = projectStore.query(getEntity(projectId)).activeScenarioId;
        projectStore.update(setActiveId([projectId, activeScenarioId]));
    }

    setScenarioId(scenarioId: AppScenario['uid']) {
        const projectId = projectStore.query(getActiveId(state))[0];
        projectStore.update(setActiveId([projectId, scenarioId]));
    }

Since I'm keeping the activeScenarioId on AppProject, I could also just keep track that way.

In the code above, I when I tried replacing, setActiveId() with setActiveIds() I get TS2345: Argument of type 'Reducer<{ activeIds: any[]; }>' is not assignable to parameter of type 'Reducer<{ activeId: any; } & { requestsStatus: Record<"projects", StatusState>; } & { requestsStatus: Record<"scenarios", StatusState>; } & { ...; } & { ...; }>'.

I thought the cleanest way of doing it would be projectStore.update(setActiveId(scenarioId, {ref: scenariosEntitiesRef})); to stay coherent.

Any suggestions on how best to get this accomplished would be much appreciated!

[NetanelBasal]

import { propsFactory } from '@ngneat/elf';

const { scenariosEntitiesRef, withScenariosEntities } = entitiesPropsFactory('scenarios');

const  { 
  withScenariosActiveId, 
  selectScenariosActiveId, 
  setScenariosActiveId 
} = propsFactory('scenariosActiveId', { initialValue: undefined as (undefined | string) });

const {state, config} = createState(
    withEntities<AppProject, 'uid'>({idKey: 'uid'}),
    withScenariosEntities<AppScenario, 'uid'>({idKey: 'uid'}),
    withActiveId(),
    withScenariosActiveId(),
    withRequestsStatus<`projects` | 'scenarios'>(initializeAsPending(['projects', 'scenarios'])),
);

setActiveProjectId(projectId: AppProject['uid']) {
   projectStore.update(setActiveId(projectId));
}

setScenarioId(scenarioId: AppScenario['uid']) {
   projectStore.update(setScenariosActiveId(scenarioId));
}

[Synkretik]

Thanks!

[Synkretik]

Hi,

I'm assuming that to get the activeScenarioEntity, I also have to declare it as a propsFactory:

const  {
    withScenariosActiveEntity,
    selectScenariosActiveEntity,
    getScenariosActiveEntity,
    setScenariosActiveEntity
} = propsFactory('scenariosActiveEntity', { initialValue: undefined as (undefined | AppScenario) });

Likewise, if I want to have a sorted list of entities:

const {
    withSortItem,
    selectSortItem,
    getSortItem,
    setSortItem
} = propsFactory('sortItem', { initialValue: 'name'});

const {
    withSortOrder,
    selectSortOrder,
    getSortOrder,
    setSortOrder
} = propsFactory('sortOrder', { initialValue: 'asc' as ('asc' | 'desc')});

...

    projectScenarios$ = projectStore.pipe(
        selectAllApply({
            ref: scenariosEntitiesRef,
            filterEntity: (e) => e.projectId === projectStore.query(getActiveId)
        }),
        map((scenarios) => _orderBy(scenarios, [projectStore.query(getSortItem)], [projectStore.query(getSortOrder)]))
    )

    get activeScenarioId(): AppScenario['uid'] {
        return projectStore.query(getScenariosActiveId);
    }

    setActiveScenarioId(scenarioId: AppScenario['uid']) {
        const activeScenario = projectStore.query(getEntity(scenarioId, {ref: scenariosEntitiesRef}));
        projectStore.update(setScenariosActiveId(scenarioId), setScenariosActiveEntity(activeScenario));
    }

I love Elf in that it's compact and doesn't require much boilerplate. That said it seems like for more complex states we would have to increase the number of propFactory instances. Any chance we can pass the EntitiesRef to each one of the built-in ActiveId queries and mutations, e.g.,

    get activeScenario(): AppProject {
        return projectStore.query(getEntity(projectStore.query(getActiveId({ref: ScenariosRef})));
    }

or better yet,

    get activeScenario(): AppProject {
        return projectStore.query(getActiveEntity({ref: ScenariosRef}));
    }

Of course, I might also be missing the obvious...