@kaspernj/api-maker 1.0.381 → 1.0.383

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

@@ -13,6 +13,7 @@ import {useRef} from "react"
 export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
   static propTypes = propTypesExact({
     column: PropTypes.object.isRequired,
+    fixedTableLayout: PropTypes.bool.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired
   })
@@ -32,11 +33,19 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   }
 
   render() {
-    const {column, table, tableSettingColumn} = this.p
+    const {column, fixedTableLayout, table, tableSettingColumn} = this.p
     const {width} = this.s
     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
@@ -48,18 +57,26 @@ 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>
           }
-          <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
-            <Text>
-              |
-            </Text>
-          </Pressable>
+          {fixedTableLayout &&
+            <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
+              <Text>
+                |
+              </Text>
+            </Pressable>
+          }
         </View>
       </ColumnInHeadComponent>
     )

package/src/table/model-row.jsx

@@ -7,22 +7,31 @@ import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
-  static propTypes = {
+  static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
+    columnComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired,
     model: PropTypes.object.isRequired,
     liveTable: PropTypes.object.isRequired,
     preparedColumns: PropTypes.array,
+    rowComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired,
     tableSettingFullCacheKey: PropTypes.string.isRequired
-  }
+  })
 
   render() {
-    const {model} = this.p
+    const {columnComponent: ColumnComponent, model, rowComponent: RowComponent} = this.p
     const {modelClass, workplace} = this.p.liveTable.p
     const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = this.p.liveTable.props
     const {columns, currentWorkplace} = this.p.liveTable.state
@@ -34,9 +43,6 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     if (editModelPath && model.can("edit")) editPath = editModelPath(this.modelCallbackArgs)
     if (viewModelPath && model.can("show")) viewPath = viewModelPath(this.modelCallbackArgs)
 
-    const RowComponent = this.props.rowComponent
-    const ColumnComponent = this.props.columnComponent
-
     return (
       <RowComponent className={`live-table-row ${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
         {workplace &&

package/src/table/settings/column-row.jsx

@@ -0,0 +1,88 @@
+import BaseComponent from "../../base-component"
+import columnIdentifier from "../column-identifier.mjs"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {memo, useEffect, useRef} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ColumnRow extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.checked = this.p.tableSettingColumn.visible()
+    this.checkboxRef = useRef()
+
+    useEffect(() => {
+      this.updateCheckboxChecked()
+    }, [this.checked])
+  }
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const checkboxProps = {}
+
+    if (tableSettingColumn.visible() === true) {
+      checkboxProps.checked = "checked"
+    } else if (tableSettingColumn.visible() === null) {
+      checkboxProps.indeterminate = "indeterminate"
+    }
+
+    return (
+      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
+        <label style={{whiteSpace: "nowrap"}}>
+          <input
+            className="api-maker--table--setings--column-checkbox"
+            data-identifier={columnIdentifier(column)}
+            onChange={this.onCheckboxChange}
+            ref={this.checkboxRef}
+            type="checkbox"
+            {...checkboxProps}
+          />
+          {table.headerLabelForColumn(column)}
+        </label>
+      </View>
+    )
+  }
+
+  onCheckboxChange = () => {
+    const {checked} = this
+
+    if (checked === true) {
+      this.checked = null
+    } else if (checked === null) {
+      this.checked = false
+    } else {
+      this.checked = true
+    }
+
+    this.updateCheckboxChecked()
+    this.updateTableSettingColumn()
+  }
+
+  updateCheckboxChecked() {
+    const {checked} = this.tt
+
+    if (checked === true) {
+      this.checkboxRef.current.checked = true
+      this.checkboxRef.current.indeterminate = undefined
+    } else if (checked === null) {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = true
+    } else {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = undefined
+    }
+  }
+
+  async updateTableSettingColumn() {
+    const {table, tableSettingColumn} = this.p
+
+    await tableSettingColumn.update({visible: this.checked})
+    table.updateSettingsFullCacheKey()
+  }
+}))

package/src/table/settings/index.jsx

@@ -1,107 +1,53 @@
 import "./style"
+import BaseComponent from "../../base-component"
+import Checkbox from "../../utils/checkbox"
 import columnIdentifier from "../column-identifier.mjs"
-import EventListener from "../../event-listener.jsx"
+import ColumnRow from "./column-row"
+import {memo, useRef} from "react"
 import PropTypes from "prop-types"
-import React from "react"
-
-class ColumnRow extends React.PureComponent {
-  static propTypes = {
-    column: PropTypes.object.isRequired,
-    table: PropTypes.object.isRequired,
-    tableSettingColumn: PropTypes.object.isRequired
-  }
-
-  checked = this.props.tableSettingColumn.visible()
-  checkboxRef = React.createRef()
-
-  componentDidMount() {
-    this.updateCheckboxChecked()
-  }
-
-  componentDidUpdate() {
-    this.updateCheckboxChecked()
-  }
-
-  render() {
-    const {column, table, tableSettingColumn} = this.props
-    const checkboxProps = {}
-
-    if (tableSettingColumn.visible() === true) {
-      checkboxProps.checked = "checked"
-    } else if (tableSettingColumn.visible() === null) {
-      checkboxProps.indeterminate = "indeterminate"
-    }
-
-    return (
-      <div className="api-maker--table--settings--column-row">
-        <label style={{whiteSpace: "nowrap"}}>
-          <input
-            className="api-maker--table--setings--column-checkbox"
-            data-identifier={columnIdentifier(column)}
-            onChange={this.onCheckboxChange}
-            ref={this.checkboxRef}
-            type="checkbox"
-            {...checkboxProps}
-          />
-          {table.headerLabelForColumn(column)}
-        </label>
-      </div>
-    )
-  }
-
-  onCheckboxChange = () => {
-    const {checked} = this
-
-    if (checked === true) {
-      this.checked = null
-    } else if (checked === null) {
-      this.checked = false
-    } else {
-      this.checked = true
-    }
-
-    this.updateCheckboxChecked()
-    this.updateTableSettingColumn()
-  }
-
-  updateCheckboxChecked() {
-    const {checked} = this
-
-    if (checked === true) {
-      this.checkboxRef.current.checked = true
-      this.checkboxRef.current.indeterminate = undefined
-    } else if (checked === null) {
-      this.checkboxRef.current.checked = undefined
-      this.checkboxRef.current.indeterminate = true
-    } else {
-      this.checkboxRef.current.checked = undefined
-      this.checkboxRef.current.indeterminate = undefined
-    }
-  }
-
-  async updateTableSettingColumn() {
-    const {table, tableSettingColumn} = this.props
-
-    await tableSettingColumn.update({visible: this.checked})
-    table.updateSettingsFullCacheKey()
-  }
-}
-
-export default class ApiMakerTableSettings extends React.PureComponent {
-  static propTypes = {
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import useEventListener from "../../use-event-listener"
+import {Text, View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerTableSettings extends BaseComponent {
+  static propTypes = propTypesExact({
+    onFixedTableLayoutChanged: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func.isRequired,
     table: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.rootRef = useRef()
+
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
+    this.useStates({
+      fixedTableLayout: this.tableSetting().fixedTableLayout()
+    })
   }
 
-  rootRef = React.createRef()
+  tableSetting = () => this.p.table.s.tableSetting
 
   render() {
-    const {table} = this.props
-    const {preparedColumns} = table.state
+    const {table} = this.p
+    const {fixedTableLayout} = this.s
+    const {preparedColumns} = table.s
 
     return (
-      <div className="api-maker--table--settings" ref={this.rootRef}>
-        <EventListener event="mouseup" onCalled={this.onWindowMouseUp} target={window} />
+      <div className="api-maker--table--settings" ref={this.tt.rootRef}>
+        <View style={{marginBottom: 5}}>
+          <Text style={{fontSize: 16, fontWeight: "bold"}}>
+            Settings
+          </Text>
+        </View>
+        <View>
+          <Checkbox checked={fixedTableLayout} label="Fixed table" onValueChange={this.tt.onFixedTableChecked} />
+        </View>
+        <View style={{marginBottom: 5}}>
+          <Text style={{fontSize: 16, fontWeight: "bold"}}>
+            Columns
+          </Text>
+        </View>
         {preparedColumns?.map(({column, tableSettingColumn}) =>
           <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
         )}
@@ -109,9 +55,15 @@ export default class ApiMakerTableSettings extends React.PureComponent {
     )
   }
 
+  onFixedTableChecked = async (checked) => {
+    await this.tableSetting().update({fixed_table_layout: checked})
+    this.setState({fixedTableLayout: checked})
+    this.p.onFixedTableLayoutChanged(checked)
+  }
+
   onWindowMouseUp = (e) => {
-    if (this.rootRef.current && !this.rootRef.current.contains(e.target)) {
-      this.props.onRequestClose()
+    if (this.tt.rootRef.current && !this.tt.rootRef.current.contains(e.target)) {
+      this.p.onRequestClose()
     }
   }
-}
+}))

package/src/table/style.scss

@@ -1,8 +1,10 @@
 @import "./variables";
 
 .api-maker--table {
-  table {
-    table-layout: fixed;
+  &[data-fixed-table-layout="true"] {
+    table {
+      table-layout: fixed;
+    }
   }
 
   .live-table-header {

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"
@@ -99,6 +99,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
+      fixedTableLayout: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       preload: undefined,
       preparedColumns: undefined,
@@ -112,7 +113,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       tableSettingFullCacheKey: undefined
     })
 
-    useEffect(() => {
+    useMemo(() => {
       this.loadTableSetting()
 
       if (this.props.workplace) this.loadCurrentWorkplace()
@@ -163,6 +164,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
 
     this.setState({
+      fixedTableLayout: tableSetting.fixedTableLayout(),
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
@@ -219,7 +221,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()}>
+      <div className={this.className()} data-fixed-table-layout={this.s.fixedTableLayout}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -395,6 +397,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({showFilters: !this.state.showFilters})
   }
 
+  onFixedTableLayoutChanged = (fixedTableLayout) => {
+    this.setState({fixedTableLayout})
+  }
+
   onPerPageChanged = (e) => {
     const {queryName} = this.s
     const newPerPageValue = digg(e, "target", "value")
@@ -419,7 +425,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         </a>
         <span style={{position: "relative"}}>
           {showSettings &&
-            <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
+            <Settings onFixedTableLayoutChanged={this.tt.onFixedTableLayoutChanged} onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
           <a className="settings-button" href="#" onClick={this.tt.onSettingsClicked}>
             <i className="fa fa-fw fa-gear la la-fw la-gear" />
@@ -431,7 +437,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
   tableContent () {
     const {workplace} = this.p
-    const {breakpoint} = this.tt
     const {currentWorkplace, preparedColumns, tableSettingFullCacheKey} = this.s
     const {models, query} = digs(this.collection, "models", "query")
     const ColumnInHeadComponent = this.columnInHeadComponent()
@@ -463,7 +468,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         <BodyComponent>
           {models.map((model) =>
             <ModelRow
-              breakPoint={breakpoint}
               cacheKey={model.cacheKey()}
               columnComponent={this.columnComponent()}
               key={model.id()}
@@ -537,7 +541,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   rowComponent = () => this.responsiveComponent("tr")
 
   headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
-    <HeaderColumn column={column} key={tableSettingColumn.identifier()} table={this} tableSettingColumn={tableSettingColumn} />
+    <HeaderColumn
+      column={column}
+      fixedTableLayout={this.s.fixedTableLayout}
+      key={tableSettingColumn.identifier()}
+      table={this}
+      tableSettingColumn={tableSettingColumn}
+    />
   )
 
   headerClassNameForColumn (column) {

package/src/table/use-breakpoint.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useEffect} from "react"
+import {useCallback, useMemo} 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(() => {
+  useMemo(() => {
     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, 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(() => {
+  useMemo(() => {
     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, 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)
+
+  useMemo(() => {
     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, useMemo} 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(() => {
+  useMemo(() => {
     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()