@journeyapps-labs/lib-reactor-data-layer 1.0.0

package/src/Collection.ts

@@ -0,0 +1,68 @@
+import { IObservableArray, observable } from 'mobx';
+import { BaseObserver } from '@journeyapps-labs/lib-reactor-utils';
+
+export interface CollectionListener {
+  cleared: () => any;
+}
+
+export interface LoadEvent {
+  aborted: boolean;
+}
+
+export class Collection<T> extends BaseObserver<CollectionListener> {
+  @observable
+  accessor items: IObservableArray<T>;
+
+  @observable
+  accessor loading: boolean;
+
+  @observable
+  accessor failed: boolean;
+
+  protected promise: Promise<T[]>;
+
+  constructor() {
+    super();
+    this.items = [] as IObservableArray<T>;
+    this.loading = false;
+    this.failed = false;
+  }
+
+  clear() {
+    this.loading = false;
+    this.failed = false;
+    this.items.clear();
+    this.iterateListeners((cb) => cb.cleared?.());
+  }
+
+  async load(loader: (event: LoadEvent) => Promise<T[]>) {
+    if (this.promise) {
+      return this.promise;
+    }
+    const loadEvent: LoadEvent = {
+      aborted: false
+    };
+    this.loading = true;
+    this.promise = loader(loadEvent);
+    const l = this.registerListener({
+      cleared: () => {
+        loadEvent.aborted = true;
+      }
+    });
+    try {
+      const items = await this.promise;
+      if (!items || loadEvent.aborted) {
+        return;
+      }
+      this.items.replace(items);
+    } catch (ex) {
+      this.failed = true;
+      throw ex;
+    } finally {
+      l();
+      this.loading = false;
+      this.promise = null;
+    }
+    return this.items;
+  }
+}

package/src/LifecycleCollection.ts

