Multiple entities UI contexts

[strigefleur]

By default it's great to have syntax for UI entities (really helpful btw)

const { state, config } = createState(withEntities<Todo>(), withUIEntities<TodoUI>());

What if I want to have different UI contexts to switch between for same Todo?

interface TodoFooUI { propA: string; }
interface TodoBarUI { propB: string; }

having after union respectively Todo & TodoFooUI for one situation and Todo & TodoBarUI for another.

[NetanelBasal]

Use type guards in your code. https://www.typescriptlang.org/docs/handbook/advanced-types.html#using-type-predicates

[strigefleur]

Umm, how does it help?

In my mind it takes form of

const { state, config } = createState(
  withEntities<Todo>(),
  withUIEntities<TodoFooUI>(),
  withUIEntities<TodoBarUI>()
);

fooTodos$ = todosStore
  .combine({
    entities: todosStore.pipe(selectAll()),
    UIEntities: todosStore.pipe(selectEntities({ ref: FooUIEntitiesRef }))})
  .pipe(unionEntities());

barTodos$ = todosStore
  .combine({
    entities: todosStore.pipe(selectAll()),
    UIEntities: todosStore.pipe(selectEntities({ ref: BarUIEntitiesRef }))})
  .pipe(unionEntities());

as far as I understand it's not gonna work atm.

[NetanelBasal]

If you need new entity state you can use entitiesPropsFactory - https://ngneat.github.io/elf/docs/features/entities/entities-props-factory/

[strigefleur]

Oh, snap, I feel dumb now. I already got propsFactory defined as

const { todosEntitiesRef, withTodosEntities } =  entitiesPropsFactory('todo');
const { todosFooUIEntitiesRef, withTodosFooUIEntities } =  entitiesPropsFactory('todoFooUI');

but for some unknown reason was sure it takes imaginary syntax of

const { todosEntitiesRef, withTodosFooUIEntities, withTodosBarUIEntities } ...

instead of just having second UI propsFactory.
Sorry and thanks again :)