@kaspernj/api-maker 1.0.399 → 1.0.401

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.399",
+  "version": "1.0.401",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/router/route.jsx

@@ -20,13 +20,14 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
   }
 
   static propTypes = propTypesExact({
+    children: PropTypes.node,
     component: PropTypes.string,
     componentPath: PropTypes.string,
     exact: PropTypes.bool.isRequired,
     fallback: PropTypes.bool.isRequired,
     includeInPath: PropTypes.bool.isRequired,
     onMatch: PropTypes.func,
-    path: PropTypes.string
+    path: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
   })
 
   match = null
@@ -39,17 +40,14 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     const givenRoute = useContext(RouteContext)
     const {pathShown} = switchGroup.s
 
+    this.debug = false
+    this.log(() => ({givenRoute}))
+
     this.requireComponent = useContext(RequireComponentContext)
     this.currentParams = useContext(ParamsContext)
     this.currentPath = useContext(CurrentPathContext)
     this.switchGroup = switchGroup
-
-    this.routeParts = useMemo(() => {
-      let routeParts = givenRoute?.split("/")
-
-      return routeParts
-    }, [path, givenRoute])
-
+    this.routeParts = useMemo(() => givenRoute?.split("/"), [path, givenRoute])
     this.pathParts = useMemo(() => path?.split("/"), [path])
 
     this.newRouteParts = useMemo(
@@ -79,7 +77,9 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
           this.props.onMatch()
         }
 
-        this.loadComponent()
+        if ((!this.props.children && this.props.path) || this.props.component || this.props.componentPath) {
+          this.loadComponent()
+        }
       }
     }, [path, pathShown, this.s.matches])
   }
@@ -111,11 +111,14 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     const params = {}
     const componentPathParts = [...this.currentPath]
 
+    this.log(() => [this.props.path, "Start generating component paths", JSON.stringify(componentPathParts)])
+
     for (const pathPartIndex in this.pathParts) {
       const pathPart = this.pathParts[pathPartIndex]
       const translatedPathPart = I18n.t(`routes.${pathPart}`, {defaultValue: pathPart})
 
       if (!(pathPartIndex in this.routeParts)) {
+        this.log(() => `No match for: ${pathPartIndex}`)
         matches = false
         break
       }
@@ -135,6 +138,7 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     }
 
     if (exact && newRouteParts.length > 0) {
+      this.log(() => ["Exact and more route parts", {newRouteParts, pathParts: this.pathParts, routeParts: this.routeParts}])
       matches = false
     } else if (matches && path) {
       matches = true
@@ -148,6 +152,8 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
       matches = true
     }
 
