@kaspernj/api-maker 1.0.146 → 1.0.149

package/.eslintrc.js

@@ -239,6 +239,7 @@ module.exports = {
     "react/jsx-newline": "off",
     "react/jsx-no-bind": "error",
     "react/jsx-no-constructed-context-values": "error",
+    "react/jsx-no-leaked-render": "error",
     "react/jsx-no-literals": "error",
     "react/jsx-no-script-url": "error",
     "react/jsx-no-useless-fragment": "error",
@@ -316,6 +317,7 @@ module.exports = {
     "jest/consistent-test-it": "off",
     "jest/prefer-called-with": "off",
     "jest/prefer-expect-assertions": "off",
+    "jest/prefer-hooks-in-order": "error",
     "jest/prefer-strict-equal": "off",
     "no-shadow": "off",
     "jest/prefer-to-have-length": "off",

package/index.js

@@ -1,87 +1 @@
-const Api = require("./src/api.cjs")
-const AttributeNotLoadedError = require("./src/attribute-not-loaded-error.cjs")
-const BaseModel = require("./src/base-model.cjs")
-const CableConnectionPool = require("./src/cable-connection-pool.cjs")
-const CanCan = require("./src/can-can.cjs")
-const CanCanLoader = require("./src/can-can-loader.jsx").default
-const Collection = require("./src/collection.cjs")
-const CommandSubmitData = require("./src/command-submit-data.cjs")
-const CommandsPool = require("./src/commands-pool.cjs")
-const CustomError = require("./src/custom-error.cjs")
-const Deserializer = require("./src/deserializer.cjs")
-const Devise = require("./src/devise.cjs")
-const ErrorLogger = require("./src/error-logger.cjs")
-const EventConnection = require("./src/event-connection").default
-const EventCreated = require("./src/event-created").default
-const EventDestroyed = require("./src/event-destroyed").default
-const EventEmitterListener = require("./src/event-emitter-listener").default
-const EventListener = require("./src/event-listener").default
-const EventModelClass = require("./src/event-model-class").default
-const EventUpdated = require("./src/event-updated").default
-const instanceOfClassName = require("./src/instance-of-class-name.cjs")
-const KeyValueStore = require("./src/key-value-store.cjs")
-const Logger = require("./src/logger.cjs")
-const ModelName = require("./src/model-name.cjs")
-const ModelPropType = require("./src/model-prop-type.cjs")
-const ModelsResponseReader = require("./src/models-response-reader.cjs")
-const MoneyFormatter = require("./src/money-formatter.cjs")
-const NotLoadedError = require("./src/not-loaded-error.cjs")
-const Params = require("./src/params.cjs")
-const Preloaded = require("./src/preloaded.cjs")
-const RoutesNative = require("./src/routes-native.cjs")
-const ResourceRoute = require("./src/resource-route.cjs")
-const ResourceRoutes = require("./src/resource-routes").default
-const Result = require("./src/result.cjs")
-const Routes = require("./src/routes.cjs")
-const Serializer = require("./src/serializer.cjs")
-const Services = require("./src/services.cjs")
-const SessionStatusUpdater = require("./src/session-status-updater.cjs")
-const SourceMapsLoader = require("./src/source-maps-loader.cjs")
-const UpdatedAttribute = require("./src/updated-attribute").default
-const ValidationError = require("./src/validation-error.cjs")
-const {ValidationErrors} = require("./src/validation-errors.cjs")
-
-export {
-  Api,
-  AttributeNotLoadedError,
-  BaseModel,
-  CableConnectionPool,
-  CanCan,
-  CanCanLoader,
-  Collection,
-  CommandSubmitData,
-  CommandsPool,
-  CustomError,
-  Deserializer,
-  Devise,
-  ErrorLogger,
-  EventConnection,
-  EventCreated,
-  EventDestroyed,
-  EventEmitterListener,
-  EventListener,
-  EventModelClass,
-  EventUpdated,
-  instanceOfClassName,
-  KeyValueStore,
-  Logger,
-  ModelName,
-  ModelPropType,
-  ModelsResponseReader,
-  MoneyFormatter,
-  NotLoadedError,
-  Params,
-  Preloaded,
-  ResourceRoute,
-  ResourceRoutes,
-  Result,
-  Routes,
-  RoutesNative,
-  Serializer,
-  Services,
-  SessionStatusUpdater,
-  SourceMapsLoader,
-  UpdatedAttribute,
-  ValidationError,
-  ValidationErrors
-}
+export {}

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.146",
+  "version": "1.0.149",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -56,7 +56,6 @@
     "prop-types": "^15.7.2",
     "prop-types-exact": ">= 1.2.0",
     "react": ">= 17.0.2",
-    "react-router-dom": ">= 5.2.0",
     "react-test-renderer": "^17.0.1",
     "source-map": "^0.7.3",
     "stacktrace-parser": ">= 0.1.9"

package/src/base-model.cjs

@@ -329,7 +329,9 @@ class BaseModel {
   static humanAttributeName (attributeName) {
     const keyName = digg(this.modelClassData(), "i18nKey")
 
-    return shared.i18n.t(`activerecord.attributes.${keyName}.${BaseModel.snakeCase(attributeName)}`, {defaultValue: attributeName})
+    if (shared.i18n) return shared.i18n.t(`activerecord.attributes.${keyName}.${BaseModel.snakeCase(attributeName)}`, {defaultValue: attributeName})
+
+    return inflection.humanize(attributeName)
   }
 
   isAttributeChanged (attributeName) {
@@ -783,7 +785,10 @@ class BaseModel {
       const relationshipClassData = relationships.find((relationship) => digg(relationship, "name") == relationshipName)
 
       if (!relationshipClassData) {
-        throw new Error(`Could not find the relation ${relationshipName} on the ${digg(this.modelClassData(), "name")} model`)
+        const modelName = digg(this.modelClassData(), "name")
+        const relationshipsList = relationships.map((relationship) => relationship.name).join(", ")
+
+        throw new Error(`Could not find the relation ${relationshipName} on the ${modelName} model: ${relationshipsList}`)
       }
 
       const relationshipType = digg(relationshipClassData, "collectionName")

package/src/can-can.cjs

@@ -33,7 +33,7 @@ module.exports = class ApiMakerCanCan {
         subjectLabel = digg(subject.modelClassData(), "name")
       }
 
-      console.error(`Ability not loaded ${subjectLabel}#${abilityToUse}`)
+      console.error(`Ability not loaded ${subjectLabel}#${abilityToUse}`, {abilities: this.abilities, ability, subject})
 
       return false
     } else {
@@ -42,7 +42,26 @@ module.exports = class ApiMakerCanCan {
   }
 
   findAbility (ability, subject) {
-    return this.abilities.find((abilityData) => digg(abilityData, "subject") == subject && digg(abilityData, "ability") == ability)
+    return this.abilities.find((abilityData) => {
+      const abilityDataSubject = digg(abilityData, "subject")
+      const abilityDataAbility = digg(abilityData, "ability")
+
+      // If actually same class
+      if (abilityDataSubject == subject && abilityDataAbility == ability) return true
+
+      // Sometimes in dev when using linking it will actually be two different but identical resource classes
+      if (
+        typeof subject == "function" &&
+        subject.modelClassData &&
+        typeof abilityDataSubject == "function" &&
+        abilityDataSubject.modelClassData &&
+        digg(subject.modelClassData(), "name") == digg(abilityDataSubject.modelClassData(), "name")
+      ) {
+        return true
+      }
+
+      return false
+    })
   }
 
   isAbilityLoaded (ability, subject) {

package/src/collection-loader.jsx

@@ -0,0 +1,226 @@
+const Collection = require("@kaspernj/api-maker/src/collection")
+const {debounce} = require("debounce")
+const {digg, digs} = require("diggerize")
+const EventCreated = require("@kaspernj/api-maker/src/event-created").default
+const EventDestroyed = require("@kaspernj/api-maker/src/event-destroyed").default
+const EventUpdated = require("@kaspernj/api-maker/src/event-updated").default
+const instanceOfClassName = require("@kaspernj/api-maker/src/instance-of-class-name")
+const Params = require("@kaspernj/api-maker/src/params")
+const PropTypes = require("prop-types")
+const React = require("react")
+
+import {LocationChanged} from "on-location-changed/src/location-changed-component"
+
+export default class CollectionLoader extends React.PureComponent {
+  static defaultProps = {
+    destroyEnabled: true,
+    noRecordsAvailableContent: undefined,
+    noRecordsFoundContent: undefined,
+    preloads: [],
+    select: {}
+  }
+
+  static propTypes = {
+    abilities: PropTypes.object,
+    appHistory: PropTypes.object,
+    className: PropTypes.string,
+    collection: PropTypes.oneOfType([
+      instanceOfClassName("ApiMakerCollection"),
+      PropTypes.instanceOf(Collection)
+    ]),
+    component: PropTypes.object,
+    defaultParams: PropTypes.object,
+    groupBy: PropTypes.array,
+    modelClass: PropTypes.func.isRequired,
+    noRecordsAvailableContent: PropTypes.func,
+    noRecordsFoundContent: PropTypes.func,
+    onModelsLoaded: PropTypes.func,
+    paginateContent: PropTypes.func,
+    preloads: PropTypes.array.isRequired,
+    queryName: PropTypes.string,
+    select: PropTypes.object,
+    selectColumns: PropTypes.object
+  }
+
+  shape = digg(this, "props", "component", "shape")
+
+  constructor (props) {
+    super(props)
+
+    let queryName = props.queryName
+
+    if (!queryName) queryName = digg(props.modelClass.modelClassData(), "collectionKey")
+
+    this.shape.set({
+      models: undefined,
+      overallCount: undefined,
+      query: undefined,
+      queryName,
+      queryQName: `${queryName}_q`,
+      queryPageName: `${queryName}_page`,
+      qParams: undefined,
+      result: undefined,
+      showNoRecordsAvailableContent: false,
+      showNoRecordsFoundContent: false
+    })
+  }
+
+  componentDidMount () {
+    this.loadQParams()
+    this.loadModels()
+
+    const {noRecordsAvailableContent} = digs(this.props, "noRecordsAvailableContent")
+
+    if (noRecordsAvailableContent) this.loadOverallCount()
+  }
+
+  async loadOverallCount () {
+    const baseQuery = this.props.collection || this.props.modelClass.all()
+    const overallCount = await baseQuery.count()
+
+    this.shape.set({
+      overallCount,
+      showNoRecordsAvailableContent: this.showNoRecordsAvailableContent({overallCount}),
+      showNoRecordsFoundContent: this.showNoRecordsFoundContent({overallCount})
+    })
+  }
+
+  loadQParams () {
+    const {queryQName} = digs(this.shape, "queryQName")
+    const params = Params.parse()
+    const qParams = Object.assign({}, this.props.defaultParams, params[queryQName])
+
+    this.shape.set({qParams})
+  }
+
+  loadModelsDebounce = debounce(this.loadModels)
+
+  loadModels = async () => {
+    const params = Params.parse()
+    const {abilities, collection, groupBy, modelClass, onModelsLoaded, preloads, select, selectColumns} = this.props
+    const {qParams, queryPageName, queryQName} = digs(this.shape, "qParams", "queryPageName", "queryQName")
+
+    let query = collection?.clone() || modelClass
+
+    if (groupBy) query = query.groupBy(groupBy)
+
+    query = query
+      .ransack(qParams)
+      .searchKey(queryQName)
+      .page(params[queryPageName])
+      .pageKey(queryPageName)
+      .preload(preloads)
+      .select(select)
+
+    if (abilities) query = query.abilities(abilities)
+    if (selectColumns) query = query.selectColumns(selectColumns)
+
+    const result = await query.result()
+    const models = result.models()
+
+    if (onModelsLoaded) {
+      onModelsLoaded({
+        models,
+        qParams,
+        query,
+        result
+      })
+    }
+
+    this.shape.set({
+      query,
+      result,
+      models: result.models(),
+      showNoRecordsAvailableContent: this.showNoRecordsAvailableContent({models}),
+      showNoRecordsFoundContent: this.showNoRecordsFoundContent({models})
+    })
+  }
+
+  onModelCreated = () => this.loadModels()
+
+  onModelDestroyed = (args) => {
+    const {models} = digs(this.shape, "models")
+
+    this.shape.set({
+      models: models.filter((model) => model.id() != args.model.id())
+    })
+  }
+
+  onModelUpdated = (args) => {
+    const {models} = digs(this.shape, "models")
+    const updatedModel = digg(args, "model")
+    const foundModel = models.find((model) => model.id() == updatedModel.id())
+
+    if (foundModel) this.loadModelsDebounce()
+  }
+
+  onLocationChanged = () => {
+    const {queryQName} = digs(this.shape, "queryQName")
+    const params = Params.parse()
+    const qParams = Object.assign({}, this.props.defaultParams, params[queryQName])
+
+    this.shape.set({qParams})
+    this.loadModels()
+  }
+
+  showNoRecordsAvailableContent (args) {
+    const {noRecordsAvailableContent} = digs(this.props, "noRecordsAvailableContent")
+    let models, overallCount
+
+    if (args.models !== undefined) {
+      models = args.models
+    } else if (this.shape.models !== undefined) {
+      models = this.shape.models
+    }
+
+    if (args.overallCount !== undefined) {
+      overallCount = args.overallCount
+    } else if (this.shape.overallCount !== undefined) {
+      overallCount = this.shape.overallCount
+    }
+
+    if (models === undefined || overallCount === undefined || noRecordsAvailableContent === undefined) return false
+    if (models.length === 0 && overallCount === 0 && noRecordsAvailableContent) return true
+  }
+
+  showNoRecordsFoundContent (args) {
+    const {noRecordsAvailableContent, noRecordsFoundContent} = digs(this.props, "noRecordsAvailableContent", "noRecordsFoundContent")
+    let models, overallCount
+
+    if (args.models !== undefined) {
+      models = args.models
+    } else if (this.shape.models !== undefined) {
+      models = this.shape.models
+    }
+
+    if (args.overallCount !== undefined) {
+      overallCount = args.overallCount
+    } else if (this.shape.overallCount !== undefined) {
+      overallCount = this.shape.overallCount
+    }
+
+    if (models === undefined || noRecordsFoundContent === undefined) return false
+
+    // Dont show noRecordsAvailableContent together with noRecordsAvailableContent
+    if (models.length === 0 && overallCount === 0 && noRecordsAvailableContent) return false
+    if (models.length === 0 && noRecordsFoundContent) return true
+  }
+
+  render() {
+    const {modelClass} = digs(this.props, "modelClass")
+    const {models} = digs(this.shape, "models")
+
+    return (
+      <>
+        <EventCreated modelClass={modelClass} onCreated={digg(this, "onModelCreated")} />
+        <LocationChanged onChanged={digg(this, "onLocationChanged")} />
+        {models && models.map((model) =>
+          <React.Fragment key={model.id()}>
+            <EventDestroyed model={model} onDestroyed={digg(this, "onModelDestroyed")} />
+            <EventUpdated model={model} onUpdated={digg(this, "onModelUpdated")} />
+          </React.Fragment>
+        )}
+      </>
+    )
+  }
+}

package/src/config.js

@@ -14,6 +14,10 @@ class ApiMakerConfig {
   setCurrenciesCollection(newCurrenciesCollection) {
     this.global.currenciesCollection = newCurrenciesCollection
   }
+
+  setHistory(history) {
+    this.global.history = history
+  }
 }
 
 const apiMakerConfig = new ApiMakerConfig()

package/src/deserializer.cjs

@@ -8,9 +8,17 @@ module.exports = class ApiMakerDeserializer {
     if (Array.isArray(object)) {
       return object.map((value) => ApiMakerDeserializer.parse(value))
     } else if (object && typeof object == "object") {
-      if (object.api_maker_type == "date" || object.api_maker_type == "time") {
+      if (object.api_maker_type == "date") {
         const date = new Date(digg(object, "value"))
 
+        date.apiMakerType = "date"
+
+        return date
+      } else if (object.api_maker_type == "time") {
+        const date = new Date(digg(object, "value"))
+
+        date.apiMakerType = "time"
+
         return date
       } else if (object.api_maker_type == "collection") {
         // Need to remove type to avoid circular error

package/src/link.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+export default class Link extends React.PureComponent {
+  render() {
+    const {to, ...restProps} = this.props
+
+    return (
+      <a href={to} {...restProps} onClick={this.onLinkClicked} />
+    )
+  }
+
+  onLinkClicked = (e) => {
+    e.preventDefault()
+
+    const history = global.apiMakerConfigGlobal?.history
+
+    if (!history) throw new Error("History hasn't been set in the API maker configuration")
+
+    history.push(this.props.to)
+  }
+}

package/src/router.jsx

@@ -0,0 +1,131 @@
+import escapeStringRegexp from "escape-string-regexp"
+import inflection from "inflection"
+import PropTypes from "prop-types"
+import React from "react"
+import {shouldComponentUpdate} from "set-state-compare"
+import {Suspense} from "react"
+
+export default class ApiMakerRouter extends React.Component {
+  static propTypes = {
+    notFoundComponent: PropTypes.elementType,
+    path: PropTypes.string.isRequired,
+    requireComponent: PropTypes.func.isRequired,
+    routes: PropTypes.object,
+    routeDefinitions: PropTypes.object
+  }
+
+  parsedRouteDefinitions = this.parseRouteDefinitions()
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return shouldComponentUpdate(this, nextProps, nextState)
+  }
+
+  findRouteParams (routeDefinition) {
+    const result = []
+    const parts = routeDefinition.path.split("/")
+
+    for (const part of parts) {
+      if (part.match(/^:([a-z_]+)$/))
+        result.push(part)
+    }
+
+    return result
+  }
+
+  parseRouteDefinitions() {
+    const Locales = require("shared/locales").default
+    const {routeDefinitions, routes} = this.props
+    const regex = /:([A-z\d_]+)/
+    const parsedRouteDefinitions = []
+
+    for (const locale of Locales.availableLocales()) {
+      for (const routeDefinition of routeDefinitions.routes) {
+        const routePathName = `${inflection.camelize(routeDefinition.name, true)}Path`
+        const params = this.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
+  }
+
+  findMatchingRoute() {
+    const path = this.props.path.replace(/[\/]+$/, "")
+
+    for (const parsedRouteDefinition of this.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}
+      }
+    }
+  }
+
+  render() {
+    const matchingRoute = this.findMatchingRoute()
+
+    if (!matchingRoute) {
+      if (this.props.notFoundComponent) {
+        const NotFoundComponent = this.props.notFoundComponent
+
+        return (
+          <Suspense fallback={<div />}>
+            <NotFoundComponent />
+          </Suspense>
+        )
+      } else {
+        return null
+      }
+    }
+
+    const Component = this.props.requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
+
+    return (
+      <Suspense fallback={<div />}>
+        <Component match={{params: matchingRoute.params}} />
+      </Suspense>
+    )
+  }
+}

package/src/resource-route.cjs

@@ -1,82 +0,0 @@
-const {digg} = require("diggerize")
-const inflection = require("inflection")
-
-module.exports = class ApiMakerResourceRoute {
-  constructor ({jsRoutes, locales, requireComponent, routeDefinition}) {
-    this.jsRoutes = jsRoutes
-    this.locales = locales
-    this.requireComponent = requireComponent
-    this.routeDefinition = routeDefinition
-
-    if (!jsRoutes) {
-      throw new Error("No 'jsRoutes' given")
-    }
-  }
-
-  routesResult () {
-    if (digg(this, "locales")) {
-      return this.withLocale()
-    } else {
-      return this.withoutLocale()
-    }
-  }
-
-  findRouteParams () {
-    const result = []
-    const parts = digg(this, "routeDefinition", "path").split("/")
-
-    for (const part of parts) {
-      if (part.match(/^:([a-z_]+)$/))
-        result.push(part)
-    }
-
-    return result
-  }
-
-  requireComponentFromCaller () {
-    return this.requireComponent({
-      routeDefinition: digg(this, "routeDefinition")
-    })
-  }
-
-  withLocale () {
-    const component = this.requireComponentFromCaller()
-    const Locales = require("shared/locales").default
-    const routes = []
-
-    for (const locale of Locales.availableLocales()) {
-      const routePathName = `${inflection.camelize(digg(this, "routeDefinition", "name"), true)}Path`
-      const params = this.findRouteParams()
-
-      params.push({locale})
-
-      if (!(routePathName in this.jsRoutes)) {
-        throw new Error(`${routePathName} not found in routes: ${Object.keys(this.jsRoutes, ", ")}`)
-      }
-
-      const path = this.jsRoutes[routePathName](...params)
-
-      routes.push({path, component})
-    }
-
-    return routes
-  }
-
-  withoutLocale () {
-    const routePathName = inflection.camelize(digg(this, "routeDefinition", "name"), true)
-    const routePathMethod = this.jsRoutes[`${routePathName}Path`]
-
-    if (!routePathMethod)
-      throw new Error(`No such route could be found: ${routePathName}`)
-
-    const path = routePathMethod.apply(null, this.findRouteParams())
-    const component = this.requireComponentFromCaller()
-
-    return [
-      {
-        path,
-        component
-      }
-    ]
-  }
-}

package/src/resource-routes.jsx

@@ -1,30 +0,0 @@
-const {digg} = require("diggerize")
-const React = require("react")
-const ResourceRoute = require("./resource-route.cjs")
-const {Route} = require("react-router-dom")
-
-export default class ApiMakerResourceRoutes {
-  static readRoutes ({jsRoutes, locales, requireComponent, routeDefinitions}) {
-    if (!routeDefinitions)
-      throw new Error("Please pass 'routeDefinitions' to this method")
-
-    const routes = []
-
-    for (const routeDefinition of routeDefinitions.routes) {
-      const resourceRoute = new ResourceRoute({jsRoutes, locales, requireComponent, routeDefinition})
-
-      for (const newRoute of resourceRoute.routesResult()) {
-        routes.push(
-          <Route
-            component={digg(newRoute, "component")}
-            exact
-            key={`route-${digg(newRoute, "path")}`}
-            path={digg(newRoute, "path")}
-          />
-        )
-      }
-    }
-
-    return routes
-  }
-}