@@ -0,0 +1,85 @@
+import { Collection } from './Collection';
+import { autorun, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
+import * as _ from 'lodash';
+
+export interface LifecycleModel<Serialized> {
+  key: string;
+
+  dispose();
+
+  patch(data: Serialized);
+}
+
+export interface LifecycleCollectionOptions<Serialized, Model extends LifecycleModel<Serialized>> {
+  collection: Collection<Serialized>;
+  generateModel: (d: Serialized) => Model;
+  getKeyForSerialized: (s: Serialized) => string;
+}
+
+/**
+ * Wraps an existing collection with data-to-model conversion, and is smart about creating / patching and deleting
+ * models based on how the wrapping collection loads items
+ */
+export class LifecycleCollection<Serialized, Model extends LifecycleModel<Serialized>> {
+  @observable
+  accessor _items: Map<string, Model>;
+
+  reaction: IReactionDisposer;
+
+  constructor(protected options: LifecycleCollectionOptions<Serialized, Model>) {
+    this._items = new Map();
+    this.reaction = autorun(
+      () => {
+        const items = options.collection.items.reduce((prev, cur) => {
+          const key = options.getKeyForSerialized(cur);
+          if (!key) {
+            console.error(`Missing key for lifecycle item, check that the 'get key()' accessor is implemented.`);
+            return prev;
+          }
+          prev[options.getKeyForSerialized(cur)] = cur;
+          return prev;
+        }, {});
+        const incomingKeys = Object.keys(items);
+        let existingKeys = Array.from(this._items.keys());
+
+        _.difference(existingKeys, incomingKeys).forEach((m) => {
+          if (this._items.has(m)) {
+            this._items.get(m).dispose();
+            this._items.delete(m);
+          }
+        });
+
+        _.intersection(incomingKeys, existingKeys).forEach((key: string) => {
+          this._items.get(key)?.patch(items[key]);
+        });
+
+        _.difference(incomingKeys, existingKeys).map((k) => {
+          const model = options.generateModel(items[k]);
+          this._items.set(model.key, model);
+        });
+      },
+      {
+        name: 'LifecycleCollection'
+      }
+    );
+  }
+
+  get collection() {
+    return this.options.collection;
+  }
+
+  @computed get items(): Model[] {
+    return Array.from(this._items.values());
+  }
+
+  @computed get loading() {
+    return this.options.collection.loading;
+  }
+
+  dispose() {
+    this.reaction();
+    this.items.forEach((i) => {
+      i.dispose();
+    });
+  }
+}

package/src/PaginatedCollection.ts

@@ -0,0 +1,150 @@
+import { autorun, IReactionDisposer, observable } from 'mobx';
+import { Collection } from './Collection';
+import { SearchResult, SearchResultEntry } from '@journeyapps-labs/lib-reactor-search';
+
+export interface PaginatedCollectionOptions<T, R> {
+  transformer: (res: R) => T[];
+  loaderIterator?: () => Promise<AsyncIterator<R>> | AsyncIterator<R>;
+  hasMore?: (res: R) => boolean;
+}
+
+export interface AsSearchResultOptions<T> {
+  idTransformer: (item: T) => string;
+  match: (item: T) => boolean;
+}
+
+export interface PaginatedSearchResultEntry<T = any> extends SearchResultEntry {
+  item: T;
+}
+
+export class PaginatedSearchResult<T extends any> extends SearchResult<PaginatedSearchResultEntry<T>> {
+  observer: PaginatedCollection;
+  disposer: IReactionDisposer;
+
+  constructor(observer: PaginatedCollection) {
+    super();
+    this.observer = observer;
+    this.disposer = autorun(() => {
+      this.loading = observer ? observer.loading : false;
+    });
+  }
+
+  dispose() {
+    super.dispose();
+    this.disposer?.();
+  }
+
+  hasMore() {
+    if (!this.observer) {
+      return false;
+    }
+    return this.observer.hasMore;
+  }
+
+  loadMore() {
+    if (!this.observer) {
+      return;
+    }
+    return this.observer.loadMore();
+  }
+}
+
+export class PaginatedCollection<T = any, R = any> extends Collection<T> {
+  @observable
+  protected accessor lastResponse: R;
+
+  protected iterator: AsyncIterator<R>;
+  protected options: PaginatedCollectionOptions<T, R>;
+
+  public hasMore: boolean;
+
+  constructor(options: PaginatedCollectionOptions<T, R>) {
+    super();
+    this.lastResponse = null;
+    this.iterator = null;
+    this.options = options;
+  }
+
+  getData(res: R) {
+    return this.options.transformer(res);
+  }
+
+  async loadAll(
+    load?: () => Promise<AsyncIterator<R>> | AsyncIterator<R>,
+    options?: { abort: AbortController }
+  ): Promise<any> {
+    const loader = load ?? this.options.loaderIterator;
+    this.hasMore = await this.loadInitialData(loader);
+    while (!options?.abort.signal.aborted && this.hasMore) {
+      this.hasMore = await this.loadMore();
+    }
+  }
+
+  clear() {
+    this.lastResponse = null;
+    this.hasMore = false;
+    this.iterator = null;
+    super.clear();
+  }
+
+  async loadMore(): Promise<boolean> {
+    if (!this.iterator) {
+      return false;
+    }
+    this.hasMore = false;
+    await this.load(async (event) => {
+      const res = await this.iterator.next();
+      if (event.aborted || res.done || !res.value) {
+        return this.items;
+      }
+      this.hasMore = res.value.more;
+      this.lastResponse = res.value;
+      return this.items.concat(this.getData(res.value));
+    });
+    return this.hasMore;
+  }
+
+  async loadInitialData(load?: () => Promise<AsyncIterator<R>> | AsyncIterator<R>): Promise<boolean> {
+    const loader = load ?? this.options.loaderIterator;
+
+    await this.load(async (event) => {
+      this.iterator = await loader();
+      const next = await this.iterator.next();
+      if (event.aborted || next.done || !next.value) {
+        return [];
+      }
+      this.lastResponse = next.value;
+      this.hasMore = this.options.hasMore(this.lastResponse);
+      return this.getData(this.lastResponse);
+    });
+    return this.hasMore;
+  }
+
+  asSearchResult(options: AsSearchResultOptions<T>): PaginatedSearchResult<T> {
+    const result = new PaginatedSearchResult<T>(this);
+    const runner = autorun(() => {
+      if (!this.lastResponse) {
+        return;
+      }
+      result.setValues(
+        this.items
+          .filter((d) => options.match(d))
+          .map((d) => {
+            return {
+              item: d,
+              key: options.idTransformer(d)
+            };
+          })
+      );
+    });
+    result.registerListener({
+      dispose: () => {
+        runner();
+      }
+    });
+
+    // also load the entries
+    this.loadMore();
+    return result;
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './PaginatedCollection';
+export * from './Collection';
+export * from './LifecycleCollection';

package/tests/collections.test.ts

@@ -0,0 +1,92 @@
+import { expect, it } from 'vitest';
+import { Collection } from '../src/Collection';
+import { configure } from 'mobx';
+
+configure({
+  enforceActions: 'never'
+});
+
+const sleep = (s: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, s);
+  });
+
+it('Should load and clear collections', async () => {
+  let collection = new Collection<string>();
+
+  expect(collection.loading).toEqual(false);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual([]);
+
+  collection.load(async (event) => {
+    await sleep(200);
+    expect(event.aborted).toEqual(false);
+    return ['test1'];
+  });
+
+  expect(collection.loading).toEqual(true);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual([]);
+
+  await sleep(500);
+  expect(collection.loading).toEqual(false);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual(['test1']);
+
+  collection.clear();
+  expect(collection.loading).toEqual(false);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual([]);
+
+  expect(collection._listenerSize).toEqual(0);
+});
+
+it('Should abort collections', async () => {
+  let collection = new Collection<string>();
+
+  collection.load(async (event) => {
+    await sleep(200);
+    expect(event.aborted).toEqual(true);
+    return ['test1'];
+  });
+
+  expect(collection.loading).toEqual(true);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual([]);
+
+  collection.clear();
+  await sleep(500);
+  expect(collection.loading).toEqual(false);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual([]);
+
+  expect(collection._listenerSize).toEqual(0);
+});
+
+it('Should rethrow errors when loading data after updating state', async () => {
+  let collection = new Collection<string>();
+  let ex: Error;
+
+  collection
+    .load(async (event) => {
+      await sleep(200);
+      throw new Error('test');
+    })
+    .catch((_ex) => {
+      ex = _ex;
+    });
+
+  expect(collection.loading).toEqual(true);
+  expect(collection.failed).toEqual(false);
+  expect(collection.items).toEqual([]);
+
+  collection.clear();
+  await sleep(500);
+  expect(collection.loading).toEqual(false);
+  expect(collection.failed).toEqual(true);
+  expect(collection.items).toEqual([]);
+
+  expect(collection._listenerSize).toEqual(0);
+  expect(ex).toBeTruthy();
+  expect(ex.message).toEqual('test');
+});

package/tests/lifecycle.test.ts

@@ -0,0 +1,114 @@
+import { expect, it } from 'vitest';
+import { Collection } from '../src/Collection';
+import { LifecycleCollection, LifecycleModel } from '../src';
+import { autorun, configure, observable } from 'mobx';
+
+configure({
+  enforceActions: 'never'
+});
+
+export interface DummySerialized {
+  id: string;
+  label: string;
+}
+
+class DummyModel implements LifecycleModel<DummySerialized> {
+  @observable
+  accessor ser: DummySerialized;
+
+  disposed: boolean;
+
+  constructor(ser: DummySerialized) {
+    this.ser = ser;
+    this.disposed = false;
+  }
+
+  get key() {
+    return this.ser.id;
+  }
+
+  dispose() {
+    this.disposed = true;
+  }
+
+  patch(data: DummySerialized) {
+    this.ser = data;
+  }
+}
+
+it('Should correctly manage lifecycle', async () => {
+  let generated: DummyModel[] = [];
+
+  let collection = new Collection<DummySerialized>();
+  let lifecycle_collection = new LifecycleCollection<DummySerialized, DummyModel>({
+    collection: collection,
+    generateModel: (ser: DummySerialized) => {
+      const c = new DummyModel(ser);
+      generated.push(c);
+      return c;
+    },
+    getKeyForSerialized: (ser) => {
+      return ser.id;
+    }
+  });
+
+  expect(collection.items.length).toEqual(0);
+  expect(lifecycle_collection.items.length).toEqual(0);
+
+  let items = [];
+  autorun(() => {
+    items = [...lifecycle_collection.items];
+  });
+
+  await collection.load(async () => {
+    return [
+      {
+        id: '1',
+        label: 'a'
+      }
+    ];
+  });
+
+  expect(collection.items.length).toEqual(1);
+  expect(lifecycle_collection.items.length).toEqual(1);
+  expect(items.length).toEqual(1);
+  expect(lifecycle_collection.items[0].disposed).toEqual(false);
+  expect(generated.length).toEqual(1);
+
+  // test patching
+  await collection.load(async () => {
+    return [
+      {
+        id: '1',
+        label: 'b'
+      }
+    ];
+  });
+
+  expect(collection.items.length).toEqual(1);
+  expect(lifecycle_collection.items.length).toEqual(1);
+  expect(items.length).toEqual(1);
+  expect(items[0].ser.label).toEqual('b');
+  expect(lifecycle_collection.items[0].ser.label).toEqual('b');
+  expect(lifecycle_collection.items[0].disposed).toEqual(false);
+  expect(generated.length).toEqual(1);
+
+  // create new item, old item should be disposed
+  await collection.load(async () => {
+    return [
+      {
+        id: '2',
+        label: 'c'
+      }
+    ];
+  });
+
+  expect(collection.items.length).toEqual(1);
+  expect(lifecycle_collection.items.length).toEqual(1);
+  expect(items.length).toEqual(1);
+  expect(lifecycle_collection.items[0].ser.label).toEqual('c');
+  expect(items[0].ser.label).toEqual('c');
+  expect(lifecycle_collection.items[0].disposed).toEqual(false);
+  expect(generated[0].disposed).toEqual(true);
+  expect(generated.length).toEqual(2);
+});

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "declarationDir": "dist/@types",
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.json"
+  ],
+  "references": [
+    {
+      "path": "../lib-reactor-search"
+    },
+    {
+      "path": "../lib-reactor-utils"
+    }
+  ]
+}