@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/modal.jsx

@@ -0,0 +1,37 @@
+import BaseComponent from "./base-component"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {Modal, Pressable, View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerModal extends BaseComponent {
+  render() {
+    const {children, onRequestClose, ...restProps} = this.props
+
+    return (
+      <Modal onRequestClose={onRequestClose} {...restProps}>
+        <View
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            minWidth: "100%",
+            minHeight: "100%",
+            padding: 20,
+          }}
+        >
+          <Pressable
+            dataSet={{class: "modal-backdrop"}}
+            onPress={onRequestClose}
+            style={{
+              position: "absolute",
+              minWidth: "100%",
+              minHeight: "100%",
+              backgroundColor: "rgba(0, 0, 0, 0.5)"
+            }}
+          />
+          {children}
+        </View>
+      </Modal>
+    )
+  }
+}))

package/src/model-class-require.js

@@ -0,0 +1,17 @@
+import * as inflection from "inflection"
+import * as models from "models"
+
+const modelClassRequire = (modelName) => {
+  const requireName = inflection.camelize(modelName)
+  const ModelClass = models[requireName]
+
+  if (!ModelClass) {
+    const modelClasses = Object.keys(models).sort()
+
+    throw new Error(`No model called ${modelName} in ${modelClasses.join(", ")}`)
+  }
+
+  return ModelClass
+}
+
+export default modelClassRequire

package/src/{model-events.mjs → model-events.js}

