@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/use-collection.js

@@ -0,0 +1,280 @@
+import debounce from "debounce"
+import {digg} from "diggerize"
+import * as inflection from "inflection"
+import ModelEvents from "./model-events"
+import {useCallback, useLayoutEffect, useMemo} from "react"
+import useCreatedEvent from "./use-created-event"
+import useShape from "set-state-compare/src/use-shape"
+import useQueryParams from "on-location-changed/build/use-query-params"
+
+const useCollection = (props, cacheKeys = []) => {
+  const {
+    abilities,
+    collection,
+    defaultParams,
+    groupBy,
+    ifCondition,
+    limit,
+    modelClass,
+    noRecordsAvailableContent = undefined,
+    noRecordsFoundContent = undefined,
+    onModelsLoaded,
+    pagination = false,
+    preloads = [],
+    queryMethod,
+    queryName: initialQueryName,
+    ransack,
+    select = {},
+    selectColumns,
+    ...restProps
+  } = props
+
+  if (Object.keys(restProps).length > 0) {
+    throw new Error(`Unknown props given to useCollection: ${Object.keys(restProps).join(", ")}`)
+  }
+
+  const s = useShape(props)
+  const queryName = initialQueryName || digg(modelClass.modelClassData(), "collectionKey")
+
+  s.meta.queryParams = useQueryParams()
+
+  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,
+    query: undefined,
+    queryName,
+    queryPerKey: `${queryName}_per`,
+    queryQName: `${queryName}_q`,
+    querySName: `${queryName}_s`,
+    queryPageName: `${queryName}_page`,
+    result: undefined,
+    searchParams: undefined,
+    showNoRecordsAvailableContent: false,
+    showNoRecordsFoundContent: false
+  })
+  s.useStates({
+    qParams: () => qParams()
+  })
+
+  let modelIdsCacheString
+
+  if (s.s.models === undefined) {
+    modelIdsCacheString = "models-undefined"
+  } else if (s.s.models.length === 0) {
+    modelIdsCacheString = "no-models"
+  } else {
+    modelIdsCacheString = s.s.models.map((model) => model.cacheKey())?.join("---")
+  }
+
+  const loadOverallCount = useCallback(async () => {
+    const baseQuery = s.p.collection || s.p.modelClass.all()
+    const overallCount = await baseQuery.count()
+
+    s.set({
+      overallCount,
+      showNoRecordsAvailableContent: showNoRecordsAvailableContent({overallCount}),
+      showNoRecordsFoundContent: showNoRecordsFoundContent({overallCount})
+    })
+  }, [])
+
+  const loadQParams = useCallback(() => {
+    const qParamsToSet = hasQParams() ? qParams() : Object.assign({}, s.props.defaultParams)
+    const searchParams = []
+
+    if (s.m.queryParams[s.s.querySName]) {
+      for (const rawSearchParam of s.m.queryParams[s.s.querySName]) {
+        const parsedSearchParam = JSON.parse(rawSearchParam)
+
+        searchParams.push(parsedSearchParam)
+      }
+    }
+
+    s.set({
+      qParams: qParamsToSet,
+      searchParams
+    })
+  }, [])
+
+  const loadModels = useCallback(async () => {
+    let query = s.props.collection?.clone() || s.p.modelClass.ransack()
+
+    if (s.props.pagination) {
+      const page = s.m.queryParams[s.s.queryPageName] || 1
+      let per = s.m.queryParams[s.s.queryPerKey] || 30
+
+      if (per == "all") {
+        per = 999_999_999
+      } else {
+        per = Number(per)
+      }
+
+      query.page(page).per(per)
+    }
+
+    if (s.props.groupBy) query = query.groupBy(...s.p.groupBy)
+
+    query = query
+      .ransack(s.s.qParams)
+      .search(s.s.searchParams)
+      .searchKey(s.s.queryQName)
+      .pageKey(s.s.queryPageName)
+      .perKey(s.s.queryPerKey)
+
+    if (s.props.abilities) query.abilities(s.p.abilities)
+    if (s.props.limit !== undefined) query.limit(s.p.limit)
+    if (s.props.preloads) query.preload(s.p.preloads)
+    if (s.props.ransack) query.ransack(s.props.ransack)
+    if (s.props.select) query.select(s.p.select)
+    if (s.props.selectColumns) query.selectColumns(s.p.selectColumns)
+
+    let result
+
+    if (s.props.queryMethod) {
+      result = await s.p.queryMethod({query})
+    } else {
+      result = await query.result()
+    }
+
+    const models = result.models()
+
+    if (s.props.onModelsLoaded) {
+      s.p.onModelsLoaded({
+        models,
+        qParams: s.s.qParams,
+        query,
+        result
+      })
+    }
+
+    s.set({
+      models: result.models(),
+      query,
+      result,
+      showNoRecordsAvailableContent: showNoRecordsAvailableContent({models}),
+      showNoRecordsFoundContent: showNoRecordsFoundContent({models})
+    })
+  }, [])
+
+  const loadModelsDebounce = useCallback(debounce(loadModels), [])
+  const onModelDestroyed = useCallback((args) => {
+    s.set({
+      models: s.s.models.filter((model) => model.id() != args.model.id())
+    })
+  }, [])
+
+  const onModelUpdated = useCallback((args) => {
+    const updatedModel = digg(args, "model")
+    const foundModel = s.s.models.find((model) => model.id() == updatedModel.id())
+
+    if (foundModel) loadModelsDebounce()
+  }, [])
+
+  const showNoRecordsAvailableContent = useCallback((args) => {
+    let models, overallCount
+
+    if (args.models !== undefined) {
+      models = args.models
+    } else if (s.s.models !== undefined) {
+      models = s.s.models
+    }
+
+    if (args.overallCount !== undefined) {
+      overallCount = args.overallCount
+    } else if (s.s.overallCount !== undefined) {
+      overallCount = s.s.overallCount
+    }
+
+    if (models === undefined || overallCount === undefined || s.p.noRecordsAvailableContent === undefined) return false
+    if (models.length === 0 && overallCount === 0 && s.p.noRecordsAvailableContent) return true
+  }, [])
+
+  const showNoRecordsFoundContent = useCallback((args) => {
+    let models, overallCount
+
+    if (args.models !== undefined) {
+      models = args.models
+    } else if (s.s.models !== undefined) {
+      models = s.s.models
+    }
+
+    if (args.overallCount !== undefined) {
+      overallCount = args.overallCount
+    } else if (s.s.overallCount !== undefined) {
+      overallCount = s.s.overallCount
+    }
+
+    if (models === undefined || s.props.noRecordsFoundContent === undefined) return false
+
+    // Dont show noRecordsAvailableContent together with noRecordsAvailableContent
+    if (models.length === 0 && overallCount === 0 && s.props.noRecordsAvailableContent) return false
+    if (models.length === 0 && s.props.noRecordsFoundContent) return true
+  }, [])
+
+  const onCreated = useCallback(() => {
+    loadModels()
+  }, [])
+
+  useMemo(
+    () => {
+      if (!("ifCondition" in s.props) || s.props.ifCondition) {
+        loadQParams()
+        loadModels()
+      }
+    },
+    [
+      s.props.ifCondition,
+      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)
+  )
+
+  useMemo(() => {
+    if (s.props.noRecordsAvailableContent) {
+      loadOverallCount()
+    }
+  }, [])
+
+  useCreatedEvent(s.p.modelClass, onCreated)
+
+  useLayoutEffect(() => {
+    const connections = []
+
+    if (s.s.models) {
+      for(const model of s.s.models) {
+        connections.push(ModelEvents.connectUpdated(model, onModelUpdated))
+        connections.push(ModelEvents.connectDestroyed(model, onModelDestroyed))
+      }
+    }
+
+    return () => {
+      for(const connection of connections) {
+        connection.unsubscribe()
+      }
+    }
+  }, [modelIdsCacheString])
+
+  const result = Object.assign({}, s.state)
+  const modelVariableName = inflection.pluralize(inflection.camelize(modelClass.modelClassData().name, true))
+
+  result.modelIdsCacheString = modelIdsCacheString
+  result[modelVariableName] = s.s.models
+
+  return result
+}
+
+export default useCollection

