@kaspernj/api-maker 1.0.208 → 1.0.2011

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.208",
+  "version": "1.0.2011",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/base-model.mjs

@@ -637,7 +637,7 @@ class BaseModel {
     try {
       return await CommandsPool.addCommand(args, commandArgs)
     } catch (error) {
-      if (formOrDataObject.nodeName == "FORM") {
+      if (formOrDataObject?.nodeName == "FORM") {
         BaseModel.parseValidationErrors({error, options: {form: formOrDataObject}})
       }
 

package/src/model-load-wrapper.jsx

@@ -1,91 +1,116 @@
 import EventUpdated from "./event-updated"
 import Params from "./params.mjs"
+import PropTypes from "prop-types"
 import React from "react"
+import withQueryParams from "on-location-changed/src/with-query-params"
 
-export default (WrappedComponent, ModelClass, args = {}) => class modelLoadWrapper extends React.PureComponent {
-  camelizedLower = ModelClass.modelName().camelizedLower()
-  paramsVariableName = `${ModelClass.modelName().paramKey()}_id`
+export default (WrappedComponent, ModelClass, args = {}) => {
+  class ModelLoadWrapper extends React.PureComponent {
+    static propTypes = {
+      queryParams: PropTypes.object
+    }
 
-  state = {
-    model: undefined,
-    modelId: this.props.match.params[this.paramsVariableName] || this.props.match.params.id,
-    notFound: undefined
-  }
+    camelizedLower = ModelClass.modelName().camelizedLower()
+    paramsVariableName = `${ModelClass.modelName().paramKey()}_id`
 
-  componentDidMount() {
-    this.loadModel()
-  }
+    state = {
+      model: undefined,
+      modelId: this.getModelId(),
+      notFound: undefined
+    }
 
-  loadModel = async () => {
-    if (args.newIfNoId && !this.getModelId()) {
-      return await this.loadNewModel()
-    } else if (!args.optional || this.getModelId()) {
-      return await this.loadExistingModel()
+    componentDidMount() {
+      this.loadModel()
     }
-  }
 
-  getModelId() {
-    return this.props.match.params[this.paramsVariableName] || this.props.match.params.id
-  }
+    componentDidUpdate() {
+      const newModelId = this.getModelId()
 
-  loadExistingModel = async () => {
-    const {modelId} = digs(this.state, "modelId")
-    const query = await ModelClass.ransack({id_eq: modelId})
+      // The model ID was changed in the URL and a different model should be loaded
+      if (newModelId != this.state.modelId) {
+        this.setState({model: undefined, modelId: newModelId})
+        this.loadExistingModel()
+      }
+    }
 
-    if (args.abilities) query.abilities(args.abilities)
-    if (args.preload) query.preload(args.preload)
-    if (args.select) query.select(args.select)
+    loadModel = async () => {
+      if (args.newIfNoId && !this.getModelId()) {
+        return await this.loadNewModel()
+      } else if (!args.optional || this.getModelId()) {
+        return await this.loadExistingModel()
+      }
+    }
 
-    const model = await query.first()
+    getModelId() {
+      if (args.loadByQueryParam)
+        return args.loadByQueryParam({props: this.props})
 
-    this.setState({
-      model,
-      notFound: !model
-    })
-  }
+      return this.props.match.params[this.paramsVariableName] || this.props.match.params.id
+    }
 
-  async loadNewModel() {
-    const params = Params.parse()
-    const paramKey = ModelClass.modelName().paramKey()
-    const modelDataFromParams = params[paramKey] || {}
+    loadExistingModel = async () => {
+      const modelId = this.getModelId()
+      const query = await ModelClass.ransack({id_eq: modelId})
 
-    let defaults = {}
+      if (args.abilities) query.abilities(args.abilities)
+      if (args.preload) query.preload(args.preload)
+      if (args.select) query.select(args.select)
 
-    if (args.newIfNoId?.defaults) {
-      defaults = await args.newIfNoId.defaults()
+      const model = await query.first()
+
+      this.setState({
+        model,
+        notFound: !model
+      })
     }
 
-    const modelData = Object.assign(defaults, args.newAttributes, modelDataFromParams)
-    const model = new ModelClass({
-      isNewRecord: true,
-      data: {a: modelData}
-    })
+    async loadNewModel() {
+      const params = Params.parse()
+      const paramKey = ModelClass.modelName().paramKey()
+      const modelDataFromParams = params[paramKey] || {}
 
-    this.setState({model})
-  }
+      let defaults = {}
+
+      if (args.newIfNoId?.defaults) {
+        defaults = await args.newIfNoId.defaults()
+      }
 
-  render() {
-    const {onUpdated, reloadModel} = digs(this, "onUpdated", "reloadModel")
-    const {model, modelId, notFound} = digs(this.state, "model", "modelId", "notFound")
-    const wrappedComponentProps = {}
-
-    wrappedComponentProps[this.camelizedLower] = model
-    wrappedComponentProps[`${this.camelizedLower}Id`] = modelId
-    wrappedComponentProps[`${this.camelizedLower}NotFound`] = notFound
-
-    return (
-      <>
-        {args.events &&
-          <EventEmitterListener event="reloadModel" events={args.events} onCalled={reloadModel} />
-        }
-        {model && args.eventUpdated &&
-          <EventUpdated model={model} onUpdated={onUpdated} />
-        }
-        <WrappedComponent {...wrappedComponentProps} {...this.props} />
-      </>
-    )
+      const modelData = Object.assign(defaults, args.newAttributes, modelDataFromParams)
+      const model = new ModelClass({
+        isNewRecord: true,
+        data: {a: modelData}
+      })
+
+      this.setState({model})
+    }
+
+    render() {
+      const {onUpdated, reloadModel} = digs(this, "onUpdated", "reloadModel")
+      const {model, modelId, notFound} = digs(this.state, "model", "modelId", "notFound")
+      const wrappedComponentProps = {}
+
+      wrappedComponentProps[this.camelizedLower] = model
+      wrappedComponentProps[`${this.camelizedLower}Id`] = modelId
+      wrappedComponentProps[`${this.camelizedLower}NotFound`] = notFound
+
+      return (
+        <>
+          {args.events &&
+            <EventEmitterListener event="reloadModel" events={args.events} onCalled={reloadModel} />
+          }
+          {model && args.eventUpdated &&
+            <EventUpdated model={model} onUpdated={onUpdated} />
+          }
+          <WrappedComponent {...wrappedComponentProps} {...this.props} />
+        </>
+      )
+    }
+
+    reloadModel = () => this.loadModel()
+    onUpdated = this.loadExistingModel
   }
 
-  reloadModel = () => this.loadModel()
-  onUpdated = this.loadExistingModel
+  if (args.loadByQueryParam) return withQueryParams(ModelLoadWrapper)
+
+  return ModelLoadWrapper
 }