incorporate hooks from @wq/react and @wq/app

Author: sheppard

packages/model/src/Root.js

@@ -0,0 +1,14 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+import { useModelInstance, useModel, useModelConfig } from "./hooks.js";
+
+export default withWQ(Fragment, {
+    name: "Root",
+    defaults: {
+        components: {
+            useModelInstance,
+            useModel,
+            useModelConfig,
+        },
+    },
+});

packages/model/src/hooks.js

@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+import * as ReduxORM from "redux-orm";
+import { useStore } from "@wq/store";
+
+const { createSelector } = ReduxORM;
+
+export function useModelInstance(name) {
+    const store = useStore(),
+        model = store.plugins.orm.models[name];
+
+    if (!model) {
+        throw new Error(`Unknown model name ${name}`);
+    }
+}
+
+// Extracted from @wq/react/src/hooks.js
+export function useModel(name, filter) {
+    const model = useModelInstance(name),
+        selector = useMemo(() => {
+            let selector;
+            if (
+                typeof filter === "function" ||
+                (typeof filter === "object" && !Array.isArray(filter))
+            ) {
+                // Filter by query
+                selector = createSelector(model.orm, (session) =>
+                    model.getQuerySet(session).filter(filter).toRefArray()
+                );
+            } else if (filter) {
+                // Filter by id (default ModelSelectorSpec behavior)
+                selector = (state) =>
+                    createSelector(model.orm[name])(state, filter);
+            } else {
+                // All objects (use getQuerySet() to leverage config.ordering)
+                selector = createSelector(model.orm, (session) =>
+                    model.getQuerySet(session).toRefArray()
+                );
+            }
+            return selector;
+        }, [model, filter]);
+
+    return useSelector(selector);
+}
+
+export function useModelConfig(name) {
+    const model = useModelInstance(name);
+    return model.config;
+}

packages/model/src/index.js

@@ -1,11 +1,13 @@
 import { Model, model as createModel, getRootFields } from "./model.js";
+import { Root } from "./Root.js";
+import { useModelInstance, useModel, useModelConfig } from "./hooks.js";
 
 const orm = {
     // Plugin attributes
     name: "orm",
     type: "orm",
-    init() {
-        for (const conf of Object.values(this.app.config.pages)) {
+    init(config) {
+        for (const conf of Object.values(config?.pages || [])) {
             if (!conf.list) {
                 continue;
             }
@@ -15,9 +17,6 @@ const orm = {
                 this._orm = model.orm;
             }
         }
-        this.app.models = this.models;
-        this.app.prefetchAll = (message) => this.prefetchAll(message);
-        this.app.resetAll = () => this.reset();
     },
     actions: {
         reset() {
@@ -34,20 +33,23 @@ const orm = {
 
     // Custom attributes
     models: {},
-    async prefetchAll(message) {
-        if (message) {
-            this.app.spin.start(message);
-        }
+    async prefetchAll() {
         const result = await Promise.all(
             Object.values(this.models).map((model) => model.prefetch())
         );
-        if (message) {
-            this.app.spin.stop(message);
-        }
         return result;
     },
 };
 
 export default orm;
 
-export { Model, createModel, createModel as model, getRootFields };
+export {
+    Model,
+    createModel,
+    createModel as model,
+    getRootFields,
+    Root,
+    useModelInstance,
+    useModel,
+    useModelConfig,
+};

packages/outbox/index.js

@@ -3,7 +3,7 @@
     "version": "2.1.0",
     "description": "A simple model API for working with stored lists",
     "type": "module",
-    "main": "index.js",
+    "main": "src/index.js",
     "scripts": {
         "test": "cd ../../ && npm run jest packages/outbox",
         "prettier": "cd ../../ && npm run prettier -- --write packages/outbox/",

packages/outbox/package.json

@@ -0,0 +1,15 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+import { useSubmitForm, useOutbox, useUnsynced, useList } from "./hooks.js";
+
+export default withWQ(Fragment, {
+    name: "Root",
+    defaults: {
+        components: {
+            useSubmitForm,
+            useOutbox,
+            useUnsynced,
+            useList,
+        },
+    },
+});