@kaspernj/api-maker 1.0.383 → 1.0.385

package/package.json

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

package/src/table/use-breakpoint.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from "react"
+import {useCallback, useLayoutEffect} from "react"
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
 
@@ -30,7 +30,7 @@ const useBreakpoint = () => {
     breakpoint: () => calculateBreakPoint()
   })
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     window.addEventListener("resize", onCalled)
 
     return () => {

package/src/use-can-can.mjs

@@ -1,5 +1,5 @@
 import CanCan from "./can-can.mjs"
-import {useCallback, useMemo, useState} from "react"
+import {useCallback, useLayoutEffect, useMemo, useState} from "react"
 import useCurrentUser from "./use-current-user.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
 
@@ -31,7 +31,7 @@ const useCanCan = (abilitiesCallback, dependencies) => {
     loadAbilities()
   }, dependencies)
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     CanCan.current().events.addListener("onResetAbilities", onResetAbilities)
 
     return () => {

package/src/use-collection.mjs

@@ -2,7 +2,7 @@ import debounce from "debounce"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
 import ModelEvents from "./model-events.mjs"
-import {useCallback, useMemo} from "react"
+import {useCallback, useLayoutEffect, useMemo} from "react"
 import useCreatedEvent from "./use-created-event.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
@@ -251,7 +251,7 @@ const useCollection = (props, cacheKeys = []) => {
 
   useCreatedEvent(s.p.modelClass, onCreated)
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     const connections = []
 
     if (s.s.models) {

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, useMemo} from "react"
+import {useCallback, useLayoutEffect} from "react"
 import useShape from "set-state-compare/src/use-shape.js"
 
 const ApiMakerUseCreatedEvent = (modelClass, onCreated, args = {}) => {
@@ -33,7 +33,7 @@ const ApiMakerUseCreatedEvent = (modelClass, onCreated, args = {}) => {
     }
   }, [])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     const connectCreated = ModelEvents.connectCreated(s.p.modelClass, (...args) => onCreatedCallback(...args))
 
     return () => {

package/src/use-destroyed-event.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from "react"
+import {useCallback, useLayoutEffect, useMemo} from "react"
 import debounceFunction from "debounce"
 import ModelEvents from "./model-events.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
@@ -34,7 +34,7 @@ const apiMakerUseDestroyedEvent = (model, onDestroyed, props) => {
     }
   }, [])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     let connectDestroyed, onConnectedListener
 
     if (model) {

package/src/use-event-emitter.mjs

@@ -1,7 +1,7 @@
-import {useMemo} from "react"
+import {useLayoutEffect} from "react"
 
 const ApiMakerUseEventEmitter = (events, event, onCalled) => {
-  useMemo(() => {
+  useLayoutEffect(() => {
     if (events) {
       events.addListener(event, onCalled)
 

package/src/use-event-listener.mjs

@@ -1,11 +1,11 @@
-import {useCallback, useMemo} from "react"
+import {useCallback, useLayoutEffect} from "react"
 
 const ApiMakerUseEventListener = (target, event, onCalled) => {
   const onCalledCallback = useCallback((...args) => {
     onCalled.apply(null, args)
   }, [target, event, onCalled])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     if (target) {
       target.addEventListener(event, onCalledCallback)
 

package/src/use-model.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useState} from "react"
+import {useCallback, useLayoutEffect, useMemo, useState} from "react"
 import Devise from "./devise.mjs"
 import * as inflection from "inflection"
 import ModelEvents from "./model-events.mjs"
@@ -17,6 +17,11 @@ const useModel = (modelClassArg, argsArg = {}) => {
 
   const s = useShape(args)
 
+  s.useStates({
+    model: undefined,
+    notFound: undefined
+  })
+
   if (typeof modelClassArg == "object") {
     modelClass = modelClassArg.callback({queryParams})
   } else {
@@ -28,7 +33,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
 
   if (args.loadByQueryParam) {
     modelId = args.loadByQueryParam({queryParams})
-  } else {
+  } else if (!args.query) {
     if (!args.match) throw new Error("Both 'loadByQueryParam' and 'match' wasn't given")
 
     modelId = args.match.params[paramsVariableName] || args.match.params.id
@@ -36,19 +41,21 @@ const useModel = (modelClassArg, argsArg = {}) => {
 
   const modelVariableName = inflection.camelize(modelClass.modelClassData().name, true)
   const cacheArgs = [modelId]
-  const [model, setModel] = useState(undefined)
-  const [notFound, setNotFound] = useState(undefined)
 
   if (args.cacheArgs) {
     cacheArgs.push(...args.cacheArgs)
   }
 
-  s.updateMeta({modelId, modelVariableName, queryParams})
+  s.updateMeta({args, modelId, modelVariableName, queryParams})
 
   const loadExistingModel = useCallback(async () => {
-    const query = await modelClass.ransack({id_eq: s.m.modelId})
+    let query
 
-    if (!modelId) {
+    if (s.m.modelId) {
+      query = modelClass.ransack({id_eq: s.m.modelId})
+    } else if (s.m.args.query) {
+      query = s.m.args.query.clone()
+    } else {
       throw new Error(`No model ID was given: ${s.m.modelId} by '${paramsVariableName}' in query params: ${Object.keys(s.props.match.params).join(", ")}`)
     }
 
@@ -58,8 +65,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
 
     const model = await query.first()
 
-    setModel(model)
-    setNotFound(!model)
+    s.set({model, notFound: !model})
   }, [])
 
   const loadNewModel = useCallback(async () => {
@@ -79,13 +85,13 @@ const useModel = (modelClassArg, argsArg = {}) => {
       data: {a: modelData}
     })
 
-    setModel(model)
+    s.set({model})
   }, [])
 
   const loadModel = useCallback(async () => {
     if (s.props.newIfNoId && !s.m.modelId) {
       return await loadNewModel()
-    } else if (!s.props.optional || s.m.modelId) {
+    } else if (!s.props.optional || s.m.modelId | s.m.args.query) {
       return await loadExistingModel()
     }
   }, [])
@@ -95,7 +101,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
     cacheArgs
   )
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     let reloadModelCallback
 
     if (args.events) {
@@ -109,17 +115,17 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   }, [args.events])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     let connectUpdated
 
-    if (model && args.eventUpdated) {
-      connectUpdated = ModelEvents.connectUpdated(model, loadModel)
+    if (s.s.model && args.eventUpdated) {
+      connectUpdated = ModelEvents.connectUpdated(s.s.model, loadModel)
     }
 
     return () => {
       connectUpdated?.unsubscribe()
     }
-  }, [args.eventUpdated, model?.id()])
+  }, [args.eventUpdated, s.s.model?.id()])
 
   const onSignedIn = useCallback(() => {
     loadModel()
@@ -129,7 +135,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
     loadModel()
   }, [])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     Devise.events().addListener("onDeviseSignIn", onSignedIn)
     Devise.events().addListener("onDeviseSignOut", onSignedOut)
 
@@ -147,23 +153,23 @@ const useModel = (modelClassArg, argsArg = {}) => {
     s.p.onDestroyed(forwardArgs)
   }, [])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     let connectDestroyed
 
-    if (model && args.onDestroyed) {
-      connectDestroyed = ModelEvents.connectDestroyed(model, onDestroyed)
+    if (s.s.model && args.onDestroyed) {
+      connectDestroyed = ModelEvents.connectDestroyed(s.s.model, onDestroyed)
     }
 
     return () => {
       connectDestroyed?.unsubscribe()
     }
-  }, [args.onDestroyed, model?.id()])
+  }, [args.onDestroyed, s.s.model?.id()])
 
   const result = {}
 
-  result[modelVariableName] = model
+  result[modelVariableName] = s.s.model
   result[`${modelVariableName}Id`] = modelId
-  result[`${modelVariableName}NotFound`] = notFound
+  result[`${modelVariableName}NotFound`] = s.s.notFound
 
   return result
 }

package/src/use-resize-observer.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from "react"
+import {useCallback, useLayoutEffect, useMemo} from "react"
 import useShape from "set-state-compare/src/use-shape.js"
 
 const useResizeObserver = (element, callback) => {
@@ -8,7 +8,7 @@ const useResizeObserver = (element, callback) => {
   }, [])
   const observer = useMemo(() => new ResizeObserver(onResize), [])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     if (element) {
       observer.observe(element)
     }

package/src/use-updated-event.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from "react"
+import {useCallback, useLayoutEffect, useMemo} from "react"
 import debounceFunction from "debounce"
 import ModelEvents from "./model-events.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
@@ -32,7 +32,7 @@ const apiMakerUseUpdatedEvent = (model, onUpdated, {active = true, debounce, onC
     }
   }, [])
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     let connectUpdated, onConnectedListener
 
     if (model) {