+    this.log(() => [this.props.path, "End generating component paths", JSON.stringify(componentPathParts), {matches}])
+
     if (matches) {
       if (component && includeInPath) {
         componentPathParts.push(component)
@@ -169,6 +175,8 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     const actualComponentPath = this.props.componentPath || this.tt.componentPathParts.join("/")
     let Component
 
+    this.log(() => ["loadComponent", {componentPath: this.props.componentPath, componentPathParts: this.componentPathParts, actualComponentPath}])
+
     try {
       const componentImport = await this.tt.requireComponent({routeDefinition: {component: actualComponentPath}})
 
@@ -182,9 +190,19 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
     this.setState({Component, componentNotFound: !Component})
   }
 
+  log(callbackArgs) {
+    if (this.debug) {
+      let args = callbackArgs()
+
+      if (!Array.isArray(args)) args = [args]
+
+      console.log(...args)
+    }
+  }
+
   render() {
     const {componentPathParts, match, newParams, newRouteParts} = this.tt
-    const {component, path} = this.props
+    const {children, component, path} = this.props
     const {Component, componentNotFound, matches} = this.s
 
     if (!matches || !this.hasSwitchMatch()) {
@@ -192,7 +210,7 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
       return null
     }
 
-    if (!Component && !componentNotFound) {
+    if (!Component && !children && !componentNotFound) {
       // Route is matching but hasn't been loaded yet.
       return (
         <div>
@@ -201,7 +219,7 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
       )
     }
 
-    if (!Component && componentNotFound) {
+    if (!Component && !children && componentNotFound) {
       // Don't render anything if the component couldn't be found.
       return null
     }
@@ -211,7 +229,8 @@ const Route = memo(shapeComponent(class Route extends BaseComponent {
         <RouteContext.Provider value={newRouteParts.join("/")}>
           <ParamsContext.Provider value={newParams}>
             <Switch name={`route-group-${path}`} single={false}>
-              <Component match={match} />
+              {Component && <Component match={match} />}
+              {children}
             </Switch>
           </ParamsContext.Provider>
         </RouteContext.Provider>

package/src/table/filters/filter.jsx

@@ -1,11 +1,16 @@
+import {Pressable, Text, View} from "react-native"
 import BaseComponent from "../../base-component"
-import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class ApiMakerTableFilter extends BaseComponent {
+  static defaultProps = {
+    a: null,
+    pre: null
+  }
+
   static propTypes = PropTypesExact({
     a: PropTypes.string,
     filterIndex: PropTypes.number.isRequired,
@@ -22,23 +27,25 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
     const {a, pre, sc} = this.props
 
     return (
-      <div style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
-        <span className="filter-label" onClick={digg(this, "onFilterClicked")} style={{cursor: "pointer"}}>
-          {p.length > 0 &&
-            `${p.join(".")}.`
-          }
-          {a} {sc} {pre} {v}
-        </span>
-        <span>
-          <a className="remove-filter-button" href="#" onClick={digg(this, "onRemoveFilterClicked")}>
-            <i className="fa fa-remove la la-remove" />
-          </a>
-        </span>
-      </div>
+      <View style={{display: "flex", flexDirection: "row", backgroundColor: "grey", paddingVertical: 10, paddingHorizontal: 6}}>
+        <Pressable dataSet={{class: "filter-label"}} onPress={this.tt.onFilterPressed}>
+          <Text>
+            {p.length > 0 &&
+              `${p.join(".")}.`
+            }
+            {a} {sc} {pre} {v}
+          </Text>
+        </Pressable>
+        <Pressable dataSet={{class: "remove-filter-button"}} onPress={this.tt.onRemoveFilterPressed} style={{marginLeft: 6}}>
+          <Text>
+            &#10006;
+          </Text>
+        </Pressable>
+      </View>
     )
   }
 
-  onFilterClicked = (e) => {
+  onFilterPressed = (e) => {
     e.preventDefault()
 
     const {a, filterIndex, p, pre, v} = this.p
@@ -46,11 +53,9 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
     this.props.onClick({a, filterIndex, p, pre, v})
   }
 
-  onRemoveFilterClicked = (e) => {
+  onRemoveFilterPressed = (e) => {
     e.preventDefault()
 
-    const {filterIndex} = this.p
-
-    this.props.onRemoveClicked({filterIndex})
+    this.props.onRemoveClicked({filterIndex: this.p.filterIndex})
   }
 }))

package/src/use-model.mjs

@@ -42,12 +42,6 @@ const useModel = (modelClassArg, argsArg = {}) => {
   const modelVariableName = inflection.camelize(modelClass.modelClassData().name, true)
   const cacheArgs = [modelId]
 
-  if (args.cacheArgs) {
-    cacheArgs.push(...args.cacheArgs)
-  }
-
-  s.updateMeta({args, modelId, modelVariableName, queryParams})
-
   const loadExistingModel = useCallback(async () => {
     let query
 
@@ -89,13 +83,37 @@ const useModel = (modelClassArg, argsArg = {}) => {
   }, [])
 
   const loadModel = useCallback(async () => {
-    if (s.props.newIfNoId && !s.m.modelId) {
+    if ("active" in s.props && !s.props.active) {
+      // Not active - don't do anything
+    } else if (s.props.newIfNoId && !s.m.modelId) {
       return await loadNewModel()
     } else if (!s.props.optional || s.m.modelId | s.m.args.query) {
       return await loadExistingModel()
     }
   }, [])
 
+  const onDestroyed = useCallback(({model}) => {
+    const forwardArgs = {model}
+
+    forwardArgs[s.m.modelVariableName] = model
+
+    s.p.onDestroyed(forwardArgs)
+  }, [])
+
+  const onSignedIn = useCallback(() => {
+    loadModel()
+  }, [])
+
+  const onSignedOut = useCallback(() => {
+    loadModel()
+  }, [])
+
+  if (args.cacheArgs) {
+    cacheArgs.push(...args.cacheArgs)
+  }
+
+  s.updateMeta({args, modelId, modelVariableName, queryParams})
+
   useMemo(
     () => { loadModel() },
     cacheArgs
@@ -127,14 +145,6 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   }, [args.eventUpdated, s.s.model?.id()])
 
-  const onSignedIn = useCallback(() => {
-    loadModel()
-  }, [])
-
-  const onSignedOut = useCallback(() => {
-    loadModel()
-  }, [])
-
   useLayoutEffect(() => {
     Devise.events().addListener("onDeviseSignIn", onSignedIn)
     Devise.events().addListener("onDeviseSignOut", onSignedOut)
@@ -145,14 +155,6 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   })
 
-  const onDestroyed = useCallback(({model}) => {
-    const forwardArgs = {model}
-
-    forwardArgs[s.m.modelVariableName] = model
-
-    s.p.onDestroyed(forwardArgs)
-  }, [])
-
   useLayoutEffect(() => {
     let connectDestroyed