@kaspernj/api-maker 1.0.326 → 1.0.327

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.326",
+  "version": "1.0.327",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -49,7 +49,7 @@
     "js-money": ">= 0.6.3",
     "numberable": ">= 1.0.0",
     "object-to-formdata": ">= 4.1.0",
-    "on-location-changed": ">= 1.0.8",
+    "on-location-changed": ">= 1.0.9",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
     "set-state-compare": ">= 1.0.28",

package/src/collection-loader.jsx

@@ -1,11 +1,14 @@
+import Collection from "./collection.mjs"
 import {digg} from "diggerize"
 import {memo, useEffect} from "react"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
 import useCollection from "./use-collection"
 import useShape from "set-state-compare/src/use-shape.js"
 
-const CollectionLoader = (props) => {
-  const s = useShape(props)
-  const useCollectionResult = useCollection(props)
+const CollectionLoader = ({component, ...restProps}) => {
+  const s = useShape(restProps)
+  const useCollectionResult = useCollection(restProps)
   const cachePartsKeys = [
     "modelIdsCacheString",
     "overallCount",
@@ -25,10 +28,10 @@ const CollectionLoader = (props) => {
     cacheParts.push(digg(useCollectionResult, cachePartsKey))
   }
 
-  s.updateMeta({useCollectionResult})
+  s.updateMeta({component, useCollectionResult})
 
   useEffect(() => {
-    const componentShape = digg(s.p.component, "shape")
+    const componentShape = digg(s.m.component, "shape")
 
     componentShape.set(s.m.useCollectionResult)
   }, cacheParts)
@@ -36,4 +39,23 @@ const CollectionLoader = (props) => {
   return null
 }
 
+CollectionLoader.propTypes = PropTypesExact({
+  abilities: PropTypes.object,
+  collection: PropTypes.instanceOf(Collection),
+  component: PropTypes.object.isRequired,
+  defaultParams: PropTypes.object,
+  groupBy: PropTypes.array,
+  modelClass: PropTypes.func.isRequired,
+  noRecordsAvailableContent: PropTypes.func,
+  noRecordsFoundContent: PropTypes.func,
+  onModelsLoaded: PropTypes.func,
+  pagination: PropTypes.bool.isRequired,
+  preloads: PropTypes.array.isRequired,
+  queryMethod: PropTypes.func,
+  queryName: PropTypes.string,
+  ransack: PropTypes.object,
+  select: PropTypes.object,
+  selectColumns: PropTypes.object
+})
+
 export default memo(CollectionLoader)

package/src/event-updated.jsx

@@ -1,72 +1,23 @@
-import debounce from "debounce"
-import ModelEvents from "./model-events.mjs"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import React from "react"
+import {memo} from "react"
+import useUpdatedEvent from "./use-updated-event.mjs"
 
-export default class ApiMakerEventUpdated extends React.PureComponent {
-  static defaultProps = {
-    active: true
-  }
+const ApiMakerEventUpdated = ({model, onUpdated, ...restProps}) => {
+  useUpdatedEvent(model, onUpdated, restProps)
 
-  static propTypes = propTypesExact({
-    active: PropTypes.bool.isRequired,
-    debounce: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.number
-    ]),
-    model: PropTypes.object.isRequired,
-    onConnected: PropTypes.func,
-    onUpdated: PropTypes.func.isRequired
-  })
-
-  componentDidMount () {
-    this.connect()
-  }
-
-  componentWillUnmount () {
-    if (this.connectUpdated) {
-      this.connectUpdated.unsubscribe()
-    }
-
-    if (this.onConnectedListener) {
-      this.connectUpdated.events.removeListener("connected", this.props.onConnected)
-    }
-  }
-
-  connect () {
-    const {model, onConnected} = this.props
-
-    this.connectUpdated = ModelEvents.connectUpdated(model, this.onUpdated)
-
-    if (onConnected) {
-      this.onConnectedListener = this.connectUpdated.events.addListener("connected", this.props.onConnected)
-    }
-  }
-
-  debounce () {
-    if (!this.debounceInstance) {
-      if (typeof this.props.debounce == "number") {
-        this.debounceInstance = debounce(this.props.onUpdated, this.props.debounce)
-      } else {
-        this.debounceInstance = debounce(this.props.onUpdated)
-      }
-    }
-
-    return this.debounceInstance
-  }
-
-  onUpdated = (...args) => {
-    if (!this.props.active) {
-      return
-    }
-
-    if (this.props.debounce) {
-      this.debounce()(...args)
-    } else {
-      this.props.onUpdated(...args)
-    }
-  }
-
-  render = () => null
+  return null
 }
+
+ApiMakerEventUpdated.propTypes = propTypesExact({
+  active: PropTypes.bool,
+  debounce: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number
+  ]),
+  model: PropTypes.object.isRequired,
+  onConnected: PropTypes.func,
+  onUpdated: PropTypes.func.isRequired
+})
+
+export default memo(ApiMakerEventUpdated)

