@kaspernj/api-maker 1.0.324 → 1.0.326

package/package.json

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

package/src/event-created.jsx

@@ -1,65 +1,11 @@
-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 useCreatedEvent from "./use-created-event.mjs"
 
-export default class ApiMakerEventCreated extends React.PureComponent {
-  static defaultProps = {
-    active: true
-  }
+const ApiMakerEventCreated = (props) => {
+  const {modelClass, onCreated, ...restProps} = props
 
-  static propTypes = propTypesExact({
-    active: PropTypes.bool.isRequired,
-    debounce: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.number
-    ]),
-    modelClass: PropTypes.func.isRequired,
-    onCreated: PropTypes.func.isRequired
-  })
+  useCreatedEvent(modelClass, onCreated, restProps)
 
-  componentDidMount () {
-    this.connect()
-  }
-
-  componentWillUnmount () {
-    if (this.connectCreated) {
-      this.connectCreated.unsubscribe()
-    }
-  }
-
-  connect () {
-    this.connectCreated = ModelEvents.connectCreated(this.props.modelClass, (...args) => this.onCreated(...args))
-  }
-
-  debounce () {
-    if (!this.debounceInstance) {
-      const {onCreated} = digs(this.props, "onCreated")
-
-      if (typeof this.props.debounce == "number") {
-        this.debounceInstance = debounce(onCreated, this.props.debounce)
-      } else {
-        this.debounceInstance = debounce(onCreated)
-      }
-    }
-
-    return this.debounceInstance
-  }
-
-  onCreated (...args) {
-    if (!this.props.active) {
-      return
-    }
-
-    if (this.props.debounce) {
-      this.debounce()(...args)
-    } else {
-      this.props.onCreated(...args)
-    }
-  }
-
-  render () {
-    return null
-  }
+  return null
 }
+
+export default ApiMakerEventCreated

package/src/event-emitter-listener.jsx

@@ -1,25 +1,10 @@
-import EventEmitter from "events"
-import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
+import useEventEmitter from "./use-event-emitter.mjs"
 
-export default class ApiMakerEventEmitterListener extends React.PureComponent {
-  static propTypes = {
-    event: PropTypes.string.isRequired,
-    events: PropTypes.instanceOf(EventEmitter).isRequired,
-    onCalled: PropTypes.func.isRequired
-  }
+const ApiMakerEventEmitterListener = ({events, event, onCalled}) => {
+  useEventEmitter(events, event, onCalled)
 
-  componentDidMount () {
-    this.props.events.addListener(this.props.event, this.onCalled)
-  }
-
-  componentWillUnmount () {
-    this.props.events.removeListener(this.props.event, this.onCalled)
-  }
-
-  onCalled = (...args) => {
-    this.props.onCalled.apply(null, ...args)
-  }
-
-  render = () => null
+  return null
 }
+
+export default memo(ApiMakerEventEmitterListener)

package/src/use-collection.mjs

@@ -46,21 +46,23 @@ const useCollection = (
 
   if (!queryName) queryName = digg(modelClass.modelClassData(), "collectionKey")
 
-  const setModels = s.useState("models")
-  const setOverallCount = s.useState("overallCount")
-  const setQuery = s.useState("query")
-  const setQueryName = s.useState("queryName", queryName)
-  const setQueryPerKey = s.useState("queryPerKey", `${s.s.queryName}_per`)
-  const setQueryQName = s.useState("queryQName", `${s.s.queryName}_q`)
-  const setQuerySName = s.useState("querySName", `${s.s.queryName}_s`)
-  const setQueryPageName = s.useState("queryPageName", `${s.s.queryName}_page`)
-  const setQParams = s.useState("qParams")
-  const setResult = s.useState("result")
-  const setSearchParams = s.useState("searchParams")
-  const setShowNoRecordsAvailableContent = s.useState("showNoRecordsAvailableContent", false)
-  const setShowNoRecordsFoundContent = s.useState("showNoRecordsFoundContent", false)
+  s.useStates({
+    models: undefined,
+    overallCount: undefined,
+    query: undefined,
+    queryName,
+    queryPerKey: `${queryName}_per`,
+    queryQName: `${queryName}_q`,
+    querySName: `${queryName}_s`,
+    queryPageName: `${queryName}_page`,
+    qParams: undefined,
+    result: undefined,
+    searchParams: undefined,
+    showNoRecordsAvailableContent: false,
+    showNoRecordsFoundContent: false
+  })
+
   const queryParams = useQueryParams()
-  const modelIds = s.s.models?.map((model) => model.id())
 
   let modelIdsCacheString
 
@@ -69,7 +71,7 @@ const useCollection = (
   } else if (s.s.models.length === 0) {
     modelIdsCacheString = "no-models"
   } else {
-    modelIdsCacheString = modelIds?.join("---")
+    modelIdsCacheString = s.s.models.map((model) => model.cacheKey())?.join("---")
   }
 
   s.updateMeta({queryParams})
@@ -78,9 +80,11 @@ const useCollection = (
     const baseQuery = s.p.collection || s.p.modelClass.all()
     const overallCount = await baseQuery.count()
 
-    setOverallCount(overallCount)
-    setShowNoRecordsAvailableContent(showNoRecordsAvailableContent({overallCount}))
-    setShowNoRecordsFoundContent(showNoRecordsFoundContent({overallCount}))
+    s.set({
+      overallCount,
+      showNoRecordsAvailableContent: showNoRecordsAvailableContent({overallCount}),
+      showNoRecordsFoundContent: showNoRecordsFoundContent({overallCount})
+    })
   }, [])
 
   const hasQParams = useCallback(() => {
@@ -107,8 +111,10 @@ const useCollection = (
       }
     }
 
-    setQParams(qParamsToSet)
-    setSearchParams(searchParams)
+    s.set({
+      qParams: qParamsToSet,
+      searchParams
+    })
   }, [])
 
   const loadModels = useCallback(async () => {
@@ -160,16 +166,20 @@ const useCollection = (
       })
     }
 
