Something like akita array utils?

[maxpowel]

Hi, I'm wondering if there is something like https://opensource.salesforce.com/akita/docs/additional/array but for Elf.

I'm trying to replicate this example with entities but I'm a bit lost. I basically want to have arrays of entities that can be modified (the entity itself and the array by appending or removing elements).

This is what I have but please bring me some light, I don't even know if I'm using Elf correctly.
This is the file app.component.ts from a fresh angular app

import { Component } from '@angular/core';
import { createStore } from '@ngneat/elf';
import { addEntities, selectAllEntities, withEntities, entitiesPropsFactory, selectEntities, updateEntities,updateEntitiesIds } from '@ngneat/elf-entities';
import { map, withLatestFrom } from 'rxjs';

const { commentsEntitiesRef, withCommentsEntities } = entitiesPropsFactory('comments');

interface Comment {
  id: string;
  message: string;
}

interface Post {
  id: string;
  title: string;
  body: string;
  comments: Array<Comment['id']>;
}


const store = createStore(
  { name: 'posts' }, 
  withEntities<Post>(),
  withCommentsEntities<Comment>()
  );

  // Init the store with some data
  store.update(
    addEntities({ id: '1', message: 'Awesome!' }, { ref: commentsEntitiesRef }),
    addEntities({
      id: '1',
      title: 'Elf example',
      body: 'Cool',
      comments: ['1'],
    })
  );


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'pruebaelf';
  
  comments$ = store.pipe(selectAllEntities({ ref: commentsEntitiesRef }))
 
  //inspired by https://github.com/ngneat/elf/discussions/204
  // better using this I think https://github.com/ngneat/elf/discussions/119
  posts$ = store.pipe(
    selectAllEntities(),
    withLatestFrom(store.pipe(selectEntities({ ref: commentsEntitiesRef }))),
    map(([posts, comments]) => {
      return posts.map(s => {
           return {
              ...s, 
              comments: s.comments.map( commentId => {
                return comments[commentId]
              })
           }
       })
      })
    );

  //This function is triggered by a button click
  go() {
    console.log("LALA") 

   // By doing this, comments$ is refreshed in the html but posts$ doesn't
    store.update(
      updateEntities('1', {message: 'Yeaa' }, { ref: commentsEntitiesRef }),
    );

    // Removing a comment. By doing this, comments$ is refreshed (because I modiffy the post directly I guess)
    store.update(
      updateEntities('1', (post) => ({...post, comments: post.comments.filter(i => i !='1') })),
    );

    // Adding a comment
    store.update(addEntities({id: '2', message: 'number 2'}, { ref: commentsEntitiesRef }))
    store.update(
      updateEntities('1', (post) => ({...post, comments: [...post.comments, '2'] })),
    );
    
  }
}

My example was done based on this https://ngneat.github.io/elf/docs/features/entities/entities-props-factory but the part of "normalized state" is not providing a lot of details.

Thank you!

[maxpowel]

Forgot to mention that what I'm trying to do is something like this https://netbasal.com/working-with-normalized-data-in-akita-e626d4c67ca4#:~:text=In%20Akita%2C%20normalizing%20data%20means,by%20storing%20the%20entities'%20ID.

[NetanelBasal]

Elf has no array methods since I don't want to maintain it. There are libraries on the web that do the same thing.

According to your example, if the entities that are changed are the comments, you should switch the stream to this:

 posts$ = store.pipe(
    selectAllEntities({ ref: commentsEntitiesRef }),
    withLatestFrom(store.pipe(selectEntities()),
    map(([comments, posts]) => {
      return posts.map(s => {
           return {
              ...s, 
              comments: s.comments.map( commentId => {
                return comments[commentId]
              })
           }
       })
      })
    );

[micobarac]

I switched from Akita to Elf, but I really need those array utilities Akita has. I have a deeply nested entities array, for which I need arrayUpsert helper method Akita has.

Is it possible to copy just those helper array methods from Akita to Elf?

I can add Akita as a dependency for this purpose, but it looks a bit clumsy, considering I switched to Elf entirely.

export interface Item {
  index: number;
  hidden: boolean;
}

export interface Chart {
  index: number;
  items: Item[];
}

export interface ChartUI {
  section: string;
  index: number;
  items: Item[];
}

export interface Charts {
  section: string;
  charts: Chart[];
}

...

import { Injectable } from '@angular/core';
import { Settings } from '@app/app.settings';
import { arrayUpsert } from '@datorama/akita';
import { createStore } from '@ngneat/elf';
import { getEntity, upsertEntitiesById, withEntities } from '@ngneat/elf-entities';
import { Chart, ChartUI, Charts } from './chart.model';

const name: string = Settings.Prefix + 'chart';

const chartStore = createStore({ name }, withEntities<Charts, 'section'>({ idKey: 'section' }));

@Injectable({
  providedIn: 'root'
})
export class ChartRepository {
  setChart(chartUI: ChartUI) {
    const { section, ...chart } = chartUI;

    chartStore.update(
      upsertEntitiesById(chartUI.section, {
        updater: (entity) => ({ section, charts: arrayUpsert(entity.charts, chart.index, chart, 'index') }),
        creator: (section) => <Charts>{ section, charts: [] }
      })
    );
  }

  getChart(section: string, index: number): Chart {
    const charts = chartStore.query(getEntity(section));
    return charts?.charts?.find((chart) => chart.index === index);
  }

  isHiddenDataset(chart: Chart, index: number): boolean {
    return !!(chart && chart.items?.find((item) => item.index === index)?.hidden);
  }

  reset() {
    chartStore.reset();
  }
}

[maxpowel]

Thank you so much @NetanelBasal
I'm currently migrating my akita application to Elf and it is being amazing! (and straightforward)
I really like how Elf works