@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/use-model-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 apiMakerUseModelEvent = (model, event, onCallback, props) => {
+  const {active = true, debounce, onConnected, ...restProps} = props || {}
+
+  if (Object.keys(restProps).length > 0) {
+    throw new Error(`Unknown props given to apiMakerUseModelEvent: ${Object.keys(restProps).join(", ")}`)
+  }
+
+  const s = useShape({active, debounce, model, onCallback})
+
+  const debounceCallback = useMemo(() => {
+    if (typeof debounce == "number") {
+      return debounceFunction(s.p.onCallback, debounce)
+    } else {
+      return debounceFunction(s.p.onCallback)
+    }
+  }, [debounce])
+
+  s.updateMeta({debounceCallback})
+
+  const onCallbackCallback = useCallback((...args) => {
+    if (!s.p.active) {
+      return
+    }
+
+    if (s.p.debounce) {
+      s.m.debounceCallback(...args)
+    } else {
+      s.p.onCallback(...args)
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    let connectEvent, onConnectedListener
+
+    if (model) {
+      connectEvent = ModelEvents.connect(model, event, onCallbackCallback)
+
+      if (onConnected) {
+        onConnectedListener = connectEvent.events.addListener("connected", onConnected)
+      }
+    }
+
+    return () => {
+      if (onConnectedListener) {
+        connectEvent.events.removeListener("connected", onConnected)
+      }
+
+      if (connectEvent) {
+        connectEvent.unsubscribe()
+      }
+    }
+  }, [model?.id()])
+}
+
+export default apiMakerUseModelEvent

package/src/use-model.js

@@ -0,0 +1,189 @@
+import {useCallback, useLayoutEffect, useMemo} from "react"
+import Devise from "./devise"
+import * as inflection from "inflection"
+import ModelEvents from "./model-events"
+import useQueryParams from "on-location-changed/build/use-query-params"
+import useShape from "set-state-compare/src/use-shape"
+
+const useModel = (modelClassArg, argsArg = {}) => {
+  const queryParams = useQueryParams()
+  let args, modelClass
+
+  if (typeof argsArg == "function") {
+    args = argsArg({modelClass})
+  } else {
+    args = argsArg
+  }
+
+  const s = useShape(args)
+
+  s.useStates({
+    model: undefined,
+    notFound: undefined
+  })
+
+  if ("active" in s.props && !s.props.active) {
+    s.meta.active = false
+  } else {
+    s.meta.active = true
+  }
+
+  if (typeof modelClassArg == "object") {
+    modelClass = modelClassArg.callback({queryParams})
+  } else {
+    modelClass = modelClassArg
+  }
+
+  const paramsVariableName = `${modelClass.modelName().paramKey()}_id`
+  let modelId
+
+  if (args.loadByQueryParam) {
+    modelId = args.loadByQueryParam({queryParams})
+  } 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
+  }
+
+  const modelVariableName = inflection.camelize(modelClass.modelClassData().name, true)
+  const cacheArgs = [modelId]
+
+  const loadExistingModel = useCallback(async () => {
+    let query
+
+    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(", ")}`)
+    }
+
+    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()
+
+    s.set({model, notFound: !model})
+  }, [])
+
+  const loadNewModel = useCallback(async () => {
+    const ModelClass = modelClass
+    const paramKey = ModelClass.modelName().paramKey()
+    const modelDataFromParams = s.m.queryParams[paramKey] || {}
+
+    let defaults = {}
+
+    if (s.props.newIfNoId?.defaults) {
+      defaults = await s.props.newIfNoId.defaults()
+    }
+
+    const modelData = Object.assign(defaults, s.props.newAttributes, modelDataFromParams)
+    const model = new ModelClass({
+      isNewRecord: true,
+      data: {a: modelData}
+    })
+
+    s.set({model})
+  }, [])
+
+  const loadModel = useCallback(async () => {
+    if (!s.m.active) {
+      // Not active - don't do anything
+    } else if (s.props.newIfNoId && !s.m.modelId) {
+      return await loadNewModel()
+    } else if (!s.props.optional || s.m.modelId | s.m.args.query) {
+      return await loadExistingModel()
+    }
+  }, [])
+
+  const onDestroyed = useCallback(({model}) => {
+    const forwardArgs = {model}
+
+    forwardArgs[s.m.modelVariableName] = model
+
+    s.p.onDestroyed(forwardArgs)
+  }, [])
+
+  const onSignedIn = useCallback(() => {
+    loadModel()
+  }, [])
+
+  const onSignedOut = useCallback(() => {
+    loadModel()
+  }, [])
+
+  if (args.cacheArgs) {
+    cacheArgs.push(...args.cacheArgs)
+  }
+
+  s.updateMeta({args, modelId, modelVariableName, queryParams})
+
+  useMemo(
+    () => { loadModel() },
+    cacheArgs
+  )
+
+  useLayoutEffect(() => {
+    let reloadModelCallback
+
+    if (args.events) {
+      reloadModelCallback = args.events.addListener("reloadModel", loadModel)
+    }
+
+    return () => {
+      if (reloadModelCallback) {
+        args.events.removeListener("reloadModel", loadModel)
+      }
+    }
+  }, [args.events])
+
+  useLayoutEffect(() => {
+    let connectUpdated
+
+    if (s.s.model && args.eventUpdated) {
+      connectUpdated = ModelEvents.connectUpdated(s.s.model, loadModel)
+    }
+
+    return () => {
+      connectUpdated?.unsubscribe()
+    }
+  }, [args.eventUpdated, s.s.model?.id()])
+
+  useLayoutEffect(() => {
+    Devise.events().addListener("onDeviseSignIn", onSignedIn)
+    Devise.events().addListener("onDeviseSignOut", onSignedOut)
+
+    return () => {
+      Devise.events().removeListener("onDeviseSignIn", onSignedIn)
+      Devise.events().removeListener("onDeviseSignOut", onSignedOut)
+    }
+  })
+
+  useLayoutEffect(() => {
+    let connectDestroyed
+
+    if (s.s.model && args.onDestroyed) {
+      connectDestroyed = ModelEvents.connectDestroyed(s.s.model, onDestroyed)
+    }
+
+    return () => {
+      connectDestroyed?.unsubscribe()
+    }
+  }, [args.onDestroyed, s.s.model?.id()])
+
+  const result = {
+    model: s.s.model,
+    modelId,
+    notFound: s.s.notFound
+  }
+
+  result[modelVariableName] = s.s.model
+  result[`${modelVariableName}Id`] = modelId
+  result[`${modelVariableName}NotFound`] = s.s.notFound
+
+  return result
+}
+
+export default useModel

package/src/use-resize-observer.js

@@ -0,0 +1,24 @@
+import {useCallback, useLayoutEffect, useMemo} from "react"
+import useShape from "set-state-compare/src/use-shape"
+
+const useResizeObserver = (element, callback) => {
+  const s = useShape({callback})
+  const onResize = useCallback((...args) => {
+    s.p.callback(...args)
+  }, [])
+  const observer = useMemo(() => new ResizeObserver(onResize), [])
+
+  useLayoutEffect(() => {
+    if (element) {
+      observer.observe(element)
+    }
+
+    return () => {
+      if (element) {
+        observer.disconnect()
+      }
+    }
+  }, [element])
+}
+
+export default useResizeObserver

package/src/use-router.jsx

@@ -0,0 +1,128 @@
+import config from "./config"
+import escapeStringRegexp from "escape-string-regexp"
+import * as inflection from "inflection"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {useCallback, useMemo} from "react"
+import useShape from "set-state-compare/src/use-shape"
+
+const useRouterPropTypes = propTypesExact({
+  locales: PropTypes.array.isRequired,
+  path: PropTypes.string,
+  routeDefinitions: PropTypes.object.isRequired,
+  routes: PropTypes.object.isRequired
+})
+
+const useRouter = (props) => {
+  PropTypes.checkPropTypes(useRouterPropTypes, props, "prop", "useRouter")
+
+  const s = useShape(props)
+
+  const findRouteParams = useCallback((routeDefinition) => {
+    const result = []
+    const parts = routeDefinition.path.split("/")
+
+    for (const part of parts) {
+      if (part.match(/^:([a-z_]+)$/))
+        result.push(part)
+    }
+
+    return result
+  }, [])
+
+  const getPath = useCallback(() => {
+    let path = s.p.path || window.location.pathname
+
+    path = path.replace(/[/]+$/, "")
+
+    return path
+  }, [])
+
+  const getRouteDefinitions = useCallback(() => s.p.routeDefinitions || config.getRouteDefinitions(), [])
+  const getRoutes = useCallback(() => s.p.routes || config.getRoutes(), [])
+
+  const parseRouteDefinitions = useCallback(() => {
+    const routeDefinitions = getRouteDefinitions()
+    const routes = getRoutes()
+    const regex = /:([A-z\d_]+)/
+    const parsedRouteDefinitions = []
+
+    for (const locale of s.p.locales) {
+      for (const routeDefinition of routeDefinitions.routes) {
+        const routePathName = `${inflection.camelize(routeDefinition.name, true)}Path`
+        const params = findRouteParams(routeDefinition)
+
+        params.push({locale})
+
+        if (!(routePathName in routes))
+          throw new Error(`${routePathName} not found in routes: ${Object.keys(routes, ", ")}`)
+
+        const routePath = routes[routePathName](...params).replace(/[/]+$/, "")
+        const groups = []
+        let pathRegexString = "^"
+
+        pathRegexString += escapeStringRegexp(routePath)
+
+        while (true) {
+          const match = pathRegexString.match(regex)
+
+          if (!match) break
+
+          const variableName = match[1]
+
+          groups.push(variableName)
+
+          pathRegexString = pathRegexString.replace(match[0], "([^/]+)")
+        }
+
+        pathRegexString += "$"
+
+        const pathRegex = new RegExp(pathRegexString)
+
+        parsedRouteDefinitions.push({groups, pathRegex, routeDefinition})
+      }
+    }
+
+    return parsedRouteDefinitions
+  }, [])
+
+  const parsedRouteDefinitions = useMemo(() => parseRouteDefinitions(), [])
+
+  s.updateMeta({parsedRouteDefinitions})
+
+  const findMatchingRoute = useCallback(() => {
+    const path = getPath()
+
+    for (const parsedRouteDefinition of s.m.parsedRouteDefinitions) {
+      const match = path.match(parsedRouteDefinition.pathRegex)
+      let matched, params
+
+      if (match) {
+        matched = true
+        params = {}
+
+        for (const groupKey in parsedRouteDefinition.groups) {
+          const groupName = parsedRouteDefinition.groups[groupKey]
+
+          params[groupName] = match[Number(groupKey) + 1]
+        }
+      }
+
+      if (path == "" && parsedRouteDefinition.routeDefinition.path == "/") matched = true
+      if (matched) {
+        return {params, parsedRouteDefinition}
+      }
+    }
+  }, [])
+
+  const matchingRoute = findMatchingRoute()
+  const params = matchingRoute?.params || {}
+  const match = {
+    matchingRoute,
+    params
+  }
+
+  return {match}
+}
+
+export default useRouter

package/src/use-screen-layout.js

@@ -0,0 +1,49 @@
+import {Platform, useWindowDimensions} from "react-native"
+
+const getWindowLayout = (width) => {
+  if (width <= 575) {
+    return "xs"
+  } else if (width <= 767) {
+    return "sm"
+  } else if (width <= 991) {
+    return "md"
+  } else if (width <= 1199) {
+    return "lg"
+  } else if (width <= 1399) {
+    return "xl"
+  } else if (width >= 1400) {
+    return "xxl"
+  } else {
+    console.error(`Couldn't determine window layout from width: ${width}`)
+  }
+}
+
+const useScreenLayout = () => {
+  if (Platform.OS == "web") {
+    const shared = useMemo(() => ({}))
+
+    shared.width = window.innerWidth
+
+    const [screenLayout, setScreenLayout] = useState(() => getWindowLayout(shared.width))
+
+    const onResize = useCallback(() => {
+      const newWindowLayout = getWindowLayout(window.innerWidth)
+
+      if (shared.screenlayout != newWindowLayout) {
+        setScreenLayout(newWindowLayout)
+      }
+    }, [])
+
+    useEventListener(window, "resize", onResize)
+
+    shared.screenLayout = screenLayout
+
+    return shared.screenLayout
+  } else {
+    const windowDimensions = useWindowDimensions()
+
+    return getWindowLayout(windowDimensions.width)
+  }
+}
+
+export default useScreenLayout