-    setQuery(query)
-    setResult(result)
-    setModels(result.models())
-    setShowNoRecordsAvailableContent(showNoRecordsAvailableContent({models}))
-    setShowNoRecordsFoundContent(showNoRecordsFoundContent({models}))
+    s.set({
+      models: result.models(),
+      query,
+      result,
+      showNoRecordsAvailableContent: showNoRecordsAvailableContent({models}),
+      showNoRecordsFoundContent: showNoRecordsFoundContent({models})
+    })
   }, [])
 
   const loadModelsDebounce = useCallback(debounce(loadModels), [])
   const onModelDestroyed = useCallback((args) => {
-    setModels(s.s.models.filter((model) => model.id() != args.model.id()))
+    s.set({
+      models: s.s.models.filter((model) => model.id() != args.model.id())
+    })
   }, [])
 
   const onModelUpdated = useCallback((args) => {

package/src/use-created-event.mjs

@@ -0,0 +1,55 @@
+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 useShape from "set-state-compare/src/use-shape.js"
+
+const ApiMakerUseCreatedEvent = (modelClass, onCreated, args = {}) => {
+  const {active = true, debounce} = args
+  const s = useShape({active, debounce, modelClass, onCreated})
+
+  const eventDebounce = useCallback(() => {
+    if (!s.meta.debounceInstance) {
+      if (typeof this.props.debounce == "number") {
+        s.meta.debounceInstance = debounceFunction(s.p.onCreated, s.p.debounce)
+      } else {
+        s.meta.debounceInstance = debounceFunction(s.p.onCreated)
+      }
+    }
+
+    return s.meta.debounceInstance
+  }, [])
+
+  const onCreatedCallback = useCallback((...args) => {
+    if (!s.p.active) {
+      return
+    }
+
+    if (s.p.debounce) {
+      eventDebounce()(...args)
+    } else {
+      s.p.onCreated(...args)
+    }
+  }, [])
+
+  useEffect(() => {
+    const connectCreated = ModelEvents.connectCreated(s.p.modelClass, (...args) => onCreatedCallback(...args))
+
+    return () => {
+      connectCreated.unsubscribe()
+    }
+  }, [])
+}
+
+ApiMakerUseCreatedEvent.propTypes = propTypesExact({
+  active: PropTypes.bool.isRequired,
+  debounce: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number
+  ]),
+  modelClass: PropTypes.func.isRequired,
+  onCreated: PropTypes.func.isRequired
+})
+
+export default ApiMakerUseCreatedEvent

package/src/use-event-emitter.mjs

@@ -0,0 +1,25 @@
+import EventEmitter from "events"
+import PropTypes from "prop-types"
+import {useCallback, useEffect} from "react"
+
+const ApiMakerUseEventEmitter = (events, event, onCalled) => {
+  const onCalledCallback = useCallback((...args) => {
+    onCalled.apply(null, ...args)
+  }, [events, event, onCalled])
+
+  useEffect(() => {
+    events.addListener(event, onCalledCallback)
+
+    return () => {
+      events.removeListener(event, onCalledCallback)
+    }
+  }, [events, event, onCalled])
+}
+
+ApiMakerUseEventEmitter.propTypes = {
+  event: PropTypes.string.isRequired,
+  events: PropTypes.instanceOf(EventEmitter).isRequired,
+  onCalled: PropTypes.func.isRequired
+}
+
+export default ApiMakerUseEventEmitter