@arrai-innovations/reactive-helpers 1.0.1 → 1.0.3

package/.circleci/config.yml

@@ -1,9 +1,8 @@
 version: 2.1
 orbs:
-    eslint: arrai/eslint@7.3.0
+    eslint: arrai/eslint@7.4.0
     prettier: arrai/prettier@5.1.1
-    utils: arrai/utils@1.9.0
-    npm: arrai/npm@2.3.2
+    npm: arrai/npm@2.4.1
     github: arrai/github@1.1.0
 workflows:
     test:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "directories": {

package/tests/unit/use/listInstance.spec.js

@@ -421,4 +421,53 @@ describe("use/listInstance.spec.js", function () {
             expect(fakeId).toBeTruthy();
         });
     });
+    it("computes objectsInOrder and maintains state", () => {
+        const crudListResolvedPage3 = [
+            {
+                id: 3,
+                __str__: "qwer",
+                name: "qwer",
+            },
+            {
+                id: 8,
+                __str__: "asfd",
+                name: "asdf",
+            },
+            {
+                id: 2,
+                __str__: "zxcv",
+                name: "zxcv",
+            },
+        ];
+        const addObject = {
+            id: 4,
+            __str__: "yuio",
+            name: "yiuo",
+        };
+        const listInstance = useListInstance({
+            defaultListArgs: { user: 1 },
+            defaultRetrieveArgs: { fields: fields },
+        });
+        let crudListResolve;
+        const crudListPromise = new Promise((resolve) => {
+            crudListResolve = resolve;
+        });
+        let passedPageCallback;
+        globalList.mockImplementation(({ pageCallback }) => {
+            passedPageCallback = pageCallback;
+            return crudListPromise;
+        });
+
+        listInstance.list();
+
+        passedPageCallback(crudListResolvedPage3);
+        crudListResolve();
+        expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
+        listInstance.addListObject(addObject);
+        crudListResolvedPage3.push(addObject);
+        expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
+        listInstance.deleteListObject(8);
+        crudListResolvedPage3.splice(1, 1);
+        expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
+    });
 });

package/use/index.js

@@ -5,4 +5,5 @@ export * from "./listSort.js";
 export * from "./listSubscription.js";
 export * from "./objectInstance.js";
 export * from "./objectSubscription.js";
+export * from "./paginatedListInstance.js";
 export * from "./search.js";

package/use/listInstance.js

@@ -1,6 +1,6 @@
-import { isEmpty, keyBy } from "lodash";
-import { effectScope, reactive, unref } from "vue";
-import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils/assignReactiveObject";
+import { isEmpty } from "lodash";
+import { computed, effectScope, reactive, unref } from "vue";
+import { assignReactiveObject } from "../utils/assignReactiveObject";
 import inspect from "browser-util-inspect";
 
 export class ListError extends Error {
@@ -48,6 +48,16 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
         assignReactiveObject(state.listInstanceCrud.args, crudArgs);
     }
 
+    const defaultPageCallback = (newObjects) => {
+        newObjects.forEach((newObject) => {
+            if (newObject.id in state.objects) {
+                updateListObject(newObject);
+            } else {
+                addListObject(newObject);
+            }
+        });
+    };
+
     async function list({ listArgs, retrieveArgs } = {}) {
         if (state.loading) {
             throw new ListError("already loading.");
@@ -66,9 +76,7 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
                 crudArgs: state.listInstanceCrud.args,
                 retrieveArgs,
                 listArgs,
-                pageCallback: (newObjects) => {
-                    addOrUpdateReactiveObject(state.objects, keyBy(newObjects, "id"));
-                },
+                pageCallback: returnedObject.pageCallback,
             })
             .then(() => {
                 return Promise.resolve(true);
@@ -119,6 +127,13 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
         delete state.objects[objectId];
     }
 
+    function clearList() {
+        state.addedOrder.splice(0);
+        for (const item in state.objects) {
+            delete state.objects[item];
+        }
+    }
+
     function getFakeId() {
         let fakeId;
         do {
@@ -129,16 +144,21 @@ export function useListInstance({ crudArgs, defaultListArgs = {}, defaultRetriev
 
     const es = effectScope();
 
-    // we could have effects? let's keep the interface to keep our options open to add without major changes.
-    es.run(() => {});
+    es.run(() => {
+        state.objectsInOrder = computed(() => state.addedOrder.map((id) => state.objects[id]));
+    });
 
-    return {
+    const returnedObject = {
         state,
         list,
         addListObject,
         updateListObject,
         deleteListObject,
+        clearList,
         effectScope: es,
         getFakeId,
+        defaultPageCallback,
+        pageCallback: defaultPageCallback,
     };
+    return returnedObject;
 }

package/use/paginatedListInstance.js

@@ -0,0 +1,19 @@
+import { useListInstance } from "./listInstance";
+
+export function usePagedListInstance({ crudArgs, defaultListArgs = {}, defaultRetrieveArgs = {} }) {
+    const listInstance = useListInstance({ crudArgs, defaultListArgs, defaultRetrieveArgs });
+
+    listInstance.state.count = 0;
+
+    listInstance.pageCallback = (newObjects, count) => {
+        // display one page at a time, clear the list
+        listInstance.clearList();
+
+        listInstance.defaultPageCallback(newObjects);
+        if (count !== undefined) {
+            listInstance.state.count = count;
+        }
+    };
+
+    return listInstance;
+}