package/src/use-collection.mjs

@@ -1,10 +1,7 @@
-import Collection from "./collection.mjs"
 import debounce from "debounce"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
 import ModelEvents from "./model-events.mjs"
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
 import {useCallback, useEffect} from "react"
 import useShape from "set-state-compare/src/use-shape.js"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
@@ -15,6 +12,7 @@ const useCollection = (
     collection,
     defaultParams,
     groupBy = ["id"],
+    limit,
     modelClass,
     noRecordsAvailableContent = undefined,
     noRecordsFoundContent = undefined,
@@ -23,16 +21,23 @@ const useCollection = (
     preloads = [],
     queryMethod,
     queryName,
+    ransack,
     select = {},
-    selectColumns
+    selectColumns,
+    ...restProps
   },
   cacheKeys = []
 ) => {
+  if (Object.keys(restProps).length > 0) {
+    throw new Error(`Unknown props given to useCollection: ${Object.keys(restProps).join(", ")}`)
+  }
+
   const s = useShape({
     abilities,
     collection,
     defaultParams,
     groupBy,
+    limit,
     modelClass,
     noRecordsAvailableContent,
     noRecordsFoundContent,
@@ -40,12 +45,27 @@ const useCollection = (
     pagination,
     preloads,
     queryMethod,
+    ransack,
     select,
     selectColumns
   })
 
+  s.meta.queryParams = useQueryParams()
+
   if (!queryName) queryName = digg(modelClass.modelClassData(), "collectionKey")
 
+  const hasQParams = useCallback(() => {
+    if (s.s.queryQName in s.m.queryParams) return true
+
+    return false
+  }, [])
+
+  const qParams = useCallback(() => {
+    if (hasQParams()) return JSON.parse(digg(s.m.queryParams, s.s.queryQName))
+
+    return {}
+  }, [])
+
   s.useStates({
     models: undefined,
     overallCount: undefined,
@@ -55,14 +75,14 @@ const useCollection = (
     queryQName: `${queryName}_q`,
     querySName: `${queryName}_s`,
     queryPageName: `${queryName}_page`,
-    qParams: undefined,
     result: undefined,
     searchParams: undefined,
     showNoRecordsAvailableContent: false,
     showNoRecordsFoundContent: false
   })
-
-  const queryParams = useQueryParams()
+  s.useStates({
+    qParams: qParams()
+  })
 
   let modelIdsCacheString
 
@@ -74,8 +94,6 @@ const useCollection = (
     modelIdsCacheString = s.s.models.map((model) => model.cacheKey())?.join("---")
   }
 
-  s.updateMeta({queryParams})
-
   const loadOverallCount = useCallback(async () => {
     const baseQuery = s.p.collection || s.p.modelClass.all()
     const overallCount = await baseQuery.count()
@@ -87,18 +105,6 @@ const useCollection = (
     })
   }, [])
 
-  const hasQParams = useCallback(() => {
-    if (s.s.queryQName in s.m.queryParams) return true
-
-    return false
-  }, [])
-
-  const qParams = useCallback(() => {
-    if (hasQParams()) return JSON.parse(digg(s.m.queryParams, s.s.queryQName))
-
-    return {}
-  }, [])
-
   const loadQParams = useCallback(() => {
     const qParamsToSet = hasQParams() ? qParams() : Object.assign({}, s.p.defaultParams)
     const searchParams = []
@@ -137,6 +143,7 @@ const useCollection = (
 
     query = query
       .ransack(s.s.qParams)
+      .ransack(s.props.ransack)
       .search(s.s.searchParams)
       .searchKey(s.s.queryQName)
       .pageKey(s.s.queryPageName)
@@ -145,6 +152,7 @@ const useCollection = (
       .select(s.p.select)
 
     if (s.p.abilities) query = query.abilities(s.p.abilities)
+    if (s.p.limit !== undefined) query = query.limit(s.p.limit)
     if (s.p.selectColumns) query = query.selectColumns(s.p.selectColumns)
 
     let result
@@ -235,7 +243,13 @@ const useCollection = (
       loadQParams()
       loadModels()
     },
-    [queryParams[s.s.queryQName], queryParams[s.s.queryPageName], queryParams[s.s.queryPerKey], queryParams[s.s.querySName], collection].concat(cacheKeys)
+    [
+      s.m.queryParams[s.s.queryQName],
+      s.m.queryParams[s.s.queryPageName],
+      s.m.queryParams[s.s.queryPerKey],
+      s.m.queryParams[s.s.querySName],
+      collection
+    ].concat(cacheKeys)
   )
 
   useEffect(() => {
@@ -276,21 +290,4 @@ const useCollection = (
   return result
 }
 
-useCollection.propTypes = PropTypesExact({
-  abilities: PropTypes.object,
-  collection: PropTypes.instanceOf(Collection),
-  defaultParams: PropTypes.object,
-  groupBy: PropTypes.array,
-  modelClass: PropTypes.func.isRequired,
-  noRecordsAvailableContent: PropTypes.func,
-  noRecordsFoundContent: PropTypes.func,
-  onModelsLoaded: PropTypes.func,
-  pagination: PropTypes.bool.isRequired,
-  preloads: PropTypes.array.isRequired,
-  queryMethod: PropTypes.func,
-  queryName: PropTypes.string,
-  select: PropTypes.object,
-  selectColumns: PropTypes.object
-})
-
 export default useCollection

package/src/use-created-event.mjs

@@ -2,7 +2,7 @@ import debounceFunction from "debounce"
 import ModelEvents from "./model-events.mjs"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {useCallback, useEffect, memo} from "react"
+import {useCallback, useEffect} from "react"
 import useShape from "set-state-compare/src/use-shape.js"
 
 const ApiMakerUseCreatedEvent = (modelClass, onCreated, args = {}) => {

package/src/use-updated-event.mjs

@@ -0,0 +1,58 @@
+import {useCallback, useEffect, useMemo} from "react"
+import debounceFunction from "debounce"
+import ModelEvents from "./model-events.mjs"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const ApiMakerUseUpdatedEvent = (model, onUpdated, {active = true, debounce, onConnected, ...restProps}) => {
+  if (Object.keys(restProps).length > 0) {
+    throw new Error(`Unknown props given to useUpdatedEvent: ${Object.keys(restProps).join(", ")}`)
+  }
+
+  const s = useShape({active, debounce, model, onUpdated})
+
+  const debounceCallback = useMemo(() => {
+    if (typeof debounce == "number") {
+      return debounceFunction(s.p.onUpdated, debounce)
+    } else {
+      return debounceFunction(s.p.onUpdated)
+    }
+  }, [debounce])
+
+  s.updateMeta({debounceCallback})
+
+  const onUpdatedCallback = useCallback((...args) => {
+    if (!s.p.active) {
+      return
+    }
+
+    if (s.p.debounce) {
+      s.m.debounceCallback(...args)
+    } else {
+      s.p.onUpdated(...args)
+    }
+  }, [])
+
+  useEffect(() => {
+    let connectUpdated, onConnectedListener
+
+    if (model) {
+      connectUpdated = ModelEvents.connectUpdated(model, onUpdatedCallback)
+
+      if (onConnected) {
+        onConnectedListener = connectUpdated.events.addListener("connected", onConnected)
+      }
+    }
+
+    return () => {
+      if (onConnectedListener) {
+        connectUpdated.events.removeListener("connected", onConnected)
+      }
+
+      if (connectUpdated) {
+        connectUpdated.unsubscribe()
+      }
+    }
+  }, [model?.id()])
+}
+
+export default ApiMakerUseUpdatedEvent