@kaspernj/api-maker 1.0.237 → 1.0.239

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.237",
+  "version": "1.0.239",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/bootstrap/live-table.jsx

@@ -390,7 +390,7 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
     const {queryQName} = this.shape
 
     const changeParamsParams = {}
-    changeParamsParams[queryQName] = qParams
+    changeParamsParams[queryQName] = JSON.stringify(qParams)
 
     Params.changeParams(changeParamsParams, {appHistory})
   }

package/src/bootstrap/sort-link.jsx

@@ -26,12 +26,13 @@ class ApiMakerBootstrapSortLink extends PureComponent {
   }
 
   href () {
+    const qParams = this.qParams()
     const {queryParams} = digs(this.props, "queryParams")
     const {searchKey} = digs(this, "searchKey")
 
-    if (!queryParams[searchKey]) queryParams[searchKey] = {}
+    qParams.s = `${this.attribute()} ${this.sortMode()}` // eslint-disable-line id-length
 
-    queryParams[searchKey].s = `${this.attribute()} ${this.sortMode()}` // eslint-disable-line id-length
+    queryParams[searchKey] = JSON.stringify(qParams)
 
     const newParams = qs.stringify(queryParams)
     const newPath = `${location.pathname}?${newParams}`
@@ -40,9 +41,7 @@ class ApiMakerBootstrapSortLink extends PureComponent {
   }
 
   isSortedByAttribute () {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {searchKey} = digs(this, "searchKey")
-    const params = queryParams[searchKey] || {}
+    const params = this.qParams()
 
     if (params.s == this.attribute()) return true
     if (params.s == `${this.attribute()} asc`) return true
@@ -83,6 +82,15 @@ class ApiMakerBootstrapSortLink extends PureComponent {
     return Link
   }
 
+  qParams() {
+    const {queryParams} = digs(this.props, "queryParams")
+    const {searchKey} = digs(this, "searchKey")
+
+    if (searchKey in queryParams) return JSON.parse(queryParams[searchKey])
+
+    return {}
+  }
+
   sortMode () {
     if (this.isSortedByAttribute()) return "desc"
 

package/src/collection-loader.jsx

@@ -4,12 +4,11 @@ import {digg, digs} from "diggerize"
 import EventCreated from "./event-created"
 import EventDestroyed from "./event-destroyed"
 import EventUpdated from "./event-updated"
-import {LocationChanged} from "on-location-changed/src/location-changed-component"
-import Params from "./params"
 import PropTypes from "prop-types"
 import React from "react"
+import withQueryParams from "on-location-changed/src/with-query-params"
 
-export default class CollectionLoader extends React.PureComponent {
+class CollectionLoader extends React.PureComponent {
   static defaultProps = {
     destroyEnabled: true,
     groupBy: ["id"],
@@ -52,6 +51,7 @@ export default class CollectionLoader extends React.PureComponent {
       overallCount: undefined,
       query: undefined,
       queryName,
+      queryPerKey: `${queryName}_per`,
       queryQName: `${queryName}_q`,
       querySName: `${queryName}_s`,
       queryPageName: `${queryName}_page`,
@@ -72,6 +72,27 @@ export default class CollectionLoader extends React.PureComponent {
     if (noRecordsAvailableContent) this.loadOverallCount()
   }
 
+  componentDidUpdate(prevProps) {
+    const {queryPageName, queryPerKey, queryQName, querySName} = digs(this.shape, "queryPageName", "queryPerKey", "queryQName", "querySName")
+    let changed = false
+
+    // Only load models again if certain things in the URL changes
+    if (prevProps.queryParams[queryQName] != this.props.queryParams[queryQName]) {
+      changed = true
+    } else if (prevProps.queryParams[queryPageName] != this.props.queryParams[queryPageName]) {
+      changed = true
+    } else if (prevProps.queryParams[queryPerKey] != this.props.queryParams[queryPerKey]) {
+      changed = true
+    } else if (prevProps.queryParams[querySName] != this.props.queryParams[querySName]) {
+      changed = true
+    }
+
+    if (changed) {
+      this.loadQParams()
+      this.loadModels()
+    }
+  }
+
   async loadOverallCount () {
     const baseQuery = this.props.collection || this.props.modelClass.all()
     const overallCount = await baseQuery.count()
@@ -83,14 +104,32 @@ export default class CollectionLoader extends React.PureComponent {
     })
   }
 
+  hasQParams() {
+    const {queryParams} = digs(this.props, "queryParams")
+    const {queryQName} = digs(this.shape, "queryQName")
+
+    if (queryQName in queryParams) return true
+
+    return false
+  }
+
+  qParams() {
+    const {queryParams} = digs(this.props, "queryParams")
+    const {queryQName} = digs(this.shape, "queryQName")
+
+    if (this.hasQParams()) return JSON.parse(digg(queryParams, queryQName))
+
+    return {}
+  }
+
   loadQParams () {
-    const {queryQName, querySName} = digs(this.shape, "queryQName", "querySName")
-    const params = Params.parse()
-    const qParams = Object.assign({}, this.props.defaultParams, params[queryQName])
+    const {queryParams} = digs(this.props, "queryParams")
+    const {querySName} = digs(this.shape, "querySName")
+    const qParams = this.hasQParams() ? this.qParams() : Object.assign({}, this.props.defaultParams)
     const searchParams = []
 
-    if (params[querySName]) {
-      for (const rawSearchParam of params[querySName]) {
+    if (queryParams[querySName]) {
+      for (const rawSearchParam of queryParams[querySName]) {
         const parsedSearchParam = JSON.parse(rawSearchParam)
 
         searchParams.push(parsedSearchParam)
@@ -101,24 +140,24 @@ export default class CollectionLoader extends React.PureComponent {
   }
 
   loadModels = async () => {
-    const params = Params.parse()
+    const {queryParams} = digs(this.props, "queryParams")
     const {abilities, collection, groupBy, modelClass, onModelsLoaded, preloads, select, selectColumns} = this.props
     const {
       qParams,
-      queryName,
       queryPageName,
+      queryPerKey,
       queryQName,
       searchParams
     } = digs(
       this.shape,
       "qParams",
-      "queryName",
       "queryPageName",
+      "queryPerKey",
       "queryQName",
       "searchParams"
     )
-    const perKey = `${queryName}_per`
-    let per = params[perKey] || 30
+    const page = queryParams[queryPageName] || 1
+    let per = queryParams[queryPerKey] || 30
 
     if (per == "all") {
       per = 999_999_999
@@ -134,10 +173,10 @@ export default class CollectionLoader extends React.PureComponent {
       .ransack(qParams)
       .search(searchParams)
       .searchKey(queryQName)
-      .page(params[queryPageName])
+      .page(page)
       .pageKey(queryPageName)
       .per(per)
-      .perKey(perKey)
+      .perKey(queryPerKey)
       .preload(preloads)
       .select(select)
 
@@ -184,11 +223,6 @@ export default class CollectionLoader extends React.PureComponent {
     if (foundModel) this.loadModelsDebounce()
   }
 
-  onLocationChanged = () => {
-    this.loadQParams()
-    this.loadModels()
-  }
-
   showNoRecordsAvailableContent (args) {
     const {noRecordsAvailableContent} = digs(this.props, "noRecordsAvailableContent")
     let models, overallCount
@@ -239,7 +273,6 @@ export default class CollectionLoader extends React.PureComponent {
     return (
       <>
         <EventCreated modelClass={modelClass} onCreated={digg(this, "onModelCreated")} />
-        <LocationChanged onChanged={digg(this, "onLocationChanged")} />
         {models && models.map((model) =>
           <React.Fragment key={model.id()}>
             <EventDestroyed model={model} onDestroyed={digg(this, "onModelDestroyed")} />
@@ -250,3 +283,5 @@ export default class CollectionLoader extends React.PureComponent {
     )
   }
 }
+
+export default withQueryParams(CollectionLoader)

package/src/table/filters/filter-form.jsx

@@ -153,7 +153,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
                 />
               )}
               {currentModelClass.ransackableScopes().map((scope) =>
-                <div>
+                <div key={scope.name()}>
                   {scope.name()}
                 </div>
               )}

package/src/table/filters/index.jsx

@@ -57,6 +57,7 @@ class ApiMakerTableFilters extends React.PureComponent {
   static propTypes = {
     modelClass: PropTypes.func.isRequired,
     queryName: PropTypes.string.isRequired,
+    querySName: PropTypes.string.isRequired,
     queryParams: PropTypes.object.isRequired
   }
 
@@ -65,7 +66,7 @@ class ApiMakerTableFilters extends React.PureComponent {
   })
 
   render() {
-    const {modelClass} = this.props
+    const {modelClass, querySName} = digs(this.props, "modelClass", "querySName")
     const {filter} = digs(this.shape, "filter")
     const currentFilters = this.currentFilters()
 
@@ -80,7 +81,7 @@ class ApiMakerTableFilters extends React.PureComponent {
             key={`filter-${filter.filterIndex}`}
             modelClass={modelClass}
             onApplyClicked={digg(this, "onApplyClicked")}
-            querySearchName={this.querySearchName()}
+            querySearchName={querySName}
           />
         }
         {currentFilters?.map((filterData, filterIndex) =>
@@ -97,8 +98,8 @@ class ApiMakerTableFilters extends React.PureComponent {
   }
 
   currentFilters() {
-    const {queryParams} = this.props
-    const currentFilters = queryParams[this.querySearchName()] || []
+    const {queryParams, querySName} = digs(this.props, "queryParams", "querySName")
+    const currentFilters = queryParams[querySName] || []
 
     return currentFilters
   }
@@ -118,13 +119,14 @@ class ApiMakerTableFilters extends React.PureComponent {
   onApplyClicked = () => this.shape.set({filter: undefined})
 
   onRemoveClicked = ({filterIndex}) => {
-    const searchParams = Params.parse()[this.querySearchName()] || {}
+    const {querySName} = digs(this.props, "querySName")
+    const searchParams = Params.parse()[querySName] || {}
 
     delete searchParams[filterIndex]
 
     const newParams = {}
 
-    newParams[this.querySearchName()] = searchParams
+    newParams[querySName] = searchParams
 
     Params.changeParams(newParams)
 
@@ -134,7 +136,6 @@ class ApiMakerTableFilters extends React.PureComponent {
   }
 
   onFilterClicked = (args) => this.shape.set({filter: args})
-  querySearchName = () => `${this.props.queryName}_s`
 }
 
 export default withQueryParams(ApiMakerTableFilters)

package/src/table/table.jsx

@@ -96,6 +96,7 @@ class ApiMakerTable extends React.PureComponent {
       queryName,
       queryQName: `${queryName}_q`,
       queryPageName: `${queryName}_page`,
+      querySName: `${queryName}_s`,
       qParams: undefined,
       result: undefined,
       showFilters: false,
@@ -143,6 +144,7 @@ class ApiMakerTable extends React.PureComponent {
       qParams,
       query,
       queryName,
+      querySName,
       result,
       models,
       showFilters,
@@ -155,6 +157,7 @@ class ApiMakerTable extends React.PureComponent {
       "qParams",
       "query",
       "queryName",
+      "querySName",
       "result",
       "models",
       "showFilters",
@@ -189,7 +192,7 @@ class ApiMakerTable extends React.PureComponent {
           </div>
         }
         {showFilters &&
-          <Filters modelClass={modelClass} queryName={queryName} />
+          <Filters modelClass={modelClass} queryName={queryName} querySName={querySName} />
         }
         {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
           this.cardOrTable()
@@ -546,10 +549,10 @@ class ApiMakerTable extends React.PureComponent {
     const filterForm = digg(filterFormRef, "current")
     const {appHistory} = this.props
     const qParams = Params.serializeForm(filterForm)
-    const {queryQName} = this.shape
+    const {queryQName} = digs(this.shape, "queryQName")
     const changeParamsParams = {}
 
-    changeParamsParams[queryQName] = qParams
+    changeParamsParams[queryQName] = JSON.stringify(qParams)
 
     Params.changeParams(changeParamsParams, {appHistory})
   }