@kaspernj/api-maker 1.0.353 → 1.0.355

package/package.json

@@ -1,22 +1,6 @@
 {
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ],
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-class-properties"
-    ]
-  },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.353",
+  "version": "1.0.355",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -36,7 +20,6 @@
     "test": "node --experimental-vm-modules ./node_modules/.bin/jest"
   },
   "dependencies": {
-    "@rails/actioncable": ">= 6.1.0",
     "clone-deep": ">= 4.0.1",
     "debounce": ">= 2.0.0",
     "diggerize": ">= 1.0.5",
@@ -52,17 +35,13 @@
     "on-location-changed": ">= 1.0.10",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": ">= 1.0.30",
+    "set-state-compare": "^1.0.41",
     "spark-md5": "^3.0.2",
     "strftime": ">= 0.10.0",
     "uniqunize": "^1.0.1",
+    "use-did-mount": "^1.0.3",
     "wake-event": ">= 0.0.1"
   },
-  "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "prop-types-exact": ">= 1.2.0",
-    "stacktrace-parser": ">= 0.1.9"
-  },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",
     "@babel/preset-env": "^7.12.11",

package/src/bootstrap/input.jsx

@@ -5,8 +5,9 @@ import InvalidFeedback from "./invalid-feedback"
 import Money from "../inputs/money"
 import PropTypes from "prop-types"
 import React from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-class ApiMakerBootstrapInput extends React.PureComponent {
+const ApiMakerBootstrapInput = shapeComponent(class ApiMakerBootstrapInput extends ShapeComponent {
   static propTypes = {
     append: PropTypes.node,
     appendText: PropTypes.node,
@@ -58,7 +59,7 @@ class ApiMakerBootstrapInput extends React.PureComponent {
     const {errors} = digs(wrapperOpts, "errors")
 
     return (
-      <div className={this.wrapperClassName()} ref="wrapper">
+      <div className={this.wrapperClassName()} ref={this.props.wrapperRef}>
         {wrapperOpts.label &&
           <label className={this.labelClassName()} htmlFor={inputProps.id}>
             {wrapperOpts.label}
@@ -73,7 +74,7 @@ class ApiMakerBootstrapInput extends React.PureComponent {
           <Money
             name={inputProps.name}
             className={this.inputClassName()}
-            ref="money"
+            ref={this.props.moneyRef}
             {...this.moneyProps()}
           />
         }
@@ -166,6 +167,6 @@ class ApiMakerBootstrapInput extends React.PureComponent {
 
     return classNames.join(" ")
   }
-}
+})
 
 export default inputWrapper(ApiMakerBootstrapInput)

package/src/collection-loader.jsx

@@ -31,9 +31,7 @@ const CollectionLoader = ({component, ...restProps}) => {
   s.updateMeta({component, useCollectionResult})
 
   useEffect(() => {
-    const componentShape = digg(s.m.component, "shape")
-
-    componentShape.set(s.m.useCollectionResult)
+    s.m.component.setState(s.m.useCollectionResult)
   }, cacheParts)
 
   return null

package/src/inputs/input.jsx

@@ -4,11 +4,12 @@ import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
 import Money from "./money"
 import PropTypes from "prop-types"
-import React from "react"
+import React, {useRef} from "react"
 import replaceall from "replaceall"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
 
-class ApiMakerInputsInput extends React.PureComponent {
+const ApiMakerInputsInput = shapeComponent(class ApiMakerInputsInput extends ShapeComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -30,9 +31,12 @@ class ApiMakerInputsInput extends React.PureComponent {
     type: PropTypes.string
   }
 
-  visibleInputRef = React.createRef()
-  state = {
-    blankInputName: digg(this, "props", "inputProps", "type") == "file"
+  setup() {
+    this.visibleInputRef = useRef()
+
+    this.useStates({
+      blankInputName: digg(this, "props", "inputProps", "type") == "file"
+    })
   }
 
   render () {
@@ -132,9 +136,7 @@ class ApiMakerInputsInput extends React.PureComponent {
     return value
   }
 
-  autoSubmit = () => {
-    new AutoSubmit({component: this}).autoSubmit()
-  }
+  autoSubmit = () => new AutoSubmit({component: this}).autoSubmit()
 
   formatValue (value) {
     const {formatValue, type} = this.props
@@ -180,9 +182,7 @@ class ApiMakerInputsInput extends React.PureComponent {
     return this.props.inputProps.name
   }
 
-  inputReference() {
-    return digg(this, "props", "inputProps", "ref")
-  }
+  inputReference = () => digg(this, "props", "inputProps", "ref")
 
   onModelUpdated = (args) => {
     const inputRef = this.inputReference()
@@ -229,7 +229,7 @@ class ApiMakerInputsInput extends React.PureComponent {
     if (this.props.inputProps.type == "file" && value == "")
       return true
   }
-}
+})
 
 export {ApiMakerInputsInput as Input}
 export default inputWrapper(ApiMakerInputsInput)

package/src/inputs/money.jsx

@@ -6,9 +6,10 @@ import * as inflection from "inflection"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React from "react"
+import React, {useRef} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class ApiMakerInputsMoney extends React.PureComponent {
+export default shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
   static defaultProps = {
     disabled: false,
     showCurrencyOptions: true
@@ -20,6 +21,7 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     className: PropTypes.string,
     currenciesCollection: PropTypes.array,
     currencyName: PropTypes.string,
+    currencyRef: PropTypes.object,
     defaultValue: PropTypes.object,
     disabled: PropTypes.bool.isRequired,
     id: PropTypes.string,
@@ -31,10 +33,17 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     placeholder: PropTypes.node,
     showCurrencyOptions: PropTypes.bool,
     small: PropTypes.bool,
-    type: PropTypes.string
+    type: PropTypes.string,
+    wholeRef: PropTypes.object
   })
 
-  inputRef = React.createRef()
+  setup() {
+    this.inputRef = useRef()
+    this.currencyRefBackup = useRef()
+    this.currencyRef = this.props.currencyRef || this.currencyRefBackup
+    this.wholeRefBackup = useRef()
+    this.wholeRef = this.props.wholeRef || this.wholeRefBackup
+  }
 
   getInputRef () {
     return this.props.inputRef || this.inputRef
@@ -58,7 +67,7 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
           onChange={digg(this, "setCents")}
           onKeyUp={digg(this, "setCents")}
           placeholder={this.props.placeholder}
-          ref="whole"
+          ref={this.wholeRef}
           type="text"
         />
         {showCurrencyOptions &&
@@ -69,7 +78,7 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
             id={this.inputCurrencyId()}
             name={this.inputCurrencyName()}
             onChange={digg(this, "onCurrencyChanged")}
-            ref="currency"
+            ref={this.currencyRef}
           >
             <option></option>
             {currenciesCollection.map((option) => (
@@ -149,19 +158,19 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     const inputElement = this.getInputRef().current
 
     if (!inputElement.value && inputElement.value == "") {
-      this.refs.whole.value = ""
+      this.wholeRef.current.value = ""
     } else {
       const cents = parseFloat(inputElement.value)
       const formatted = MoneyFormatter.fromMoney({amount: cents, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
 
-      this.refs.whole.value = formatted
+      this.wholeRef.current.value = formatted
     }
   }
 
   setCents = () => {
     const inputElement = this.getInputRef().current
 
-    let whole = MoneyFormatter.stringToFloat(this.refs.whole.value)
+    let whole = MoneyFormatter.stringToFloat(this.wholeRef.current.value)
     let cents = parseInt(whole * 100, 10)
     let oldCents = parseInt(inputElement.value, 10)
 
@@ -174,4 +183,4 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     if (this.props.onChange && oldCents != cents)
       this.props.onChange()
   }
-}
+})

package/src/super-admin/model-class-table.jsx

@@ -49,6 +49,7 @@ const ApiMakerSuperAdminModelClassTable = (props) => {
       editModelPath={hasEditConfig(modelClass) ? editModelPath : undefined}
       modelClass={modelClass}
       viewModelPath={viewModelPath}
+      workplace
       {...tableProps}
       {...restProps}
     />

package/src/table/model-row.jsx

@@ -6,10 +6,11 @@ import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
-export default class ApiMakerBootStrapLiveTableModelRow extends React.PureComponent {
+export default shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends ShapeComponent {
   static propTypes = {
     cacheKey: PropTypes.string.isRequired,
     model: PropTypes.object.isRequired,
@@ -22,7 +23,7 @@ export default class ApiMakerBootStrapLiveTableModelRow extends React.PureCompon
     const {model} = digs(this.props, "model")
     const {modelClass, workplace} = digs(this.props.liveTable.props, "modelClass", "workplace")
     const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = digg(this, "props", "liveTable", "props")
-    const {columns, currentWorkplace} = digg(this, "props", "liveTable", "shape")
+    const {columns, currentWorkplace} = digg(this, "props", "liveTable", "state")
 
     this.modelCallbackArgs = this._modelCallbackArgs() // 'model' can change so this needs to be re-cached for every render
 
@@ -187,4 +188,4 @@ export default class ApiMakerBootStrapLiveTableModelRow extends React.PureCompon
       throw new Error(`Unhandled type: ${apiMakerType}`)
     }
   }
-}
+})

package/src/table/select-calculator.mjs

@@ -10,7 +10,9 @@ class SelectCalculator {
   selects() {
     const {modelClass} = digs(this.table.props, "modelClass")
     const select = this.table.props.select || {}
-    const {preparedColumns} = digs(this.table.shape, "preparedColumns")
+    const {preparedColumns} = digs(this.table.state, "preparedColumns")
+
+    console.log({preparedColumns})
 
 
     // Ensure the primary key column is loader for the primary model class

package/src/table/settings/index.jsx

@@ -97,7 +97,7 @@ export default class ApiMakerTableSettings extends React.PureComponent {
 
   render() {
     const {table} = this.props
-    const {preparedColumns} = table.shape
+    const {preparedColumns} = table.state
 
     return (
       <div className="api-maker--table--settings" ref={this.rootRef}>

package/src/table/table-settings.js

@@ -31,7 +31,7 @@ export default class ApiMakerTableSettings {
 
   columns = () => digg(this, "table", "columnsAsArray")()
   currentUser = () => digg(this, "table", "props", "currentUser")
-  identifier = () => digg(this, "table", "shape", "identifier")
+  identifier = () => digg(this, "table", "state", "identifier")
 
   preparedColumns = (tableSetting) => {
     const columns = this.table.columnsAsArray()

package/src/table/table.jsx

@@ -2,7 +2,6 @@ import "./style"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
 import Collection from "../collection"
-import CollectionLoader from "../collection-loader"
 import columnVisible from "./column-visible.mjs"
 import debounce from "debounce"
 import {digg, digs} from "diggerize"
@@ -13,20 +12,21 @@ import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React from "react"
+import React, {useEffect, useRef} from "react"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
 import Settings from "./settings"
-import Shape from "set-state-compare/src/shape"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 import SortLink from "../bootstrap/sort-link"
 import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
-import withBreakpoint from "./with-breakpoint"
+import useBreakpoint from "./use-breakpoint"
+import useCollection from "../use-collection"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
 
-class ApiMakerTable extends React.PureComponent {
+export default shapeComponent(class ApiMakerTable extends ShapeComponent {
   static defaultProps = {
     card: true,
     destroyEnabled: true,
@@ -77,43 +77,70 @@ class ApiMakerTable extends React.PureComponent {
     workplace: PropTypes.bool.isRequired
   }
 
-  filterFormRef = React.createRef()
+  setup() {
+    const {breakpoint} = useBreakpoint()
 
-  constructor (props) {
-    super(props)
+    this.setInstance({
+      breakpoint,
+      filterFormRef: useRef()
+    })
 
-    const collectionKey = digg(props.modelClass.modelClassData(), "collectionKey")
-    let queryName = props.queryName
+    const collectionKey = digg(this.props.modelClass.modelClassData(), "collectionKey")
+    let queryName = this.props.queryName
 
     if (!queryName) queryName = collectionKey
 
     const columnsAsArray = this.columnsAsArray()
 
-    this.shape = new Shape(this, {
+    this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
       identifier: this.props.identifier || `${collectionKey}-default`,
-      models: undefined,
-      overallCount: undefined,
-      perPage: 30,
       preload: undefined,
       preparedColumns: undefined,
-      query: undefined,
       queryName,
       queryQName: `${queryName}_q`,
       queryPageName: `${queryName}_page`,
       querySName: `${queryName}_s`,
-      qParams: undefined,
-      result: undefined,
       showFilters: false,
-      showNoRecordsAvailableContent: false,
-      showNoRecordsFoundContent: false,
-      showSettings: false
+      showSettings: false,
+      tableSetting: undefined,
+      tableSettingFullCacheKey: undefined
     })
 
-    this.loadTableSetting()
+    useEffect(() => {
+      this.loadTableSetting()
+
+      if (this.props.workplace) this.loadCurrentWorkplace()
+    }, [])
+
+    let collectionReady = true
+    let select
+
+    if (!this.state.preparedColumns) {
+      collectionReady = false
+    }
+
+    if (collectionReady) {
+      select = selectCalculator({table: this})
+    }
 
-    if (this.props.workplace) this.loadCurrentWorkplace()
+    this.collection = useCollection({
+      abilities: this.abilitiesToLoad(),
+      defaultParams: this.props.defaultParams,
+      collection: this.props.collection,
+      ifCondition: collectionReady,
+      modelClass: this.props.modelClass,
+      onModelsLoaded: this.props.onModelsLoaded,
+      noRecordsAvailableContent: this.props.noRecordsAvailableContent,
+      noRecordsFoundContent: this.props.noRecordsFoundContent,
+      pagination: true,
+      preloads: this.state.preload,
+      queryMethod: this.props.queryMethod,
+      queryName,
+      select,
+      selectColumns: this.props.selectColumns
+    })
   }
 
   async loadCurrentWorkplace() {
@@ -121,7 +148,7 @@ class ApiMakerTable extends React.PureComponent {
     const result = await Workplace.current()
     const currentWorkplace = digg(result, "current", 0)
 
-    this.shape.set({currentWorkplace})
+    this.setState({currentWorkplace})
   }
 
   async loadTableSetting() {
@@ -130,7 +157,7 @@ class ApiMakerTable extends React.PureComponent {
     const tableSetting = await this.tableSettings.loadExistingOrCreateTableSettings()
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
 
-    this.shape.set({
+    this.setState({
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
@@ -138,7 +165,7 @@ class ApiMakerTable extends React.PureComponent {
     })
   }
 
-  updateSettingsFullCacheKey = () => this.shape.set({tableSettingFullCacheKey: this.shape.tableSetting.fullCacheKey()})
+  updateSettingsFullCacheKey = () => this.setState({tableSettingFullCacheKey: this.state.tableSetting.fullCacheKey()})
 
   columnsAsArray = () => {
     if (typeof this.props.columns == "function") return this.props.columns()
@@ -158,30 +185,23 @@ class ApiMakerTable extends React.PureComponent {
 
   render () {
     const {modelClass, noRecordsAvailableContent, noRecordsFoundContent} = digs(this.props, "modelClass", "noRecordsAvailableContent", "noRecordsFoundContent")
-    const {collection, currentUser, defaultParams, onModelsLoaded, queryMethod, selectColumns} = this.props
+    const {collection, currentUser} = this.props
+    const {queryName, querySName, showFilters} = digs(this.state, "queryName", "querySName", "showFilters")
     const {
+      models,
       overallCount,
-      preload,
       qParams,
       query,
-      queryName,
-      querySName,
       result,
-      models,
-      showFilters,
       showNoRecordsAvailableContent,
       showNoRecordsFoundContent
     } = digs(
-      this.shape,
+      this.collection,
+      "models",
       "overallCount",
-      "preload",
       "qParams",
       "query",
-      "queryName",
-      "querySName",
       "result",
-      "models",
-      "showFilters",
       "showNoRecordsAvailableContent",
       "showNoRecordsFoundContent"
     )
@@ -195,24 +215,6 @@ class ApiMakerTable extends React.PureComponent {
 
     return (
       <div className={this.className()}>
-        {preload !== undefined &&
-          <CollectionLoader
-            abilities={this.abilitiesToLoad()}
-            defaultParams={defaultParams}
-            collection={collection}
-            component={this}
-            modelClass={modelClass}
-            onModelsLoaded={onModelsLoaded}
-            noRecordsAvailableContent={noRecordsAvailableContent}
-            noRecordsFoundContent={noRecordsFoundContent}
-            pagination
-            preloads={preload}
-            queryMethod={queryMethod}
-            queryName={queryName}
-            select={selectCalculator({table: this})}
-            selectColumns={selectColumns}
-          />
-        }
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -268,7 +270,6 @@ class ApiMakerTable extends React.PureComponent {
       abilities,
       actionsContent,
       appHistory,
-      breakPoint,
       card,
       className,
       collection,
@@ -304,7 +305,7 @@ class ApiMakerTable extends React.PureComponent {
       workplace,
       ...restProps
     } = this.props
-    const {models, qParams, query, result} = digs(this.shape, "models", "qParams", "query", "result")
+    const {models, qParams, query, result} = digs(this.collection, "models", "qParams", "query", "result")
 
     let headerContent, PaginationComponent
 
@@ -360,7 +361,7 @@ class ApiMakerTable extends React.PureComponent {
     const {filterFormRef, submitFilter, submitFilterDebounce} = digs(this, "filterFormRef", "submitFilter", "submitFilterDebounce")
     const {filterContent, filterSubmitButton} = digs(this.props, "filterContent", "filterSubmitButton")
     const {filterSubmitLabel} = this.props
-    const {qParams} = digs(this.shape, "qParams")
+    const {qParams} = digs(this.collection, "qParams")
 
     return (
       <form className="live-table--filter-form" onSubmit={this.onFilterFormSubmit} ref={filterFormRef}>
@@ -386,11 +387,11 @@ class ApiMakerTable extends React.PureComponent {
 
   onFilterClicked = (e) => {
     e.preventDefault()
-    this.shape.set({showFilters: !this.shape.showFilters})
+    this.setState({showFilters: !this.state.showFilters})
   }
 
   onPerPageChanged = (e) => {
-    const {queryName} = digs(this.shape, "queryName")
+    const {queryName} = digs(this.state, "queryName")
     const newPerPageValue = digg(e, "target", "value")
     const perKey = `${queryName}_per`
     const paramsChange = {}
@@ -402,7 +403,8 @@ class ApiMakerTable extends React.PureComponent {
 
   tableControls() {
     const {controls} = this.props
-    const {models, qParams, query, result, showSettings} = digs(this.shape, "models", "qParams", "query", "result", "showSettings")
+    const {showSettings} = digs(this.state, "showSettings")
+    const {models, qParams, query, result} = digs(this.collection, "models", "qParams", "query", "result")
 
     return (
       <>
@@ -423,21 +425,10 @@ class ApiMakerTable extends React.PureComponent {
   }
 
   tableContent () {
-    const {breakPoint, workplace} = digs(this.props, "breakPoint", "workplace")
-    const {
-      currentWorkplace,
-      models,
-      preparedColumns,
-      query,
-      tableSettingFullCacheKey
-    } = digs(
-      this.shape,
-      "currentWorkplace",
-      "models",
-      "preparedColumns",
-      "query",
-      "tableSettingFullCacheKey"
-    )
+    const {workplace} = digs(this.props, "workplace")
+    const {breakpoint} = digs(this, "breakpoint")
+    const {currentWorkplace, preparedColumns, tableSettingFullCacheKey} = digs(this.state, "currentWorkplace", "preparedColumns", "tableSettingFullCacheKey")
+    const {models, query} = digs(this.collection, "models", "query")
     const ColumnInHeadComponent = this.columnInHeadComponent()
     const RowComponent = this.rowComponent()
 
@@ -467,7 +458,7 @@ class ApiMakerTable extends React.PureComponent {
         <BodyComponent>
           {models.map((model) =>
             <ModelRow
-              breakPoint={breakPoint}
+              breakPoint={breakpoint}
               cacheKey={model.cacheKey()}
               columnComponent={this.columnComponent()}
               key={model.id()}
@@ -484,7 +475,7 @@ class ApiMakerTable extends React.PureComponent {
   }
 
   tableFooter() {
-    const {result} = digs(this.shape, "result")
+    const {result} = digs(this.collection, "result")
     const currentPage = result.currentPage()
     const totalCount = result.totalCount()
     const perPage = result.perPage()
@@ -530,7 +521,7 @@ class ApiMakerTable extends React.PureComponent {
   }
 
   isSmallScreen() {
-    if (this.props.breakPoint == "xs" || this.props.breakPoint == "sm") return true
+    if (this.props.breakpoint == "xs" || this.props.breakpoint == "sm") return true
 
     return false
   }
@@ -542,7 +533,8 @@ class ApiMakerTable extends React.PureComponent {
 
   headersContentFromColumns () {
     const {defaultParams} = this.props
-    const {preparedColumns, query} = digs(this.shape, "preparedColumns", "query")
+    const {preparedColumns} = digs(this.state, "preparedColumns")
+    const {query} = digs(this.collection, "query")
     const ColumnInHeadComponent = this.columnInHeadComponent()
 
     return preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
@@ -604,14 +596,14 @@ class ApiMakerTable extends React.PureComponent {
     this.submitFilter()
   }
 
-  onRequestCloseSettings = () => this.shape.set({showSettings: false})
+  onRequestCloseSettings = () => this.setState({showSettings: false})
 
   onSettingsClicked = (e) => {
     e.preventDefault()
 
-    const {showSettings} = digs(this.shape, "showSettings")
+    const {showSettings} = digs(this.state, "showSettings")
 
-    this.shape.set({showSettings: !showSettings})
+    this.setState({showSettings: !showSettings})
   }
 
   submitFilter = () => {
@@ -619,7 +611,7 @@ class ApiMakerTable extends React.PureComponent {
     const filterForm = digg(filterFormRef, "current")
     const {appHistory} = this.props
     const qParams = Params.serializeForm(filterForm)
-    const {queryQName} = digs(this.shape, "queryQName")
+    const {queryQName} = digs(this.state, "queryQName")
     const changeParamsParams = {}
 
     changeParamsParams[queryQName] = JSON.stringify(qParams)
@@ -628,6 +620,4 @@ class ApiMakerTable extends React.PureComponent {
   }
 
   submitFilterDebounce = debounce(digg(this, "submitFilter"))
-}
-
-export default withBreakpoint(ApiMakerTable)
+})

package/src/table/use-breakpoint.mjs

@@ -0,0 +1,44 @@
+import {useCallback, useEffect} from "react"
+import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const useBreakpoint = () => {
+  const s = useShape()
+
+  const calculateBreakPoint = useCallback(() => {
+    const windowWidth = window.innerWidth
+
+    for (const breakpointData of apiMakerConfig.getBreakPoints()) {
+      const breakpoint = breakpointData[0]
+      const width = breakpointData[1]
+
+      if (windowWidth >= width) return breakpoint
+    }
+
+    throw new Error(`Couldn't not find breakpoint from window width: ${windowWidth}`)
+  }, [])
+
+  const onCalled = useCallback(() => {
+    const breakpoint = calculateBreakPoint()
+
+    if (breakpoint != s.s.breakpoint) {
+      s.set({breakpoint})
+    }
+  }, [])
+
+  s.useStates({
+    breakpoint: () => calculateBreakPoint()
+  })
+
+  useEffect(() => {
+    window.addEventListener("resize", onCalled)
+
+    return () => {
+      window.removeEventListener("resize", onCalled)
+    }
+  }, [])
+
+  return {breakpoint: s.s.breakpoint}
+}
+
+export default useBreakpoint

package/src/table/with-breakpoint.jsx

@@ -1,48 +1,9 @@
-import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
-import React from "react"
+import useBreakpoint from "./use-breakpoint"
 
-export default (WrappedComponent) => class WithBreakPoint extends React.Component {
-  state = {
-    breakPoint: this.calculateBreakPoint()
-  }
+export default (WrappedComponent) => (props) => {
+  const {breakpoint} = useBreakpoint()
 
-  calculateBreakPoint() {
-    const windowWidth = window.innerWidth
-
-    for (const breakPointData of apiMakerConfig.getBreakPoints()) {
-      const breakPoint = breakPointData[0]
-      const width = breakPointData[1]
-
-      if (windowWidth >= width) return breakPoint
-    }
-
-    throw new Error(`Couldn't not find breakPoint from window width: ${windowWidth}`)
-  }
-
-  constructor(props) {
-    super(props)
-    this.onCalled = this.onCalled.bind(this)
-  }
-
-  componentDidMount () {
-    window.addEventListener("resize", this.onCalled)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener("resize", this.onCalled)
-  }
-
-  render() {
-    return (
-      <WrappedComponent breakPoint={this.state.breakPoint} {...this.props} />
-    )
-  }
-
-  onCalled = () => {
-    const breakPoint = this.calculateBreakPoint()
-
-    if (breakPoint != this.state.breakPoint) {
-      this.setState({breakPoint})
-    }
-  }
+  return (
+    <WrappedComponent breakPoint={breakpoint} {...props} />
+  )
 }

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

@@ -1,6 +1,9 @@
+import classNames from "classnames"
 import Collection from "../collection.mjs"
 import EventConnection from "../event-connection"
+import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
+import React from "react"
 import {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
 import {useEffect, useRef} from "react"
 
@@ -17,7 +20,7 @@ const Checkbox = (props) => {
   )
 }
 
-export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends BaseComponent {
+export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.PureComponent {
   static propTypes = PropTypesExact({
     currentWorkplace: PropTypes.object,
     query: PropTypes.instanceOf(Collection)

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

@@ -1,21 +1,29 @@
+import classNames from "classnames"
+import {digg} from "diggerize"
 import EventConnection from "../event-connection"
 import modelClassRequire from "../model-class-require.mjs"
+import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
+import React, {useEffect} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
 const Workplace = modelClassRequire("Workplace")
 
-export default class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
+export default shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends ShapeComponent {
   static propTypes = PropTypesExact({
     currentWorkplace: PropTypes.object,
     model: PropTypes.object.isRequired
   })
 
-  shape = new Shape(this, {
-    checked: false
-  })
+  setup() {
+    this.useStates({
+      checked: false,
+      linkLoaded: false
+    })
 
-  componentDidMount() {
-    this.loadCurrentLink()
+    useEffect(() => {
+      this.loadCurrentLink()
+    }, [])
   }
 
   async loadCurrentLink() {
@@ -23,7 +31,7 @@ export default class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
     const response = await Workplace.linkFor({model_class: model.modelClassData().name, model_id: model.id()})
     const link = digg(response, "link")
 
-    this.shape.set({
+    this.setState({
       checked: Boolean(link),
       linkLoaded: true
     })
@@ -31,7 +39,7 @@ export default class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
 
   render() {
     const {className, currentWorkplace, model} = this.props
-    const {checked, linkLoaded} = this.shape
+    const {checked, linkLoaded} = this.state
 
     if (!linkLoaded) {
       return null
@@ -81,7 +89,7 @@ export default class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
     const modelClassName = model.modelClassData().name
 
     if (args.created[modelClassName] && args.created[modelClassName].includes(id)) {
-      this.shape.set({checked: true})
+      this.setState({checked: true})
     }
   }
 
@@ -91,7 +99,7 @@ export default class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
     const modelClassName = model.modelClassData().name
 
     if (args.destroyed[modelClassName] && args.destroyed[modelClassName].includes(id)) {
-      this.shape.set({checked: false})
+      this.setState({checked: false})
     }
   }
-}
+})

package/src/use-collection.mjs

@@ -12,6 +12,7 @@ const useCollection = (
     collection,
     defaultParams,
     groupBy = ["id"],
+    ifCondition,
     limit,
     modelClass,
     noRecordsAvailableContent = undefined,
@@ -37,6 +38,7 @@ const useCollection = (
     collection,
     defaultParams,
     groupBy,
+    ifCondition,
     limit,
     modelClass,
     noRecordsAvailableContent,
@@ -240,10 +242,13 @@ const useCollection = (
 
   useEffect(
     () => {
-      loadQParams()
-      loadModels()
+      if (!("ifCondition" in s.props) || s.props.ifCondition) {
+        loadQParams()
+        loadModels()
+      }
     },
     [
+      s.props.ifCondition,
       s.m.queryParams[s.s.queryQName],
       s.m.queryParams[s.s.queryPageName],
       s.m.queryParams[s.s.queryPerKey],
@@ -256,8 +261,12 @@ const useCollection = (
     if (s.p.noRecordsAvailableContent) loadOverallCount()
   }, [])
 
+  const onCreated = useCallback(() => {
+    loadModels()
+  }, [])
+
   useEffect(() => {
-    const connectCreated = ModelEvents.connectCreated(s.p.modelClass, loadModels)
+    const connectCreated = ModelEvents.connectCreated(s.p.modelClass, onCreated)
 
     return () => {
       connectCreated.unsubscribe()