package/src/use-updated-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 apiMakerUseUpdatedEvent = (model, onUpdated, props = {}) => {
+  const {active = true, debounce, onConnected, ...restProps} = props
+
+  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)
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    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

package/src/use-validation-errors.js

@@ -0,0 +1,33 @@
+import events from "./events"
+import {useCallback} from "react"
+import useEventEmitter from "./use-event-emitter"
+import useShape from "set-state-compare/src/use-shape"
+
+const useValidationErrors = (callback) => {
+  const s = useShape({callback})
+
+  s.useStates({validationErrors: []})
+
+  const onValidationErrors = useCallback((validationErrors) => {
+    const matchedValidationErrors = []
+
+    for (const validationError of validationErrors.getValidationErrors()) {
+      if (s.p.callback(validationError)) {
+        validationError.setHandled()
+        matchedValidationErrors.push(validationError)
+      }
+    }
+
+    s.set({
+      validationErrors: matchedValidationErrors
+    })
+  }, [])
+
+  useEventEmitter(events, "onValidationErrors", onValidationErrors)
+
+  return {
+    validationErrors: s.s.validationErrors
+  }
+}
+
+export default useValidationErrors

package/src/utils/card.jsx

@@ -0,0 +1,49 @@
+import BaseComponent from "../base-component"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "./text"
+
+export default memo(shapeComponent(class ApiMakerUtilsCard extends BaseComponent {
+  static propTypes = propTypesExact({
+    children: PropTypes.node,
+    controls: PropTypes.node,
+    dataSet: PropTypes.object,
+    header: PropTypes.string,
+    style: PropTypes.object
+  })
+
+  render() {
+    const {children, controls, dataSet, header, style} = this.props
+    const {component, ...restDataSet} = dataSet || {}
+    const actualDataSet = Object.assign(
+      {component: classNames("api-maker/utils/card", component)},
+      restDataSet
+    )
+    const actualStyle = Object.assign(
+      {
+        backgroundColor: "#fff",
+        borderRadius: 15,
+        padding: 30
+      },
+      style
+    )
+
+    return (
+      <View dataSet={actualDataSet} style={actualStyle}>
+        {controls &&
+          <View style={{position: "absolute", top: 15, right: 15}}>
+            {controls}
+          </View>
+        }
+        {header &&
+          <Text style={{fontSize: 24}}>
+            {header}
+          </Text>
+        }
+        {children}
+      </View>
+    )
+  }
+}))

