@kaspernj/api-maker 1.0.382 → 1.0.384

package/package.json

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

package/src/base-model.mjs

@@ -169,7 +169,7 @@ export default class BaseModel {
     return foundReflection
   }
 
-  static _token () {
+  static _token() {
     const csrfTokenElement = document.querySelector("meta[name='csrf-token']")
 
     if (csrfTokenElement) {
@@ -177,7 +177,7 @@ export default class BaseModel {
     }
   }
 
-  constructor (args = {}) {
+  constructor(args = {}) {
     this.changes = {}
     this.newRecord = args.isNewRecord
     this.relationshipsCache = {}
@@ -197,7 +197,7 @@ export default class BaseModel {
     }
   }
 
-  assignAttributes (newAttributes) {
+  assignAttributes(newAttributes) {
     for (const key in newAttributes) {
       const newValue = newAttributes[key]
       const attributeUnderscore = inflection.underscore(key)
@@ -225,7 +225,7 @@ export default class BaseModel {
     }
   }
 
-  attributes () {
+  attributes() {
     const result = {}
 
     for (const key in this.modelData) {
@@ -239,7 +239,7 @@ export default class BaseModel {
     return result
   }
 
-  can (givenAbilityName) {
+  can(givenAbilityName) {
     const abilityName = inflection.underscore(givenAbilityName)
 
     if (!(abilityName in this.abilities)) {
@@ -249,7 +249,7 @@ export default class BaseModel {
     return this.abilities[abilityName]
   }
 
-  clone () {
+  clone() {
     const clone = new this.constructor()
 
     clone.abilities = {...this.abilities}
@@ -260,7 +260,7 @@ export default class BaseModel {
     return clone
   }
 
-  cacheKey () {
+  cacheKey() {
     if (this.isPersisted()) {
       const keyParts = [
         this.modelClassData().paramKey,
@@ -297,11 +297,11 @@ export default class BaseModel {
     return cacheKeyGenerator.cacheKey()
   }
 
-  static all () {
+  static all() {
     return this.ransack()
   }
 
-  async create (attributes, options) {
+  async create(attributes, options) {
     if (attributes) this.assignAttributes(attributes)
     const paramKey = this.modelClassData().paramKey
     const modelData = this.getAttributes()
@@ -335,7 +335,7 @@ export default class BaseModel {
     return {model: this, response}
   }
 
-  async createRaw (rawData, options = {}) {
+  async createRaw(rawData, options = {}) {
     const objectData = BaseModel._objectDataFromGivenRawData(rawData, options)
 
     let response
@@ -366,7 +366,7 @@ export default class BaseModel {
     return {model: this, response}
   }
 
-  async destroy () {
+  async destroy() {
     const response = await CommandsPool.addCommand(
       {
         args: {query_params: this.collection && this.collection.params()},
@@ -390,7 +390,7 @@ export default class BaseModel {
     }
   }
 
-  async ensureAbilities (listOfAbilities) {
+  async ensureAbilities(listOfAbilities) {
     // Populate an array with a list of abilities currently not loaded
     const abilitiesToLoad = []
 
@@ -425,16 +425,14 @@ export default class BaseModel {
     }
   }
 
-  getAttributes () {
-    return Object.assign(this.modelData, this.changes)
-  }
+  getAttributes = () => Object.assign(this.modelData, this.changes)
 
-  handleResponseError (response) {
+  handleResponseError(response) {
     BaseModel.parseValidationErrors({model: this, response})
     throw new new CustomError("Response wasn't successful", {model: this, response})
   }
 
-  identifierKey () {
+  identifierKey() {
     if (!this._identifierKey) this._identifierKey = this.isPersisted() ? this.primaryKey() : this.uniqueKey()
 
     return this._identifierKey
@@ -446,13 +444,13 @@ export default class BaseModel {
     return false
   }
 
-  isAssociationPresent (associationName) {
+  isAssociationPresent(associationName) {
     if (this.isAssociationLoaded(associationName)) return true
     if (associationName in this.relationships) return true
     return false
   }
 
-  static parseValidationErrors ({error, model, options}) {
+  static parseValidationErrors({error, model, options}) {
     if (!(error instanceof ValidationError)) return
     if (!error.args.response.validation_errors) return
 
@@ -468,7 +466,7 @@ export default class BaseModel {
     }
   }
 
-  static humanAttributeName (attributeName) {
+  static humanAttributeName(attributeName) {
     const keyName = digg(this.modelClassData(), "i18nKey")
     const i18n = Config.getI18n()
 
@@ -477,7 +475,7 @@ export default class BaseModel {
     return inflection.humanize(attributeName)
   }
 
-  isAttributeChanged (attributeName) {
+  isAttributeChanged(attributeName) {
     const attributeNameUnderscore = inflection.underscore(attributeName)
     const attributeData = this.modelClassData().attributes.find((attribute) => digg(attribute, "name") == attributeNameUnderscore)
 
@@ -500,7 +498,7 @@ export default class BaseModel {
     return changedMethod(oldValue, newValue)
   }
 
-  isChanged () {
+  isChanged() {
     const keys = Object.keys(this.changes)
 
     if (keys.length > 0) {
@@ -510,7 +508,7 @@ export default class BaseModel {
     }
   }
 
-  isNewRecord () {
+  isNewRecord() {
     if (this.newRecord !== undefined) {
       return this.newRecord
     } else if ("id" in this.modelData && this.modelData.id) {
@@ -520,15 +518,11 @@ export default class BaseModel {
     }
   }
 
-  isPersisted () {
-    return !this.isNewRecord()
-  }
+  isPersisted = () => !this.isNewRecord()
 
-  static snakeCase (string) {
-    return inflection.underscore(string)
-  }
+  static snakeCase = (string) => inflection.underscore(string)
 
-  savedChangeToAttribute (attributeName) {
+  savedChangeToAttribute(attributeName) {
     if (!this.previousModelData)
       return false
 
@@ -554,7 +548,7 @@ export default class BaseModel {
     return changedMethod(oldValue, newValue)
   }
 
-  setNewModel (model) {
+  setNewModel(model) {
     this.setNewModelData(model)
 
     for(const relationshipName in model.relationships) {
@@ -566,7 +560,7 @@ export default class BaseModel {
     }
   }
 
-  setNewModelData (model) {
+  setNewModelData(model) {
     if (!("modelData" in model)) throw new Error(`No modelData in model: ${JSON.stringify(model)}`)
 
     this.previousModelData = Object.assign({}, digg(this, "modelData"))
@@ -576,12 +570,12 @@ export default class BaseModel {
     }
   }
 
-  _isDateChanged (oldValue, newValue) {
+  _isDateChanged(oldValue, newValue) {
     if (Date.parse(oldValue) != Date.parse(newValue))
       return true
   }
 
-  _isIntegerChanged (oldValue, newValue) {
+  _isIntegerChanged(oldValue, newValue) {
     if (parseInt(oldValue, 10) != parseInt(newValue, 10))
       return true
   }
@@ -594,11 +588,9 @@ export default class BaseModel {
       return true
   }
 
-  modelClassData () {
-    return this.constructor.modelClassData()
-  }
+  modelClassData = () => this.constructor.modelClassData()
 
-  async reload () {
+  async reload() {
     const params = this.collection && this.collection.params()
     const ransackParams = {}
     ransackParams[`${this.constructor.primaryKey()}_eq`] = this.primaryKey()
@@ -624,7 +616,7 @@ export default class BaseModel {
     this.changes = {}
   }
 
-  save () {
+  save() {
     if (this.isNewRecord()) {
       return this.create()
     } else {
@@ -632,7 +624,7 @@ export default class BaseModel {
     }
   }
 
-  saveRaw (rawData, options = {}) {
+  saveRaw(rawData, options = {}) {
     if (this.isNewRecord()) {
       return this.createRaw(rawData, options)
     } else {
@@ -640,9 +632,10 @@ export default class BaseModel {
     }
   }
 
-  async update (newAttributes, options) {
-    if (newAttributes)
+  async update(newAttributes, options) {
+    if (newAttributes) {
       this.assignAttributes(newAttributes)
+    }
 
     if (Object.keys(this.changes).length == 0) {
       return {model: this}
@@ -685,7 +678,7 @@ export default class BaseModel {
     }
   }
 
-  _refreshModelFromResponse (response) {
+  _refreshModelFromResponse(response) {
     let newModel = digg(response, "model")
 
     if (Array.isArray(newModel)) newModel = newModel[0]
@@ -693,7 +686,7 @@ export default class BaseModel {
     this.setNewModel(newModel)
   }
 
-  _refreshModelDataFromResponse (response) {
+  _refreshModelDataFromResponse(response) {
     let newModel = digg(response, "model")
 
     if (Array.isArray(newModel)) newModel = newModel[0]
@@ -701,7 +694,7 @@ export default class BaseModel {
     this.setNewModelData(newModel)
   }
 
-  static _objectDataFromGivenRawData (rawData, options) {
+  static _objectDataFromGivenRawData(rawData, options) {
     if (rawData instanceof FormData || rawData.nodeName == "FORM") {
       const formData = FormDataObjectizer.formDataFromObject(rawData, options)
 
@@ -711,7 +704,7 @@ export default class BaseModel {
     return rawData
   }
 
-  async updateRaw (rawData, options = {}) {
+  async updateRaw(rawData, options = {}) {
     const objectData = BaseModel._objectDataFromGivenRawData(rawData, options)
     let response
 
@@ -743,11 +736,11 @@ export default class BaseModel {
     return {response, model: this}
   }
 
-  isValid () {
+  isValid() {
     throw new Error("Not implemented yet")
   }
 
-  async isValidOnServer () {
+  async isValidOnServer() {
     const modelData = this.getAttributes()
     const paramKey = this.modelClassData().paramKey
     const dataToUse = {}
@@ -771,7 +764,7 @@ export default class BaseModel {
 
   modelClass = () => this.constructor
 
-  preloadRelationship (relationshipName, model) {
+  preloadRelationship(relationshipName, model) {
     this.relationshipsCache[BaseModel.snakeCase(relationshipName)] = model
     this.relationships[BaseModel.snakeCase(relationshipName)] = model
   }
@@ -782,7 +775,7 @@ export default class BaseModel {
 
   markedForDestruction = () => this._markedForDestruction
 
-  uniqueKey () {
+  uniqueKey() {
     if (!this.uniqueKeyValue) {
       const min = 5000000000000000
       const max = 9007199254740991
@@ -793,7 +786,7 @@ export default class BaseModel {
     return this.uniqueKeyValue
   }
 
-  static async _callCollectionCommand (args, commandArgs) {
+  static async _callCollectionCommand(args, commandArgs) {
     const formOrDataObject = args.args
 
     try {
@@ -815,7 +808,7 @@ export default class BaseModel {
 
   _callMemberCommand = (args, commandArgs) => CommandsPool.addCommand(args, commandArgs)
 
-  static _postDataFromArgs (args) {
+  static _postDataFromArgs(args) {
     let postData
 
     if (args) {
@@ -831,13 +824,13 @@ export default class BaseModel {
     return postData
   }
 
-  readAttribute (attributeName) {
+  readAttribute(attributeName) {
     const attributeNameUnderscore = inflection.underscore(attributeName)
 
     return this.readAttributeUnderscore(attributeNameUnderscore)
   }
 
-  readAttributeUnderscore (attributeName) {
+  readAttributeUnderscore(attributeName) {
     if (attributeName in this.changes) {
       return this.changes[attributeName]
     } else if (attributeName in this.modelData) {
@@ -854,7 +847,7 @@ export default class BaseModel {
     }
   }
 
-  isAttributeLoaded (attributeName) {
+  isAttributeLoaded(attributeName) {
     const attributeNameUnderscore = inflection.underscore(attributeName)
 
     if (attributeNameUnderscore in this.changes) return true
@@ -862,7 +855,7 @@ export default class BaseModel {
     return false
   }
 
-  _isPresent (value) {
+  _isPresent(value) {
     if (!value) {
       return false
     } else if (typeof value == "string" && value.match(/^\s*$/)) {
@@ -872,7 +865,7 @@ export default class BaseModel {
     return true
   }
 
-  async _loadBelongsToReflection (args, queryArgs = {}) {
+  async _loadBelongsToReflection(args, queryArgs = {}) {
     if (args.reflectionName in this.relationships) {
       return this.relationships[args.reflectionName]
     } else if (args.reflectionName in this.relationshipsCache) {
@@ -885,7 +878,7 @@ export default class BaseModel {
     }
   }
 
-  _readBelongsToReflection ({reflectionName}) {
+  _readBelongsToReflection({reflectionName}) {
     if (reflectionName in this.relationships) {
       return this.relationships[reflectionName]
     } else if (reflectionName in this.relationshipsCache) {
@@ -900,7 +893,7 @@ export default class BaseModel {
     throw new NotLoadedError(`${modelClassName}#${reflectionName} hasn't been loaded yet. Only these were loaded: ${loadedRelationships.join(", ")}`)
   }
 
-  async _loadHasManyReflection (args, queryArgs = {}) {
+  async _loadHasManyReflection(args, queryArgs = {}) {
     if (args.reflectionName in this.relationships) {
       return this.relationships[args.reflectionName]
     } else if (args.reflectionName in this.relationshipsCache) {
@@ -915,7 +908,7 @@ export default class BaseModel {
     return models
   }
 
-  async _loadHasOneReflection (args, queryArgs = {}) {
+  async _loadHasOneReflection(args, queryArgs = {}) {
     if (args.reflectionName in this.relationships) {
       return this.relationships[args.reflectionName]
     } else if (args.reflectionName in this.relationshipsCache) {
@@ -930,7 +923,7 @@ export default class BaseModel {
     }
   }
 
-  _readHasOneReflection ({reflectionName}) {
+  _readHasOneReflection({reflectionName}) {
     if (reflectionName in this.relationships) {
       return this.relationships[reflectionName]
     } else if (reflectionName in this.relationshipsCache) {
@@ -947,14 +940,14 @@ export default class BaseModel {
     throw new NotLoadedError(`${modelClassName}#${reflectionName} hasn't been loaded yet. Only these were loaded: ${loadedRelationships.join(", ")}`)
   }
 
-  _readModelDataFromArgs (args) {
+  _readModelDataFromArgs(args) {
     this.abilities = args.data.b || {}
     this.collection = args.collection
     this.modelData = objectToUnderscore(args.data.a)
     this.preloadedRelationships = args.data.r
   }
 
-  _readPreloadedRelationships (preloaded) {
+  _readPreloadedRelationships(preloaded) {
     if (!this.preloadedRelationships) {
       return
     }

package/src/bootstrap/paginate.jsx

@@ -21,12 +21,12 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
     const {result} = this.p
 
     this.totalPages = useMemo(
-      () => Math.ceil(this.p.result.count() / this.p.result.perPage()),
-      [result.currentPage(), result.totalCount(), result.totalPages()]
+      () => Math.ceil(result.count() / result.perPage()),
+      [result.count(), result.perPage()]
     )
     this.pages = useMemo(
       () => this.calculatePages(),
-      [result.currentPage(), result.totalCount(), result.totalPages()]
+      [result.currentPage(), this.totalPages]
     )
   }
 

package/src/collection-loader.jsx

@@ -1,6 +1,6 @@
 import Collection from "./collection.mjs"
 import {digg} from "diggerize"
-import {memo, useEffect} from "react"
+import {memo, useMemo} from "react"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import useCollection from "./use-collection"
@@ -30,7 +30,7 @@ const CollectionLoader = ({component, ...restProps}) => {
 
   s.updateMeta({component, useCollectionResult})
 
-  useEffect(() => {
+  useMemo(() => {
     s.m.component.setState(s.m.useCollectionResult)
   }, cacheParts)
 

package/src/super-admin/edit-page.jsx

@@ -3,7 +3,7 @@ import {digg} from "diggerize"
 import * as inflection from "inflection"
 import {Pressable, Text, TextInput, View} from "react-native"
 import Locales from "shared/locales"
-import {memo, useCallback, useEffect, useMemo, useState} from "react"
+import {memo, useCallback, useMemo, useState} from "react"
 import useCurrentUser from "../use-current-user"
 import useModel from "../use-model"
 import useQueryParams from "on-location-changed/src/use-query-params"
@@ -16,7 +16,7 @@ const EditAttributeInput = memo(({attributeName, id, inputs, label, model, name}
   const defaultValue = useCallback(() => model[attributeName]() || "")
   const [value, setValue] = useState(() => defaultValue())
 
-  useEffect(() => {
+  useMemo(() => {
     inputs[name] = value
   }, [])
 
@@ -55,7 +55,7 @@ const EditAttributeContent = memo(({attribute, id, inputs, model, name}) => {
     inputs[name] = newValue
     setValue(newValue)
   })
-  useEffect(() => {
+  useMemo(() => {
     inputs[name] = value
   }, [])
 

package/src/super-admin/index.jsx

@@ -10,7 +10,6 @@ import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowPage from "./show-page"
 import ShowReflectionActions from "./show-reflection-actions"
 import ShowReflectionPage from "./show-reflection-page"
-import {useEffect} from "react"
 import useCanCan from "../use-can-can"
 import useCurrentUser from "../use-current-user.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
@@ -43,7 +42,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponen
     this.useStates({
       model: undefined
     })
-    useEffect(
+    useMemo(
       () => { this.loadModel() },
       [this.modelId]
     )

package/src/super-admin/layout/index.jsx

@@ -6,7 +6,7 @@ import Header from "./header"
 import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useCallback, useEffect} from "react"
+import {memo, useCallback, useMemo} from "react"
 import useCurrentUser from "../../use-current-user"
 import useShape from "set-state-compare/src/use-shape.js"
 
@@ -26,7 +26,7 @@ const ApiMakerSuperAdminLayout = ({
   const s = useShape()
   const currentUser = useCurrentUser()
 
-  useEffect(() => {
+  useMemo(() => {
     CommandsPool.current().globalRequestData.layout = "admin"
     CommandsPool.current().globalRequestData.locale = I18n.locale
   }, [I18n.locale])

package/src/table/filters/attribute-element.jsx

@@ -1,12 +1,13 @@
 import Attribute from "../../base-model/attribute"
+import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
-export default memo(shapeComponent(class AttributeElement extends ShapeComponent {
+export default memo(shapeComponent(class AttributeElement extends BaseComponent {
   static propTypes = PropTypesExact({
     active: PropTypes.bool.isRequired,
     attribute: PropTypes.instanceOf(Attribute).isRequired,
@@ -16,7 +17,7 @@ export default memo(shapeComponent(class AttributeElement extends ShapeComponent
   })
 
   render() {
-    const {active, attribute, currentModelClass} = digs(this.props, "active", "attribute", "currentModelClass")
+    const {active, attribute, currentModelClass} = this.p
     const style = {}
 
     if (active) style.fontWeight = "bold"
@@ -37,6 +38,6 @@ export default memo(shapeComponent(class AttributeElement extends ShapeComponent
   onAttributeClicked = (e) => {
     e.preventDefault()
 
-    this.props.onClick({attribute: digg(this, "props", "attribute")})
+    this.p.onClick({attribute: this.p.attribute})
   }
 }))

package/src/table/filters/filter.jsx

@@ -1,10 +1,11 @@
-import {digg, digs} from "diggerize"
+import BaseComponent from "../../base-component"
+import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
-export default memo(shapeComponent(class ApiMakerTableFilter extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFilter extends BaseComponent {
   static propTypes = PropTypesExact({
     a: PropTypes.string,
     filterIndex: PropTypes.number.isRequired,
@@ -17,7 +18,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends ShapeCompon
   })
 
   render() {
-    const {p, v} = digs(this.props, "p", "v")
+    const {p, v} = this.p
     const {a, pre, sc} = this.props
 
     return (
@@ -40,7 +41,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends ShapeCompon
   onFilterClicked = (e) => {
     e.preventDefault()
 
-    const {a, filterIndex, p, pre, v} = digs(this.props, "a", "filterIndex", "p", "pre", "v")
+    const {a, filterIndex, p, pre, v} = this.p
 
     this.props.onClick({a, filterIndex, p, pre, v})
   }
@@ -48,7 +49,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends ShapeCompon
   onRemoveFilterClicked = (e) => {
     e.preventDefault()
 
-    const {filterIndex} = digs(this.props, "filterIndex")
+    const {filterIndex} = this.p
 
     this.props.onRemoveClicked({filterIndex})
   }

package/src/table/filters/load-search-modal.jsx

@@ -1,13 +1,14 @@
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import BaseComponent from "../../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
-import {memo, useEffect} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {memo, useMemo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
 import {Pressable, Text, View} from "react-native"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
-const SearchLink = memo(shapeComponent(class SearchLink extends ShapeComponent {
+const SearchLink = memo(shapeComponent(class SearchLink extends BaseComponent {
   render() {
     const {search} = this.props
 
@@ -76,7 +77,7 @@ const SearchLink = memo(shapeComponent(class SearchLink extends ShapeComponent {
   onSearchClicked = () => this.props.onClick({search: this.props.search})
 }))
 
-export default memo(shapeComponent(class ApiMakerTableFiltersLoadSearchModal extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFiltersLoadSearchModal extends BaseComponent {
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table.filters.load_search_modal"})
 
@@ -86,7 +87,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersLoadSearchModal ext
     })
     this.setInstance({t})
 
-    useEffect(() => {
+    useMemo(() => {
       this.loadSearches()
     }, [])
   }

package/src/table/filters/reflection-element.jsx

@@ -1,11 +1,12 @@
+import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
 import Reflection from "../../base-model/reflection"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
-export default memo(shapeComponent(class ReflectionElement extends ShapeComponent {
+export default memo(shapeComponent(class ReflectionElement extends BaseComponent {
   static propTypes = PropTypesExact({
     currentModelClass: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
@@ -13,7 +14,7 @@ export default memo(shapeComponent(class ReflectionElement extends ShapeComponen
   })
 
   render() {
-    const {currentModelClass, reflection} = digs(this.props, "currentModelClass", "reflection")
+    const {currentModelClass, reflection} = this.p
 
     return (
       <div
@@ -30,6 +31,6 @@ export default memo(shapeComponent(class ReflectionElement extends ShapeComponen
   onReflectionClicked = (e) => {
     e.preventDefault()
 
-    this.props.onClick({reflection: digg(this, "props", "reflection")})
+    this.p.onClick({reflection: digg(this, "props", "reflection")})
   }
 }))

package/src/table/filters/save-search-modal.jsx

@@ -1,12 +1,13 @@
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
-import Checkbox from "@kaspernj/api-maker/src/bootstrap/checkbox"
+import BaseComponent from "../../base-component"
+import Checkbox from "../../bootstrap/checkbox"
 import {digg, digs} from "diggerize"
 import Input from "../../bootstrap/input"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {memo} from "react"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
-export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal extends BaseComponent {
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table.filters.save_search_modal"})
 
@@ -45,7 +46,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal ext
 
     const form = digg(e, "target")
     const formData = new FormData(form)
-    const {currentFilters, currentUser, onRequestClose, search} = digs(this.props, "currentFilters", "currentUser", "onRequestClose", "search")
+    const {currentFilters, currentUser, onRequestClose, search} = this.p
 
     if (search.isNewRecord()) {
       formData.append("table_search[query_params]", JSON.stringify(currentFilters()))

package/src/table/filters/scope-element.jsx

@@ -1,20 +1,22 @@
+import BaseComponent from "../../base-component"
 import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import {memo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
-export default memo(shapeComponent(class ScopeElement extends ShapeComponent {
+export default memo(shapeComponent(class ScopeElement extends BaseComponent {
   static defaultProps = {
     active: false
   }
 
   static propTypes = {
     active: PropTypes.bool.isRequired,
+    onScopeClicked: PropTypes.func.isRequired,
     scope: PropTypes.object.isRequired
   }
 
   render() {
-    const {active, scope} = this.props
+    const {active, scope} = this.p
     const style = {}
 
     if (active) style.fontWeight = "bold"
@@ -34,6 +36,6 @@ export default memo(shapeComponent(class ScopeElement extends ShapeComponent {
   onScopeClicked = (e) => {
     e.preventDefault()
 
-    this.props.onScopeClicked({scope: this.props.scope})
+    this.p.onScopeClicked({scope: this.p.scope})
   }
 }))

package/src/table/header-column.jsx

@@ -38,6 +38,14 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const {defaultParams} = table.props
     const {query} = digs(table.collection, "query")
     const ColumnInHeadComponent = table.columnInHeadComponent()
+    let sortLinkStyle
+    let textProps = {}
+
+    if (fixedTableLayout) {
+      sortLinkStyle = {whiteSpace: "nowrap", overflow: "hidden"}
+      textProps.ellipsizeMode="clip"
+      textProps.numberOfLines = 1
+    }
 
     return (
       <ColumnInHeadComponent
@@ -49,10 +57,16 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
       >
         <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
           {tableSettingColumn.hasSortKey() && query &&
-            <SortLink attribute={tableSettingColumn.sortKey()} defaultParams={defaultParams} query={query} title={table.headerLabelForColumn(column)} />
+            <SortLink
+              attribute={tableSettingColumn.sortKey()}
+              defaultParams={defaultParams}
+              query={query}
+              style={sortLinkStyle}
+              title={table.headerLabelForColumn(column)}
+            />
           }
           {(!tableSettingColumn.hasSortKey() || !query) &&
-            <Text>
+            <Text {...textProps}>
               {table.headerLabelForColumn(column)}
             </Text>
           }

package/src/table/settings/index.jsx

@@ -56,7 +56,7 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
   }
 
   onFixedTableChecked = async (checked) => {
-    await this.tableSetting().update({fixedTableLayout: true})
+    await this.tableSetting().update({fixed_table_layout: checked})
     this.setState({fixedTableLayout: checked})
     this.p.onFixedTableLayoutChanged(checked)
   }

package/src/table/table.jsx

@@ -14,7 +14,7 @@ import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {memo, useEffect, useRef} from "react"
+import React, {memo, useMemo, useRef} from "react"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
 import Settings from "./settings"
@@ -113,7 +113,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       tableSettingFullCacheKey: undefined
     })
 
-    useEffect(() => {
+    useMemo(() => {
       this.loadTableSetting()
 
       if (this.props.workplace) this.loadCurrentWorkplace()

package/src/table/use-breakpoint.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useEffect} 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()
   })
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     window.addEventListener("resize", onCalled)
 
     return () => {

package/src/table/worker-plugins-checkbox.jsx

@@ -4,7 +4,7 @@ import EventConnection from "../event-connection"
 import modelClassRequire from "../model-class-require.mjs"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useEffect} from "react"
+import {memo, useMemo} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
 const Workplace = modelClassRequire("Workplace")
@@ -21,7 +21,7 @@ export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox exte
       linkLoaded: false
     })
 
-    useEffect(() => {
+    useMemo(() => {
       this.loadCurrentLink()
     }, [])
   }

package/src/use-can-can.mjs

@@ -1,5 +1,5 @@
 import CanCan from "./can-can.mjs"
-import {useCallback, useEffect, 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"
 
@@ -26,12 +26,12 @@ const useCanCan = (abilitiesCallback, dependencies) => {
     loadAbilities()
   }, [])
 
-  useEffect(() => {
+  useMemo(() => {
     setCanCan(undefined)
     loadAbilities()
   }, dependencies)
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     CanCan.current().events.addListener("onResetAbilities", onResetAbilities)
 
     return () => {

package/src/use-collection.mjs

@@ -2,7 +2,8 @@ import debounce from "debounce"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
 import ModelEvents from "./model-events.mjs"
-import {useCallback, useEffect} 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"
 
@@ -64,7 +65,7 @@ const useCollection = (props, cacheKeys = []) => {
     showNoRecordsFoundContent: false
   })
   s.useStates({
-    qParams: qParams()
+    qParams: () => qParams()
   })
 
   let modelIdsCacheString
@@ -221,7 +222,11 @@ const useCollection = (props, cacheKeys = []) => {
     if (models.length === 0 && s.props.noRecordsFoundContent) return true
   }, [])
 
-  useEffect(
+  const onCreated = useCallback(() => {
+    loadModels()
+  }, [])
+
+  useMemo(
     () => {
       if (!("ifCondition" in s.props) || s.props.ifCondition) {
         loadQParams()
@@ -238,23 +243,15 @@ const useCollection = (props, cacheKeys = []) => {
     ].concat(cacheKeys)
   )
 
-  useEffect(() => {
-    if (s.props.noRecordsAvailableContent) loadOverallCount()
-  }, [])
-
-  const onCreated = useCallback(() => {
-    loadModels()
-  }, [])
-
-  useEffect(() => {
-    const connectCreated = ModelEvents.connectCreated(s.p.modelClass, onCreated)
-
-    return () => {
-      connectCreated.unsubscribe()
+  useMemo(() => {
+    if (s.props.noRecordsAvailableContent) {
+      loadOverallCount()
     }
   }, [])
 
-  useEffect(() => {
+  useCreatedEvent(s.p.modelClass, onCreated)
+
+  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, useEffect} 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 = {}) => {
     }
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const connectCreated = ModelEvents.connectCreated(s.p.modelClass, (...args) => onCreatedCallback(...args))
 
     return () => {

package/src/use-current-user.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo} from "react"
+import {useCallback, useMemo} from "react"
 import {camelize} from "inflection"
 import Devise from "./devise.mjs"
 import Logger from "./logger.mjs"
@@ -69,7 +69,7 @@ const useCurrentUser = (args) => {
     s.set(setStatesArgument)
   }, [])
 
-  useEffect(() => {
+  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()

package/src/use-destroyed-event.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, 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) => {
     }
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     let connectDestroyed, onConnectedListener
 
     if (model) {

package/src/use-event-emitter.mjs

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

package/src/use-event-listener.mjs

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

package/src/use-model.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, 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"
@@ -90,12 +90,12 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   }, [])
 
-  useEffect(
+  useMemo(
     () => { loadModel() },
     cacheArgs
   )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     let reloadModelCallback
 
     if (args.events) {
@@ -109,7 +109,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
     }
   }, [args.events])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     let connectUpdated
 
     if (model && args.eventUpdated) {
@@ -129,7 +129,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
     loadModel()
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     Devise.events().addListener("onDeviseSignIn", onSignedIn)
     Devise.events().addListener("onDeviseSignOut", onSignedOut)
 
@@ -147,7 +147,7 @@ const useModel = (modelClassArg, argsArg = {}) => {
     s.p.onDestroyed(forwardArgs)
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     let connectDestroyed
 
     if (model && args.onDestroyed) {

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), [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (element) {
       observer.observe(element)
     }

package/src/use-updated-event.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, 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
     }
   }, [])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     let connectUpdated, onConnectedListener
 
     if (model) {