@kaspernj/api-maker 1.0.313 → 1.0.315

package/package.json

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

package/src/use-can-can.mjs

@@ -3,7 +3,7 @@ import {useCallback, useEffect, useState} from "react"
 import useShape from "set-state-compare/src/use-shape.js"
 
 const useCanCan = (abilitiesCallback, dependencies) => {
-  const shape = useShape({abilitiesCallback})
+  const s = useShape({abilitiesCallback})
   const [canCan, setCanCan] = useState()
 
   useEffect(() => {
@@ -12,7 +12,7 @@ const useCanCan = (abilitiesCallback, dependencies) => {
 
   const loadAbilities = useCallback(async () => {
     const canCan = CanCan.current()
-    const abilities = shape.props.abilitiesCallback()
+    const abilities = s.p.abilitiesCallback()
 
     await canCan.loadAbilities(abilities)
 

package/src/use-model.mjs

@@ -1,7 +1,8 @@
+import {useCallback, useEffect, useState} from "react"
 import * as inflection from "inflection"
 import ModelEvents from "./model-events.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
-import {useEffect, useState} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
 
 const useModel = (modelClassArg, argsArg = {}) => {
   const queryParams = useQueryParams()
@@ -13,6 +14,8 @@ const useModel = (modelClassArg, argsArg = {}) => {
     args = argsArg
   }
 
+  const s = useShape(args)
+
   if (typeof modelClassArg == "object") {
     modelClass = modelClassArg.callback({queryParams})
   } else {
@@ -20,18 +23,16 @@ const useModel = (modelClassArg, argsArg = {}) => {
   }
 
   const paramsVariableName = `${modelClass.modelName().paramKey()}_id`
+  let modelId
 
-  const getModelId = () => {
-    if (args.loadByQueryParam) {
-      return args.loadByQueryParam({queryParams})
-    }
-
+  if (args.loadByQueryParam) {
+    modelId = args.loadByQueryParam({queryParams})
+  } else {
     if (!args.match) throw new Error("Both 'loadByQueryParam' and 'match' wasn't given")
 
-    return args.match.params[paramsVariableName] || args.match.params.id
+    modelId = args.match.params[paramsVariableName] || args.match.params.id
   }
 
-  const modelId = getModelId()
   const modelVariableName = inflection.camelize(modelClass.modelClassData().name, true)
   const cacheArgs = [modelId]
   const [model, setModel] = useState(undefined)
@@ -41,48 +42,52 @@ const useModel = (modelClassArg, argsArg = {}) => {
     cacheArgs.push(...args.cacheArgs)
   }
 
-  const loadExistingModel = async () => {
-    const query = await modelClass.ransack({id_eq: modelId})
+  s.updateMeta({modelId, modelVariableName, queryParams})
+
+  const loadExistingModel = useCallback(async () => {
+    const query = await modelClass.ransack({id_eq: s.m.modelId})
+
+    if (!modelId) {
+      throw new Error(`No model ID was given: ${s.m.modelId} by '${paramsVariableName}' in query params: ${Object.keys(s.props.match.params).join(", ")}`)
+    }
 
-    if (!modelId) throw new Error(`No model ID was given: ${modelId} by '${paramsVariableName}' in query params: ${Object.keys(match.params).join(", ")}`)
-    if (args.abilities) query.abilities(args.abilities)
-    if (args.preload) query.preload(args.preload)
-    if (args.select) query.select(args.select)
+    if (s.props.abilities) query.abilities(s.p.abilities)
+    if (s.props.preload) query.preload(s.p.preload)
+    if (s.props.select) query.select(s.p.select)
 
     const model = await query.first()
 
     setModel(model)
     setNotFound(!model)
-  }
+  }, [])
 
-  const loadNewModel = async () => {
-    const params = Params.parse()
+  const loadNewModel = useCallback(async () => {
     const ModelClass = modelClass
     const paramKey = ModelClass.modelName().paramKey()
-    const modelDataFromParams = params[paramKey] || {}
+    const modelDataFromParams = s.m.queryParams[paramKey] || {}
 
     let defaults = {}
 
-    if (args.newIfNoId?.defaults) {
-      defaults = await args.newIfNoId.defaults()
+    if (s.props.newIfNoId?.defaults) {
+      defaults = await s.props.newIfNoId.defaults()
     }
 
-    const modelData = Object.assign(defaults, args.newAttributes, modelDataFromParams)
+    const modelData = Object.assign(defaults, s.props.newAttributes, modelDataFromParams)
     const model = new ModelClass({
       isNewRecord: true,
       data: {a: modelData}
     })
 
     setModel(model)
-  }
+  }, [])
 
-  const loadModel = async () => {
-    if (args.newIfNoId && !modelId) {
+  const loadModel = useCallback(async () => {
+    if (s.props.newIfNoId && !s.m.modelId) {
       return await loadNewModel()
-    } else if (!args.optional || modelId) {
+    } else if (!s.props.optional || s.m.modelId) {
       return await loadExistingModel()
     }
-  }
+  }, [])
 
   useEffect(
     () => { loadModel() },
@@ -115,11 +120,19 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   }, [args.eventUpdated, model?.id()])
 
+  const onDestroyed = useCallback(({model}) => {
+    const forwardArgs = {model}
+
+    forwardArgs[s.m.modelVariableName] = model
+
+    s.p.onDestroyed(forwardArgs)
+  }, [])
+
   useEffect(() => {
     let connectDestroyed
 
     if (model && args.onDestroyed) {
-      connectDestroyed = ModelEvents.connectDestroyed(model, loadModel)
+      connectDestroyed = ModelEvents.connectDestroyed(model, onDestroyed)
     }
 
     return () => {

package/src/with-model.jsx

@@ -1,144 +1,15 @@
-import {digg, digs} from "diggerize"
-import EventUpdated from "./event-updated"
-import * as inflection from "inflection"
-import Params from "./params.mjs"
-import PropTypes from "prop-types"
-import React from "react"
-import withQueryParams from "on-location-changed/src/with-query-params"
+import {memo} from "react"
+import useModel from "./use-model.mjs"
 
-export default (WrappedComponent, modelClassArg, argsArg = {}) => {
-  class ApiMakerWithModel extends React.PureComponent {
-    static propTypes = {
-      queryParams: PropTypes.object
-    }
+export default (WrappedComponent, modelClass, givenArgs) => {
+  const ApiMakerWithModel = (props) => {
+    const args = Object.assign({match: props.match}, givenArgs)
+    const useModelResult = useModel(modelClass, args)
 
-    modelClass = this.resolveModelClass(modelClassArg)
-    args = this.resolveArgs()
-    modelVariableName = inflection.camelize(this.modelClass.modelClassData().name, true)
-    paramsVariableName = `${this.modelClass.modelName().paramKey()}_id`
-
-    state = {
-      model: undefined,
-      modelId: this.getModelId(),
-      notFound: undefined
-    }
-
-    resolveArgs() {
-      if (typeof argsArg == "function") {
-        return argsArg({
-          modelClass: this.modelClass
-        })
-      }
-
-      return argsArg
-    }
-
-    resolveModelClass(modelClassArg) {
-      if (typeof modelClassArg == "object") {
-        const {queryParams} = digs(this.props, "queryParams")
-
-        return modelClassArg.callback({queryParams})
-      }
-
-      return modelClassArg
-    }
-
-    componentDidMount() {
-      this.loadModel()
-    }
-
-    componentDidUpdate() {
-      const newModelId = this.getModelId()
-
-      // 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()
-      }
-    }
-
-    loadModel = async () => {
-      if (this.args.newIfNoId && !this.getModelId()) {
-        return await this.loadNewModel()
-      } else if (!this.args.optional || this.getModelId()) {
-        return await this.loadExistingModel()
-      }
-    }
-
-    getModelId() {
-      if (this.args.loadByQueryParam)
-        return this.args.loadByQueryParam({props: this.props})
-
-      return this.props.match.params[this.paramsVariableName] || this.props.match.params.id
-    }
-
-    loadExistingModel = async () => {
-      const modelId = this.getModelId()
-      const ModelClass = digg(this, "modelClass")
-      const query = await ModelClass.ransack({id_eq: modelId})
-
-      if (!modelId) throw new Error(`No model ID was given: ${modelId} by '${this.paramsVariableName}' in query params: ${Object.keys(this.props.match.params).join(", ")}`)
-      if (this.args.abilities) query.abilities(this.args.abilities)
-      if (this.args.preload) query.preload(this.args.preload)
-      if (this.args.select) query.select(this.args.select)
-
-      const model = await query.first()
-
-      this.setState({
-        model,
-        notFound: !model
-      })
-    }
-
-    async loadNewModel() {
-      const params = Params.parse()
-      const ModelClass = digg(this, "modelClass")
-      const paramKey = ModelClass.modelName().paramKey()
-      const modelDataFromParams = params[paramKey] || {}
-
-      let defaults = {}
-
-      if (this.args.newIfNoId?.defaults) {
-        defaults = await this.args.newIfNoId.defaults()
-      }
-
-      const modelData = Object.assign(defaults, this.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.modelVariableName] = model
-      wrappedComponentProps[`${this.modelVariableName}Id`] = modelId
-      wrappedComponentProps[`${this.modelVariableName}NotFound`] = notFound
-
-      return (
-        <>
-          {this.args.events &&
-            <EventEmitterListener event="reloadModel" events={this.args.events} onCalled={reloadModel} />
-          }
-          {model && this.args.eventUpdated &&
-            <EventUpdated model={model} onUpdated={onUpdated} />
-          }
-          {model && this.args.onDestroyed &&
-            <EventDestroyed model={model} onDestroyed={this.args.onDestroyed} />
-          }
-          <WrappedComponent {...wrappedComponentProps} {...this.props} />
-        </>
-      )
-    }
-
-    reloadModel = () => this.loadModel()
-    onUpdated = this.loadExistingModel
+    return (
+      <WrappedComponent {...useModelResult} {...props} />
+    )
   }
 
-  return withQueryParams(ApiMakerWithModel)
+  return memo(ApiMakerWithModel)
 }