package/src/utils/checkbox.jsx

@@ -0,0 +1,80 @@
+import BaseComponent from "../base-component"
+import {CheckBox, Pressable, View} from "react-native"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "./text"
+
+export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseComponent {
+  static defaultProps = {
+    label: undefined
+  }
+
+  static propTypes = propTypesExact({
+    checked: PropTypes.bool,
+    dataSet: PropTypes.object,
+    defaultChecked: PropTypes.bool,
+    label: PropTypes.string,
+    onCheckedChange: PropTypes.func,
+    style: PropTypes.object
+  })
+
+  setup() {
+    this.useStates({
+      checked: this.props.defaultChecked
+    })
+    this.isChecked = this.calculateChecked()
+  }
+
+  calculateChecked() {
+    if ("checked" in this.props) {
+      return this.p.checked
+    } else {
+      return this.s.checked
+    }
+  }
+
+  render() {
+    const {isChecked} = this.tt
+    const {label} = this.p
+    const {dataSet} = this.props
+    const actualStyle = Object.assign(
+      {flexDirection: "row", alignItems: "center"},
+      this.props.style
+    )
+    const actualDataSet = Object.assign(
+      {
+        checked: isChecked
+      },
+      dataSet
+    )
+
+    return (
+      <View
+        dataSet={{component: "api-maker/utils/checkbox"}}
+        style={actualStyle}
+      >
+        <CheckBox dataSet={actualDataSet} onValueChange={this.tt.onValueChange} value={isChecked} />
+        {label &&
+          <Pressable onPress={this.tt.onLabelPressed}>
+            <Text style={{marginLeft: 3}}>
+              {label}
+            </Text>
+          </Pressable>
+        }
+      </View>
+    )
+  }
+
+  onLabelPressed = () => this.p.onCheckedChange(!this.tt.isChecked)
+
+  onValueChange = (e) => {
+    if (this.props.onCheckedChange) {
+      this.p.onCheckedChange(e)
+    }
+
+    this.setState({checked: !this.tt.isChecked})
+  }
+}))