@kaspernj/api-maker 1.0.236 → 1.0.238

package/.eslintrc.cjs

@@ -100,6 +100,7 @@ module.exports = {
     "line-comment-position": "off",
     "lines-around-comment": "error",
     "lines-between-class-members": "off",
+    "logical-assignment-operators": "error",
     "max-classes-per-file": "off",
     "max-depth": "error",
     "max-nested-callbacks": "error",

package/package.json

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

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/serializer.mjs

@@ -16,7 +16,7 @@ export default class Serializer {
   }
 
   serializeArgument (arg) {
-    if (typeof arg == "object" && arg.constructor.apiMakerType == "BaseModel") {
+    if (typeof arg == "object" && arg && arg.constructor.apiMakerType == "BaseModel") {
       return {
         api_maker_type: "model",
         model_class_name: digg(arg.modelClassData(), "name"),
@@ -44,7 +44,7 @@ export default class Serializer {
       }
     } else if (Array.isArray(arg)) {
       return this.serializeArray(arg)
-    } else if (typeof arg == "object" && arg.constructor && arg.constructor.apiMakerType == "Collection") {
+    } else if (typeof arg == "object" && arg && arg.constructor && arg.constructor.apiMakerType == "Collection") {
       return {
         api_maker_type: "collection",
         value: this.serializeObject(arg)

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-settings.js

@@ -4,6 +4,7 @@ import {digg} from "diggerize"
 import inflection from "inflection"
 import {serialize as objectToFormData} from "object-to-formdata"
 import {TableSetting} from "../models.mjs.erb"
+import {v4 as uuidv4} from "uuid"
 
 export default class ApiMakerTableSettings {
   constructor({table}) {
@@ -62,13 +63,13 @@ export default class ApiMakerTableSettings {
   }
 
   loadTableSetting = async () => {
-    if (!TableSetting) throw new Error("TableSetting model couldn't be imported")
+    if (!TableSetting) throw new Error("TableSetting model isn't globally available")
 
     const tableSetting = await TableSetting
       .ransack({
         identifier_eq: this.identifier(),
-        user_id_eq: this.currentUser().id(),
-        user_type_eq: digg(this.currentUser().modelClassData(), "name")
+        user_id_eq: this.currentUserIdOrFallback(),
+        user_type_eq: this.currentUserTypeOrFallback()
       })
       .preload("columns")
       .first()
@@ -76,11 +77,39 @@ export default class ApiMakerTableSettings {
     return tableSetting
   }
 
+  currentUserIdOrFallback() {
+    const currentUser = this.currentUser()
+
+    if (currentUser) return currentUser.id()
+
+    return this.anonymouseUserId()
+  }
+
+  currentUserTypeOrFallback() {
+    const currentUser = this.currentUser()
+
+    if (currentUser) return digg(currentUser.modelClassData(), "name")
+
+    return null
+  }
+
+  anonymouseUserId() {
+    const variableName = `ApiMakerTableAnonymousUserId-${this.identifier()}`
+
+    if (!(variableName in localStorage)) {
+      const generatedId = uuidv4()
+
+      localStorage[variableName] = generatedId
+    }
+
+    return digg(localStorage, variableName)
+  }
+
   createInitialTableSetting = async () => {
     const tableSettingData = {
       identifier: this.identifier(),
-      user_id: this.currentUser().id(),
-      user_type: digg(this.currentUser().modelClassData(), "name"),
+      user_id: this.currentUserIdOrFallback(),
+      user_type: this.currentUserTypeOrFallback(),
       columns_attributes: {}
     }
 
@@ -116,9 +145,6 @@ export default class ApiMakerTableSettings {
   }
 
   updateTableSetting = async (tableSetting) => {
-    // This should remove columns no longer found
-    // This should update columns that have changed
-
     const columns = this.columns()
     const columnsData = {}
     const tableSettingData = {columns_attributes: columnsData}
@@ -149,7 +175,7 @@ export default class ApiMakerTableSettings {
       const column = columns.find((column) => columnIdentifier(column) == tableSettingColumn.identifier())
 
       if (column) {
-        // Update column if changed
+        // TODO: Update column if changed
       } else {
         // Removed saved columns no longer found
         const columnKey = ++columnsKeyCount
@@ -158,6 +184,7 @@ export default class ApiMakerTableSettings {
           id: tableSettingColumn.id(),
           _destroy: true
         }
+        changed = true
       }
     }
 
@@ -165,9 +192,6 @@ export default class ApiMakerTableSettings {
       const tableSettingFormData = objectToFormData({table_setting: tableSettingData})
 
       await tableSetting.saveRaw(tableSettingFormData)
-
-      // Maybe not necessary?
-      // tableSetting = this.loadTableSetting()
     }
 
     return tableSetting

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})
   }