@kaspernj/api-maker 1.0.419 → 1.0.421

package/package.json

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

package/src/collection.mjs

@@ -9,12 +9,12 @@ import Result from "./result.mjs"
 export default class ApiMakerCollection {
   static apiMakerType = "Collection"
 
-  constructor (args, queryArgs = {}) {
+  constructor(args, queryArgs = {}) {
     this.queryArgs = queryArgs
     this.args = args
   }
 
-  abilities (originalAbilities) {
+  abilities(originalAbilities) {
     const newAbilities = {}
 
     for (const originalAbilityName in originalAbilities) {
@@ -33,21 +33,21 @@ export default class ApiMakerCollection {
     return this._merge({abilities: newAbilities})
   }
 
-  accessibleBy (abilityName) {
+  accessibleBy(abilityName) {
     return this._merge({accessibleBy: inflection.underscore(abilityName)})
   }
 
-  async count () {
+  async count() {
     const response = await this.clone()._merge({count: true})._response()
 
     return digg(response, "count")
   }
 
-  distinct () {
+  distinct() {
     return this._merge({distinct: true})
   }
 
-  async each (callback) {
+  async each(callback) {
     const array = await this.toArray()
 
     for (const model in array) {
@@ -55,12 +55,24 @@ export default class ApiMakerCollection {
     }
   }
 
-  async first () {
+  except(...keys) {
+    for (const key of keys) {
+      if (key == "page") {
+        delete this.queryArgs[key]
+      } else {
+        throw new Error(`Unhandled key: ${key}`)
+      }
+    }
+
+    return this
+  }
+
+  async first() {
     const models = await this.toArray()
     return models[0]
   }
 
-  groupBy (...arrayOfTablesAndColumns) {
+  groupBy(...arrayOfTablesAndColumns) {
     const arrayOfTablesAndColumnsWithLowercaseColumns = arrayOfTablesAndColumns.map((tableAndColumn) => {
       if (Array.isArray(tableAndColumn)) {
         return [tableAndColumn[0], tableAndColumn[1].toLowerCase()]
@@ -76,18 +88,18 @@ export default class ApiMakerCollection {
     })
   }
 
-  isLoaded () {
+  isLoaded() {
     if (this.args.reflectionName in this.args.model.relationshipsCache)
       return true
 
     return false
   }
 
-  limit (amount) {
+  limit(amount) {
     return this._merge({limit: amount})
   }
 
-  preloaded () {
+  preloaded() {
     if (!(this.args.reflectionName in this.args.model.relationshipsCache)) {
       throw new Error(`${this.args.reflectionName} hasnt been loaded yet`)
     }
@@ -95,7 +107,7 @@ export default class ApiMakerCollection {
     return this.args.model.relationshipsCache[this.args.reflectionName]
   }
 
-  loaded () {
+  loaded() {
     const {model, reflectionName} = this.args
 
     if (reflectionName in model.relationships) {
@@ -135,22 +147,22 @@ export default class ApiMakerCollection {
   forEach = (...args) => this.loaded().forEach(...args)
   map = (...args) => this.loaded().map(...args)
 
-  preload (preloadValue) {
+  preload(preloadValue) {
     return this._merge({preload: preloadValue})
   }
 
-  page (page) {
+  page(page) {
     if (!page)
       page = 1
 
     return this._merge({page})
   }
 
-  pageKey (pageKey) {
+  pageKey(pageKey) {
     return this._merge({pageKey})
   }
 
-  params () {
+  params() {
     let params = {}
 
     if (this.queryArgs.params) params = incorporate(params, this.queryArgs.params)
@@ -171,20 +183,20 @@ export default class ApiMakerCollection {
     return params
   }
 
-  per (per) {
+  per(per) {
     return this._merge({per})
   }
 
-  perKey (perKey) {
+  perKey(perKey) {
     return this._merge({perKey})
   }
 
-  ransack (params) {
+  ransack(params) {
     if (params) this._merge({ransack: params})
     return this
   }
 
-  async result () {
+  async result() {
     const response = await this._response()
     const models = digg(response, "collection")
 
@@ -242,11 +254,11 @@ export default class ApiMakerCollection {
     return this._merge({selectColumns: newSelect})
   }
 
-  sort (sortBy) {
+  sort(sortBy) {
     return this._merge({ransack: {s: sortBy}})
   }
 
-  async toArray () {
+  async toArray() {
     const response = await this._response()
     const models = digg(response, "collection")
 
@@ -255,13 +267,13 @@ export default class ApiMakerCollection {
     return models
   }
 
-  modelClass () {
+  modelClass() {
     const modelName = digg(this.args.modelClass.modelClassData(), "name")
 
     return modelClassRequire(modelName)
   }
 
-  clone () {
+  clone() {
     const clonedQueryArgs = cloneDeep(this.queryArgs)
 
     return new ApiMakerCollection(this.args, clonedQueryArgs)
@@ -274,13 +286,13 @@ export default class ApiMakerCollection {
     }
   }
 
-  _merge (newQueryArgs) {
+  _merge(newQueryArgs) {
     incorporate(this.queryArgs, newQueryArgs)
 
     return this
   }
 
-  _response () {
+  _response() {
     const modelClassData = this.args.modelClass.modelClassData()
 
     return CommandsPool.addCommand(

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

@@ -17,7 +17,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
   })
 
   setup() {
-    const {breakpoint} = useBreakpoint()
+    const {name: breakpoint} = useBreakpoint()
 
     this.headerActionsRef = useRef()
     this.setInstance({breakpoint})

package/src/table/table.jsx

@@ -98,7 +98,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table"})
-    const {breakpoint} = useBreakpoint()
+    const {name: breakpoint} = useBreakpoint()
     const queryParams = useQueryParams()
 
     this.setInstance({
@@ -183,6 +183,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       select,
       selectColumns: this.props.selectColumns
     })
+    this.queryWithoutPagination = useMemo(
+      () => this.collection?.query?.clone()?.except("page"),
+      [this.collection.query]
+    )
   }
 
   async loadCurrentWorkplace() {
@@ -509,7 +513,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   listHeaderComponent = () => {
-    const {query} = digs(this.collection, "query")
+    const {queryWithoutPagination} = this.tt
 
     return (
       <Row dataSet={{class: "live-table-header-row"}} style={this.styleForRow()}>
@@ -517,7 +521,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           <Header style={this.styleForHeader({style: {width: 41}})}>
             <WorkerPluginsCheckAllCheckbox
               currentWorkplace={this.s.currentWorkplace}
-              query={query}
+              query={queryWithoutPagination}
               style={{marginHorizontal: "auto"}}
             />
           </Header>

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

@@ -1,39 +1,47 @@
+import {memo, useEffect, useMemo, useRef} from "react"
+import BaseComponent from "../base-component"
 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 {shapeComponent} from "set-state-compare/src/shape-component"
 import {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
-import {useEffect, useRef} from "react"
+import useModelEvent from "../use-model-event.js"
 
-const Checkbox = (props) => {
-  const {indeterminate, ...restProps} = props
-  const checkboxRef = useRef()
+const Checkbox = memo(shapeComponent(class Checkbox extends BaseComponent {
+  render() {
+    const {indeterminate, ...restProps} = this.props
+    const checkboxRef = useRef()
 
-  useEffect(() => {
-    checkboxRef.current.indeterminate = indeterminate
-  })
+    useEffect(() => {
+      checkboxRef.current.indeterminate = indeterminate
+    })
 
-  return (
-    <input ref={checkboxRef} type="checkbox" {...restProps} />
-  )
-}
+    return (
+      <input ref={checkboxRef} type="checkbox" {...restProps} />
+    )
+  }
+}))
 
-export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckAllCheckbox extends BaseComponent {
   static propTypes = propTypesExact({
     currentWorkplace: PropTypes.object,
     query: PropTypes.instanceOf(Collection),
     style: PropTypes.object
   })
 
-  state = {
-    checked: false,
-    indeterminate: false
-  }
+  setup() {
+    this.useStates({
+      checked: false,
+      indeterminate: false
+    })
+
+    useMemo(() => {
+      this.updateAllChecked()
+    }, [])
 
-  componentDidMount() {
-    this.updateAllChecked()
+    useModelEvent(this.props.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
+    useModelEvent(this.props.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
   }
 
   componentDidUpdate(prevProps) {
@@ -58,21 +66,17 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.Pu
   }
 
   render() {
-    const {className, currentWorkplace, style} = this.props
+    const {className, style} = this.props
     const {checked, indeterminate} = this.state
 
     return (
-      <>
-        <EventConnection event="workplace_links_created" model={currentWorkplace} onCall={this.onLinksCreated} />
-        <EventConnection event="workplace_links_destroyed" model={currentWorkplace} onCall={this.onLinksDestroyed} />
-        <Checkbox
-          checked={checked}
-          className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
-          indeterminate={indeterminate}
-          onChange={this.onCheckedChanged}
-          style={style}
-        />
-      </>
+      <Checkbox
+        checked={checked}
+        className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
+        indeterminate={indeterminate}
+        onChange={this.onCheckedChanged}
+        style={style}
+      />
     )
   }
 
@@ -104,4 +108,4 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.Pu
       this.updateAllChecked()
     }
   }
-}
+}))

package/src/use-breakpoint.mjs

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