package/src/use-created-event.js

@@ -0,0 +1,55 @@
+import debounceFunction from "debounce"
+import ModelEvents from "./model-events"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {useCallback, useLayoutEffect} from "react"
+import useShape from "set-state-compare/src/use-shape"
+
+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)
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    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-current-user.js

@@ -0,0 +1,88 @@
+import {useCallback, useMemo} from "react"
+import Devise from "./devise"
+import {digg} from "diggerize"
+import * as inflection from "inflection"
+import Logger from "./logger"
+import Services from "./services"
+import useEventEmitter from "./use-event-emitter"
+import useShape from "set-state-compare/src/use-shape"
+
+const logger = new Logger({name: "ApiMaker / useCurrentUser"})
+
+// logger.setDebug(true)
+
+const useCurrentUser = (args) => {
+  const s = useShape(args || {})
+  const scope = args?.scope || "user"
+  const scopeName = `current${inflection.camelize(scope)}`
+
+  s.meta.scope = scope
+  s.meta.scopeName = scopeName
+
+  const loadCurrentUserFromRequest = useCallback(async () => {
+    const {scope, scopeName} = s.m
+    const getArgsMethodName = `get${inflection.camelize(scope)}Args`
+    const args = Devise[getArgsMethodName]()
+
+    logger.debug(() => `Loading ${scope} with request`)
+
+    const result = await Services.current().sendRequest("Devise::Current", {query: args.query, scope})
+    const current = digg(result, "current")[0]
+
+    if (!(scopeName in s.setStates)) throw new Error(`'${scopeName}' not found in setStates`)
+    if (current) Devise.updateSession(current)
+
+    s.setStates[scopeName](current)
+
+    if (s.props.onCurrentUserLoaded) setTimeout(() => s.props.onCurrentUserLoaded(current), 0)
+  }, [])
+
+  const defaultCurrentUser = useCallback(() => {
+    const {scope, scopeName} = s.m
+    let current
+
+    if (Devise.current().hasCurrentScope(s.m.scope)) {
+      current = Devise.current().getCurrentScope(scope)
+
+      logger.debug(() => `Setting ${scope} from current scope: ${current?.id()}`)
+    } else if (Devise.current().hasGlobalCurrentScope(scope)) {
+      current = Devise[scopeName]()
+
+      logger.debug(() => `Setting ${scope} from global current scope: ${current?.id()}`)
+    }
+
+    if (current && s.props.onCurrentUserLoaded) {
+      setTimeout(() => s.props.onCurrentUserLoaded(current), 0)
+    }
+
+    return current
+  }, [])
+
+  const useStatesArgument = {}
+
+  useStatesArgument[scopeName] = () => defaultCurrentUser()
+
+  s.useStates(useStatesArgument)
+
+  const updateCurrentUser = useCallback(() => {
+    const setStatesArgument = {}
+
+    setStatesArgument[s.m.scopeName] = Devise[s.m.scopeName]()
+
+    s.set(setStatesArgument)
+  }, [])
+
+  useMemo(() => {
+    if (!Devise.current().hasGlobalCurrentScope(s.m.scope) && !Devise.current().hasCurrentScope(s.m.scope)) {
+      logger.debug(() => `Devise hasn't got current scope ${s.m.scope} so loading from request`)
+      loadCurrentUserFromRequest()
+    }
+  }, [])
+
+  useEventEmitter(Devise.events(), "onDeviseSignIn", updateCurrentUser)
+  useEventEmitter(Devise.events(), "onDeviseSignOut", updateCurrentUser)
+
+  return s.s[scopeName]
+}
+
+export default useCurrentUser