@@ -1,4 +1,4 @@
-import CableConnectionPool from "./cable-connection-pool.mjs"
+import CableConnectionPool from "./cable-connection-pool"
 import {digg} from "diggerize"
 
 export default class ModelEvents {

package/src/{model-name.mjs → model-name.js}

@@ -1,13 +1,12 @@
-import Config from "@kaspernj/api-maker/src/config.mjs"
+import Config from "./config"
+import * as inflection from "inflection"
 
 export default class ModelName {
   constructor(data) {
     this.data = data
   }
 
-  camelizedLower() {
-    return this.data.modelClassData.camelizedLower
-  }
+  camelizedLower = () => this.data.modelClassData.camelizedLower
 
   human(args) {
     let argsToUse = args
@@ -23,11 +22,12 @@ export default class ModelName {
     }
 
     const key = `activerecord.models.${this.data.modelClassData.i18nKey}.${countKey}`
+    let defaultModelName = this.data.modelClassData.name
 
-    return Config.getI18n().t(key)
-  }
+    if (args?.count > 1) defaultModelName = inflection.pluralize(defaultModelName)
 
-  paramKey() {
-    return this.data.modelClassData.paramKey
+    return Config.getI18n().t(key, {defaultValue: defaultModelName})
   }
+
+  paramKey = () => this.data.modelClassData.paramKey
 }

package/src/{model-recipes-loader.mjs → model-recipes-loader.js}

@@ -1,5 +1,5 @@
 import {digg, digs} from "diggerize"
-import ModelRecipesModelLoader from "./model-recipes-model-loader.mjs"
+import ModelRecipesModelLoader from "./model-recipes-model-loader"
 
 export default class ModelRecipesLoader {
   constructor ({recipes}) {

package/src/{model-recipes-model-loader.mjs → model-recipes-model-loader.js}

@@ -1,7 +1,7 @@
-import BaseModel from "./base-model.mjs"
-import Collection from "./collection.mjs"
+import BaseModel from "./base-model"
+import Collection from "./collection"
 import {digg, digs} from "diggerize"
-import inflection from "inflection"
+import * as inflection from "inflection"
 
 export default class ApiMakerModelRecipesModelLoader {
   constructor ({modelRecipe, modelRecipesLoader}) {
@@ -36,7 +36,7 @@ export default class ApiMakerModelRecipesModelLoader {
 
     this.addAttributeMethodsToModelClass(ModelClass, attributes)
     this.addRelationshipsToModelClass(ModelClass, modelClassData, relationships)
-    this.addCollectionCommandsToModelClass(ModelClass, collectionCommands)
+    this.addQueryCommandsToModelClass(ModelClass, collectionCommands)
     this.addMemberCommandsToModelClass(ModelClass, memberCommands)
 
     return ModelClass
@@ -61,7 +61,7 @@ export default class ApiMakerModelRecipesModelLoader {
     }
   }
 
-  addCollectionCommandsToModelClass (ModelClass, collectionCommands) {
+  addQueryCommandsToModelClass (ModelClass, collectionCommands) {
     for (const collectionCommandName in collectionCommands) {
       const methodName = inflection.camelize(collectionCommandName, true)
 

package/src/{models-response-reader.mjs → models-response-reader.js}

@@ -1,7 +1,6 @@
-import {digg} from "diggerize"
-import inflection from "inflection"
-import modelClassRequire from "./model-class-require.mjs"
-import Preloaded from "./preloaded.mjs"
+import * as inflection from "inflection"
+import modelClassRequire from "./model-class-require"
+import Preloaded from "./preloaded"
 
 export default class ModelsResponseReader {
   static first (response) {

package/src/models.js

@@ -0,0 +1,7 @@
+import modelRecipes from "model-recipes.json"
+import ModelRecipesLoader from "./model-recipes-loader"
+
+const loader = new ModelRecipesLoader({recipes: modelRecipes})
+const result = loader.load()
+
+export default result

package/src/{models.mjs.erb → models.js.erb}

@@ -1,16 +1,19 @@
 /* rails-erb-loader-dependencies api_maker/resources/ models/ */
 
 import {digg} from "diggerize"
-import ModelRecipesLoader from "./model-recipes-loader.mjs"
+import ModelRecipesLoader from "@kaspernj/api-maker/build/model-recipes-loader"
+import modelRecipes from "./model-recipes.json"
 
-const modelRecipes = <%= ApiMaker::ModelClassesJavaScriptGeneratorService.execute!.to_json %>
 const loader = new ModelRecipesLoader({recipes: modelRecipes})
 const result = loader.load()
 
 <% model_class_names = [] %>
 <% ApiMaker::ModelClassesJavaScriptGeneratorService.new.resources.each do |resource| %>
   <% model_class_names << resource.short_name %>
-  const <%= resource.short_name %> = digg(result, "<%= resource.short_name %>")
+
+  const <%= resource.short_name %>ModelClass = digg(result, "<%= resource.short_name %>")
+
+  class <%= resource.short_name %> extends <%= resource.short_name %>ModelClass {}
 <% end %>
 
 export {<%= model_class_names.join(", ") %>}

package/src/{money-formatter.mjs → money-formatter.js}

@@ -1,3 +1,4 @@
+import I18nOnSteroids from "i18n-on-steroids"
 import Money from "js-money"
 import formatNumber from "format-number"
 import replaceall from "replaceall"
@@ -12,9 +13,9 @@ export default class MoneyFormatter {
   }
 
   static stringToFloat (moneyString) {
-    let unformatted = replaceall(I18n.t("number.currency.format.delimiter"), "", moneyString)
+    let unformatted = replaceall(I18nOnSteroids.getCurrent().t("number.currency.format.delimiter"), "", moneyString)
 
-    unformatted = replaceall(I18n.t("number.currency.format.separator"), ".", unformatted)
+    unformatted = replaceall(I18nOnSteroids.getCurrent().t("number.currency.format.separator"), ".", unformatted)
     const float = parseFloat(unformatted)
 
     return float
@@ -74,8 +75,8 @@ export default class MoneyFormatter {
     const amount = (this.amount / 100).toFixed(this.decimalDigits())
     const formatOptions = {
       prefix: this.prefix(),
-      decimal: I18n.t("number.currency.format.separator"),
-      integerSeparator: I18n.t("number.currency.format.delimiter")
+      decimal: I18nOnSteroids.getCurrent().t("number.currency.format.separator"),
+      integerSeparator: I18nOnSteroids.getCurrent().t("number.currency.format.delimiter")
     }
 
     return formatNumber(formatOptions)(amount)

package/src/{params.mjs → params.js}

@@ -1,13 +1,15 @@
+import config from "./config"
 import formSerialize from "form-serialize"
 import Incorporator from "incorporator"
 import qs from "qs"
+import urlEncode from "./url-encode"
 
 export default class Params {
-  static parse () {
+  static parse() {
     return qs.parse(globalThis.location.search.substr(1))
   }
 
-  static change (given) {
+  static change(given) {
     const incorporator = new Incorporator({objects: [Params.parse(), given]})
 
     incorporator.replaceArrayIfExists(true)
@@ -15,23 +17,31 @@ export default class Params {
     return incorporator.merge()
   }
 
-  static changeParams (given, opts = {}) {
+  static withParams(params) {
+    const newParams = qs.stringify(params, {encoder: urlEncode})
+    const newPath = `${location.pathname}?${newParams}`
+
+    return newPath
+  }
+
+  static changeParams(given, opts = {}) {
     const params = Params.change(given)
-    const newParams = qs.stringify(params)
+    const newParams = qs.stringify(params, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
+    const appHistory = opts.appHistory || config.getHistory()
 
-    let appHistory = opts.appHistory || AppHistory
+    if (!appHistory) throw new Error("AppHistory hasn't been set in the ApiMaker configuration")
 
     appHistory.push(newPath)
   }
 
-  static serializeForm (form) {
+  static serializeForm(form) {
     const hash = formSerialize(form, {empty: true, hash: true})
     return Params.setUndefined(hash)
   }
 
   // This is used to set all empty values to 'undefined' which makes qs removed those elements from the query string
-  static setUndefined (given) {
+  static setUndefined(given) {
     if (Array.isArray(given)) {
       if (given.length == 0)
         return undefined

package/src/{preloaded.mjs → preloaded.js}

@@ -1,5 +1,5 @@
-import inflection from "inflection"
-import modelClassRequire from "./model-class-require.mjs"
+import * as inflection from "inflection"
+import modelClassRequire from "./model-class-require"
 
 export default class ApiMakerPreloaded {
   constructor (response) {

package/src/resize-observer.jsx

@@ -0,0 +1,10 @@
+import memo from "set-state-compare/src/memo"
+import useResizeObserver from "./use-resize-observer"
+
+const ApiMakerResizeObserver = memo(({element, onResize}) => {
+  useResizeObserver(element, onResize)
+
+  return null
+})
+
+export default ApiMakerResizeObserver

package/src/result.js

@@ -0,0 +1,13 @@
+export default class ApiMakerResult {
+  constructor (data) {
+    this.data = data
+  }
+
+  count = () => this.data.response.meta.count
+  currentPage = () => this.data.response.meta.currentPage
+  models = () => this.data.models
+  modelClass = () => this.data.collection.modelClass()
+  perPage = () => this.data.response.meta.perPage
+  totalCount = () => this.data.response.meta.totalCount
+  totalPages = () => this.data.response.meta.totalPages
+}

package/src/router/route.jsx

@@ -0,0 +1,246 @@
+import BaseComponent from "../base-component"
+import React, {createContext, useContext, useMemo} from "react"
+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 Switch, {CurrentSwitchContext} from "./switch"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+
+const CurrentPathContext = createContext([])
+const ParamsContext = createContext({})
+const RequireComponentContext = createContext(null)
+const RouteContext = createContext(null)
+const useParams = () => useContext(ParamsContext)
+
+const Route = memo(shapeComponent(class Route extends BaseComponent {
+  static defaultProps = {
+    exact: false,
+    fallback: false,
+    includeInPath: true
+  }
+
+  static propTypes = propTypesExact({
+    children: PropTypes.node,
+    component: PropTypes.string,
+    componentPath: PropTypes.string,
+    exact: PropTypes.bool.isRequired,
+    fallback: PropTypes.bool.isRequired,
+    includeInPath: PropTypes.bool.isRequired,
+    onMatch: PropTypes.func,
+    path: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
+  })
+
+  match = null
+  newParams = null
+  pathParts = null
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.router.route"})
+    const {path} = this.props
+    const {pathsMatched, switchGroup} = useContext(CurrentSwitchContext)
+    const givenRoute = useContext(RouteContext)
+    const {pathShown} = switchGroup.s
+
+    this.debug = false
+    this.log(() => ({givenRoute}))
+    this.t = t
+
+    this.requireComponent = useContext(RequireComponentContext)
+    this.currentParams = useContext(ParamsContext)
+    this.currentPath = useContext(CurrentPathContext)
+    this.switchGroup = switchGroup
+    this.routeParts = useMemo(() => givenRoute?.split("/"), [path, givenRoute])
+    this.pathParts = useMemo(() => path?.split("/"), [path])
+
+    this.newRouteParts = useMemo(
+      () => {
+        if (!path) {
+          if (givenRoute == "") {
+            return []
+          } else {
+            return this.routeParts
+          }
+        }
+
+        return this.routeParts.slice(this.pathParts.length, this.routeParts.length)
+      },
+      [givenRoute].concat(this.pathParts)
+    )
+
+    this.useStates({Component: null, componentNotFound: null, matches: false})
+
+    useMemo(() => {
+      this.loadMatches()
+    }, [givenRoute, path, pathsMatched])
+
+    useMemo(() => {
+      if (this.hasSwitchMatch() && !this.s.Component && this.s.matches) {
+        if (this.props.onMatch) {
+          this.props.onMatch()
+        }
+
+        if (!this.props.children && (this.props.path || this.props.component || this.props.componentPath)) {
+          this.loadComponent()
+        }
+      }
+    }, [path, pathShown, this.s.matches])
+  }
+
+  hasSwitchMatch = () => this.switchGroup.s.pathShown && this.switchGroup.s.pathShown == this.pathId()
+
+  pathId() {
+    const {fallback} = this.p
+    const {path} = this.props
+    let pathId
+
+    if (fallback) {
+      pathId = "[FALLBACK]"
+    } else if (!path) {
+      pathId = "[PATH-EMPTY]"
+    } else {
+      pathId = path
+    }
+
+    return pathId
+  }
+
+  loadMatches() {
+    const {newRouteParts, t} = this.tt
+    const {component, path} = this.props
+    const {exact, includeInPath, fallback} = this.p
+
+    let matches = true
+    const params = {}
+    const componentPathParts = [...this.currentPath]
+
+    this.log(() => [this.props.path, "Start generating component paths", JSON.stringify(componentPathParts)])
+
+    for (const pathPartIndex in this.pathParts) {
+      const pathPart = this.pathParts[pathPartIndex]
+      const translatedPathPart = t(`routes.${pathPart}`, {defaultValue: pathPart})
+
+      if (!(pathPartIndex in this.routeParts)) {
+        this.log(() => `No match for: ${pathPartIndex}`)
+        matches = false
+        break
+      }
+
+      const routePart = decodeURIComponent(this.routeParts[pathPartIndex])
+
+      if (pathPart.startsWith(":") && routePart) {
+        const paramName = pathPart.slice(1, pathPart.length)
+
+        params[paramName] = routePart
+      } else if (translatedPathPart != routePart) {
+        matches = false
+        break
+      } else if (!component && includeInPath) {
+        componentPathParts.push(pathPart)
+      }
+    }
+
+    if (exact && newRouteParts.length > 0) {
+      this.log(() => ["Exact and more route parts", {newRouteParts, pathParts: this.pathParts, routeParts: this.routeParts}])
+      matches = false
+    } else if (matches && path) {
+      matches = true
+    } else if (this.routeParts.length == 0) {
+      matches = true
+    }
+
+    const matchId = this.pathId()
+
+    if (!matches && fallback) {
+      matches = true
+    }
+
+    this.log(() => [this.props.path, "End generating component paths", JSON.stringify(componentPathParts), {matches}])
+
+    if (matches) {
+      if (component && includeInPath) {
+        componentPathParts.push(component)
+      }
+
+      const newParams = Object.assign({}, this.currentParams, params)
+
+      this.setInstance({componentPathParts, match: {params}, newParams})
+      this.setState({matches})
+      this.switchGroup?.setPathMatched(matchId, true)
+    } else {
+      this.setInstance({componentPathParts: null, match: null, newParams: null})
+      this.setState({matches})
+      this.switchGroup?.setPathMatched(matchId, false)
+    }
+  }
+
+  async loadComponent() {
+    const actualComponentPath = this.props.componentPath || this.tt.componentPathParts.join("/")
+    let Component
+
+    this.log(() => ["loadComponent", {componentPath: this.props.componentPath, componentPathParts: this.componentPathParts, actualComponentPath}])
+
+    try {
+      const componentImport = await this.tt.requireComponent({routeDefinition: {component: actualComponentPath}})
+
+      Component = componentImport
+    } catch (error) {
+      console.error(`Couldn't find component: ${actualComponentPath}`)
+
+      throw error
+    }
+
+    this.setState({Component, componentNotFound: !Component})
+  }
+
+  log(callbackArgs) {
+    if (this.debug) {
+      let args = callbackArgs()
+
+      if (!Array.isArray(args)) args = [args]
+
+      console.log(...args)
+    }
+  }
+
+  render() {
+    const {componentPathParts, match, newParams, newRouteParts} = this.tt
+    const {children, component, path} = this.props
+    const {Component, componentNotFound, matches} = this.s
+
+    if (!matches || !this.hasSwitchMatch()) {
+      // Route isn't matching and shouldn't be rendered at all.
+      return null
+    }
+
+    if (!Component && !children && !componentNotFound) {
+      // Route is matching but hasn't been loaded yet.
+      return (
+        <div>
+          Loading {component || this.props.componentPath || componentPathParts.join("/")}
+        </div>
+      )
+    }
+
+    if (!Component && !children && componentNotFound) {
+      // Don't render anything if the component couldn't be found.
+      return null
+    }
+
+    return (
+      <CurrentPathContext.Provider value={componentPathParts}>
+        <RouteContext.Provider value={newRouteParts.join("/")}>
+          <ParamsContext.Provider value={newParams}>
+            <Switch name={`route-group-${path}`} single={false}>
+              {Component && <Component match={match} />}
+              {children}
+            </Switch>
+          </ParamsContext.Provider>
+        </RouteContext.Provider>
+      </CurrentPathContext.Provider>
+    )
+  }
+}))
+
+export {RequireComponentContext, RouteContext, Switch, useParams}
+export default Route

package/src/router/switch.jsx

@@ -0,0 +1,76 @@
+import BaseComponent from "../base-component"
+import React, {createContext} from "react"
+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"
+
+const CurrentSwitchContext = createContext([])
+
+const Switch = memo(shapeComponent(class Switch extends BaseComponent {
+  static defaultProps = {
+    name: "[no name]",
+    single: true
+  }
+
+  static propTypes = propTypesExact({
+    children: PropTypes.node,
+    name: PropTypes.string,
+    single: PropTypes.bool
+  })
+
+  pathsMatchedKeys = []
+
+  setup() {
+    this.useStates({
+      lastUpdate: new Date(),
+      pathShown: undefined,
+      pathsMatched: {}
+    })
+  }
+
+  render() {
+    const {pathShown, pathsMatched} = this.s
+
+    return (
+      <CurrentSwitchContext.Provider value={{pathShown, pathsMatched, switchGroup: this}}>
+        {this.props.children}
+      </CurrentSwitchContext.Provider>
+    )
+  }
+
+  pathShown(pathsMatched) {
+    for (const pathMatched of this.tt.pathsMatchedKeys) {
+      const isPathMatched = pathsMatched[pathMatched]
+
+      if (isPathMatched) {
+        return pathMatched
+      }
+    }
+  }
+
+  setPathMatched(path, matched) {
+    const {pathsMatchedKeys} = this.tt
+    const {pathsMatched} = this.s
+
+    if (!path) throw new Error("No 'path' given")
+    if (pathsMatched[path] == matched) return
+
+    if (!pathsMatchedKeys.includes(path)) {
+      pathsMatchedKeys.push(path)
+    }
+
+    const newPathsMatched = {...this.s.pathsMatched}
+
+    newPathsMatched[path] = matched
+
+    this.setState({
+      lastUpdate: Math.random() + new Date().getTime(),
+      pathShown: this.pathShown(newPathsMatched),
+      pathsMatched: newPathsMatched
+    })
+  }
+}))
+
+export {CurrentSwitchContext}
+export default Switch