@kaspernj/api-maker 1.0.354 → 1.0.356

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.354",
+  "version": "1.0.356",
   "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,18 +35,13 @@
     "on-location-changed": ">= 1.0.10",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": ">= 1.0.38",
+    "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/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/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

@@ -6,12 +6,13 @@ import {useCallback, useEffect} from "react"
 import useShape from "set-state-compare/src/use-shape.js"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
 
-const useCollection = (
-  {
+const useCollection = (props, cacheKeys = []) => {
+  const {
     abilities,
     collection,
     defaultParams,
     groupBy = ["id"],
+    ifCondition,
     limit,
     modelClass,
     noRecordsAvailableContent = undefined,
@@ -20,40 +21,22 @@ const useCollection = (
     pagination = false,
     preloads = [],
     queryMethod,
-    queryName,
+    queryName: initialQueryName,
     ransack,
     select = {},
     selectColumns,
     ...restProps
-  },
-  cacheKeys = []
-) => {
+  } = props
+
   if (Object.keys(restProps).length > 0) {
     throw new Error(`Unknown props given to useCollection: ${Object.keys(restProps).join(", ")}`)
   }
 
-  const s = useShape({
-    abilities,
-    collection,
-    defaultParams,
-    groupBy,
-    limit,
-    modelClass,
-    noRecordsAvailableContent,
-    noRecordsFoundContent,
-    onModelsLoaded,
-    pagination,
-    preloads,
-    queryMethod,
-    ransack,
-    select,
-    selectColumns
-  })
+  const s = useShape(props)
+  const queryName = initialQueryName || digg(modelClass.modelClassData(), "collectionKey")
 
   s.meta.queryParams = useQueryParams()
 
-  if (!queryName) queryName = digg(modelClass.modelClassData(), "collectionKey")
-
   const hasQParams = useCallback(() => {
     if (s.s.queryQName in s.m.queryParams) return true
 
@@ -106,7 +89,7 @@ const useCollection = (
   }, [])
 
   const loadQParams = useCallback(() => {
-    const qParamsToSet = hasQParams() ? qParams() : Object.assign({}, s.p.defaultParams)
+    const qParamsToSet = hasQParams() ? qParams() : Object.assign({}, s.props.defaultParams)
     const searchParams = []
 
     if (s.m.queryParams[s.s.querySName]) {
@@ -126,7 +109,7 @@ const useCollection = (
   const loadModels = useCallback(async () => {
     let query = s.p.collection?.clone() || s.p.modelClass.ransack()
 
-    if (s.p.pagination) {
+    if (s.props.pagination) {
       const page = s.m.queryParams[s.s.queryPageName] || 1
       let per = s.m.queryParams[s.s.queryPerKey] || 30
 
@@ -139,7 +122,7 @@ const useCollection = (
       query.page(page).per(per)
     }
 
-    if (s.p.groupBy) query = query.groupBy(...s.p.groupBy)
+    if (s.props.groupBy) query = query.groupBy(...s.p.groupBy)
 
     query = query
       .ransack(s.s.qParams)
@@ -148,16 +131,16 @@ const useCollection = (
       .searchKey(s.s.queryQName)
       .pageKey(s.s.queryPageName)
       .perKey(s.s.queryPerKey)
-      .preload(s.p.preloads)
-      .select(s.p.select)
 
-    if (s.p.abilities) query = query.abilities(s.p.abilities)
-    if (s.p.limit !== undefined) query = query.limit(s.p.limit)
-    if (s.p.selectColumns) query = query.selectColumns(s.p.selectColumns)
+    if (s.props.abilities) query.abilities(s.p.abilities)
+    if (s.props.limit !== undefined) query.limit(s.p.limit)
+    if (s.props.preloads) query.preload(s.p.preloads)
+    if (s.props.select) query.select(s.p.select)
+    if (s.props.selectColumns) query.selectColumns(s.p.selectColumns)
 
     let result
 
-    if (s.p.queryMethod) {
+    if (s.props.queryMethod) {
       result = await s.p.queryMethod({query})
     } else {
       result = await query.result()
@@ -165,7 +148,7 @@ const useCollection = (
 
     const models = result.models()
 
-    if (s.p.onModelsLoaded) {
+    if (s.props.onModelsLoaded) {
       s.p.onModelsLoaded({
         models,
         qParams: s.s.qParams,
@@ -231,19 +214,22 @@ const useCollection = (
       overallCount = s.s.overallCount
     }
 
-    if (models === undefined || s.p.noRecordsFoundContent === undefined) return false
+    if (models === undefined || s.props.noRecordsFoundContent === undefined) return false
 
     // Dont show noRecordsAvailableContent together with noRecordsAvailableContent
-    if (models.length === 0 && overallCount === 0 && s.p.noRecordsAvailableContent) return false
-    if (models.length === 0 && s.p.noRecordsFoundContent) return true
+    if (models.length === 0 && overallCount === 0 && s.props.noRecordsAvailableContent) return false
+    if (models.length === 0 && s.props.noRecordsFoundContent) return true
   }, [])
 
   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],
@@ -253,11 +239,15 @@ const useCollection = (
   )
 
   useEffect(() => {
-    if (s.p.noRecordsAvailableContent) loadOverallCount()
+    if (s.props.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()