package/src/use-destroyed-event.js

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

package/src/use-event-emitter.js

@@ -0,0 +1,15 @@
+import {useLayoutEffect} from "react"
+
+const ApiMakerUseEventEmitter = (events, event, onCalled) => {
+  useLayoutEffect(() => {
+    if (events) {
+      events.addListener(event, onCalled)
+
+      return () => {
+        events.removeListener(event, onCalled)
+      }
+    }
+  }, [events, event, onCalled])
+}
+
+export default ApiMakerUseEventEmitter

package/src/use-event-listener.js

@@ -0,0 +1,19 @@
+import {useCallback, useLayoutEffect} from "react"
+
+const ApiMakerUseEventListener = (target, event, onCalled) => {
+  const onCalledCallback = useCallback((...args) => {
+    onCalled.apply(null, args)
+  }, [target, event, onCalled])
+
+  useLayoutEffect(() => {
+    if (target) {
+      target.addEventListener(event, onCalledCallback)
+
+      return () => {
+        target.removeEventListener(event, onCalledCallback)
+      }
+    }
+  }, [target, event, onCalled])
+}
+
+export default ApiMakerUseEventListener

package/src/use-input.js

@@ -0,0 +1,157 @@
+import {dig, digg} from "diggerize"
+import {useCallback, useEffect, useMemo, useRef} from "react"
+import idForComponent from "./inputs/id-for-component"
+import nameForComponent from "./inputs/name-for-component"
+import strftime from "strftime"
+import useShape from "set-state-compare/src/use-shape"
+import useValidationErrors from "./use-validation-errors"
+
+const useInput = ({props, wrapperOptions, ...useInputRestProps}) => {
+  const useInputRestPropsKeys = Object.keys(useInputRestProps)
+
+  if (useInputRestPropsKeys.length > 0) {
+    throw new Error(`Unknown props given to useInput: ${useInputRestPropsKeys.join(", ")}`)
+  }
+
+  const s = useShape(props)
+  const backupRef = useRef()
+
+  s.useStates({
+    form: undefined
+  })
+
+  useEffect(() => {
+    setForm()
+  }, [s.props.inputRef?.current])
+
+  s.meta.fakeComponent = {props}
+  s.meta.isCheckbox = props.type == "checkbox" || wrapperOptions?.type == "checkbox"
+  s.meta.isSelect = wrapperOptions?.type == "select"
+
+  const formatValue = useCallback((value) => {
+    const {formatValue} = s.props
+
+    if (formatValue) {
+      return formatValue(value)
+    } else if (value instanceof Date && !isNaN(value.getTime())) {
+      // We need to use a certain format for datetime-local
+      if (inputType() == "datetime-local") {
+        return strftime("%Y-%m-%dT%H:%M:%S", value)
+      } else if (inputType() == "date") {
+        return strftime("%Y-%m-%d", value)
+      }
+    }
+
+    return value
+  }, [])
+
+  const inputDefaultChecked = useCallback(() => {
+    if ("defaultChecked" in s.props) {
+      return s.props.defaultChecked
+    } else if (s.props.attribute && s.props.model) {
+      if (!s.props.model[s.props.attribute])
+        throw new Error(`No such attribute: ${s.props.attribute}`)
+
+      return s.props.model[s.props.attribute]()
+    }
+  }, [])
+
+  const inputDefaultValue = useCallback(() => {
+    if ("defaultValue" in s.props) {
+      return formatValue(s.props.defaultValue)
+    } else if (s.props.model && s.props.attribute) {
+      if (!s.props.model[s.props.attribute]) {
+        throw new Error(`No such attribute defined on resource: ${digg(s.props.model.modelClassData(), "name")}#${s.props.attribute}`)
+      }
+
+      return formatValue(s.props.model[s.props.attribute]())
+    }
+  }, [])
+
+  const inputRef = useCallback(() => s.props.inputRef || backupRef)
+
+  const inputType = useCallback(() => {
+    if ("type" in s.props) {
+      return s.props.type
+    } else if (s.m.isCheckbox) {
+      return "checkbox"
+    } else {
+      return "text"
+    }
+  }, [])
+
+  const label = useCallback(() => {
+    if ("label" in s.props) {
+      return s.props.label
+    } else if (s.props.attribute && s.props.model) {
+      return s.props.model.modelClass().humanAttributeName(s.props.attribute)
+    }
+  }, [])
+
+  const setForm = useCallback(() => {
+    const inputElement = inputRef().current
+
+    let form
+
+    if (inputElement) form = dig(inputElement, "form")
+    if (form && form != s.s.form) s.set({form})
+  }, [])
+
+  const getId = useCallback(() => idForComponent(s.m.fakeComponent), [])
+  const getName = useCallback(() => nameForComponent(s.m.fakeComponent), [])
+
+  const getInputProps = useCallback(() => {
+    const givenInputProps = s.props.inputProps || {}
+    const inputProps = Object.assign(
+      {
+        id: getId(),
+        name: getName(),
+        ref: inputRef()
+      },
+      givenInputProps
+    )
+
+    if (s.m.isCheckbox) {
+      if ("checked" in s.props) {
+        inputProps.checked = s.props.checked
+      }
+
+      if ("defaultChecked" in s.props || (s.props.attribute && s.props.model)) {
+        inputProps.defaultChecked = inputDefaultChecked()
+      }
+    } else if ("value" in s.props) {
+      inputProps.value = s.props.value
+    } else if (!("value" in s.props)) {
+      inputProps.defaultValue = inputDefaultValue()
+    }
+
+    return inputProps
+  }, [])
+
+  const {inputProps: oldInputProps, wrapperOpts: oldWrapperOpts, ...restProps} = props
+  const type = inputType()
+
+  s.meta.inputProps = getInputProps()
+  s.meta.inputNameWithoutId = useMemo(() => s.m.inputProps.name?.replace(/\[(.+)_id\]$/, "[$1]"), [s.m.inputProps.name])
+
+  if (!s.m.inputProps.ref) throw new Error("No input ref?")
+  if (!s.m.isSelect) s.m.inputProps.type = type
+
+  const {validationErrors} = useValidationErrors((validationError) =>
+    validationError.inputName == s.m.inputProps.name || validationError.inputName == s.m.inputNameWithoutId
+  )
+
+  const wrapperOpts = {
+    errors: validationErrors,
+    form: s.s.form,
+    label: label()
+  }
+
+  return {
+    inputProps: s.m.inputProps,
+    wrapperOpts,
+    restProps
+  }
+}
+
+export default useInput