@kaspernj/api-maker 1.0.360 → 1.0.361

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.360",
+  "version": "1.0.361",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -50,7 +50,7 @@
     "eslint-find-rules": "^4.0.0",
     "eslint-plugin-jest": "^28.2.0",
     "eslint-plugin-react": "^7.23.2",
-    "i18n-on-steroids": "^1.0.7",
+    "i18n-on-steroids": "^1.0.12",
     "jest": "^29.0.1",
     "jsdom": "^24.0.0"
   }

package/src/bootstrap/live-table.jsx

@@ -9,11 +9,11 @@ import ModelRow from "./live-table/model-row"
 import Paginate from "./paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React from "react"
-import Shape from "set-state-compare/src/shape"
+import React, {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import SortLink from "./sort-link"
 
-export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapLiveTable extends ShapeComponent {
   static defaultProps = {
     card: true,
     destroyEnabled: true,
@@ -62,17 +62,15 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
     viewModelPath: PropTypes.func
   }
 
-  constructor (props) {
-    super(props)
-
-    let queryName = props.queryName
+  setup() {
+    let queryName = this.props.queryName
 
     if (!queryName) {
-      queryName = digg(props.modelClass.modelClassData(), "collectionKey")
+      queryName = digg(this.props.modelClass.modelClassData(), "collectionKey")
     }
 
-    this.shape = new Shape(this, {
-      columns: this.columnsAsArray(),
+    this.useStates({
+      columns: () => this.columnsAsArray(),
       models: undefined,
       overallCount: undefined,
       query: undefined,
@@ -106,7 +104,7 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
       showNoRecordsAvailableContent,
       showNoRecordsFoundContent
     } = digs(
-      this.shape,
+      this.state,
       "overallCount",
       "qParams",
       "query",
@@ -222,7 +220,7 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
       viewModelPath,
       ...restProps
     } = this.props
-    const {models, qParams, query, result} = digs(this.shape, "models", "qParams", "query", "result")
+    const {models, qParams, query, result} = digs(this.state, "models", "qParams", "query", "result")
 
     let controlsContent, headerContent, PaginationComponent
 
@@ -278,7 +276,7 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
     const {submitFilterDebounce} = digs(this, "submitFilterDebounce")
     const {filterContent, filterSubmitButton} = digs(this.props, "filterContent", "filterSubmitButton")
     const {filterSubmitLabel} = this.props
-    const {qParams} = digs(this.shape, "qParams")
+    const {qParams} = digs(this.state, "qParams")
 
     return (
       <form className="live-table--filter-form" onSubmit={this.onFilterFormSubmit} ref="filterForm">
@@ -299,13 +297,13 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
   }
 
   tableContent () {
-    const {query, models} = this.shape
+    const {query, models} = this.state
 
     return (
       <>
         <thead>
           <tr>
-            {this.shape.columns && this.headersContentFromColumns()}
+            {this.state.columns && this.headersContentFromColumns()}
             {this.props.headersContent && this.props.headersContent({query})}
             <th />
           </tr>
@@ -329,7 +327,7 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
   }
 
   headersContentFromColumns () {
-    const {columns} = digs(this.shape, "columns")
+    const {columns} = digs(this.state, "columns")
 
     return columns.map((column) =>
       <th
@@ -337,10 +335,10 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
         data-identifier={this.identifierForColumn(column)}
         key={this.identifierForColumn(column)}
       >
-        {column.sortKey && this.shape.query &&
-          <SortLink attribute={column.sortKey} query={this.shape.query} title={this.headerLabelForColumn(column)} />
+        {column.sortKey && this.state.query &&
+          <SortLink attribute={column.sortKey} query={this.state.query} title={this.headerLabelForColumn(column)} />
         }
-        {(!column.sortKey || !this.shape.query) &&
+        {(!column.sortKey || !this.state.query) &&
           this.headerLabelForColumn(column)
         }
       </th>
@@ -388,7 +386,7 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
   submitFilter = () => {
     const {appHistory} = this.props
     const qParams = Params.serializeForm(this.refs.filterForm)
-    const {queryQName} = this.shape
+    const {queryQName} = this.state
 
     const changeParamsParams = {}
     changeParamsParams[queryQName] = JSON.stringify(qParams)
@@ -397,4 +395,4 @@ export default class ApiMakerBootstrapLiveTable extends React.PureComponent {
   }
 
   submitFilterDebounce = debounce(digg(this, "submitFilter"))
-}
+}))

package/src/table/filters/index.jsx

@@ -3,11 +3,12 @@ import FilterForm from "./filter-form"
 import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
-import React from "react"
-import Shape from "set-state-compare/src/shape"
-import withQueryParams from "on-location-changed/src/with-query-params"
+import React, {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import useQueryParams from "on-location-changed/src/use-query-params"
 
-class ApiMakerTableFilter extends React.PureComponent {
+const ApiMakerTableFilter = memo(shapeComponent(class ApiMakerTableFilter extends ShapeComponent {
   static propTypes = {
     a: PropTypes.string.isRequired,
     filterIndex: PropTypes.number.isRequired,
@@ -54,27 +55,32 @@ class ApiMakerTableFilter extends React.PureComponent {
 
     this.props.onRemoveClicked({filterIndex})
   }
-}
+}))
 
-class ApiMakerTableFilters extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeComponent {
   static propTypes = {
     currentUser: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
     queryName: PropTypes.string.isRequired,
-    querySName: PropTypes.string.isRequired,
-    queryParams: PropTypes.object.isRequired
+    querySName: PropTypes.string.isRequired
   }
 
-  shape = new Shape(this, {
-    filter: undefined,
-    showLoadSearchModal: false,
-    showSaveSearchModal: false
-  })
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.filters"})
+
+    this.queryParams = useQueryParams()
+    this.t = t
+    this.useStates({
+      filter: undefined,
+      showLoadSearchModal: false,
+      showSaveSearchModal: false
+    })
+  }
 
   render() {
     const {modelClass, querySName} = digs(this.props, "modelClass", "querySName")
     const {currentUser} = this.props
-    const {filter, showLoadSearchModal, showSaveSearchModal} = digs(this.shape, "filter", "showLoadSearchModal", "showSaveSearchModal")
+    const {filter, showLoadSearchModal, showSaveSearchModal} = digs(this.state, "filter", "showLoadSearchModal", "showSaveSearchModal")
     const currentFilters = this.currentFilters()
 
     return (
@@ -97,7 +103,11 @@ class ApiMakerTableFilters extends React.PureComponent {
           />
         }
         {showSaveSearchModal &&
-          <SaveSearchModal currentFilters={digg(this, "currentFilters")} currentUser={currentUser} onRequestClose={digg(this, "onRequestCloseSaveSearchModal")} />
+          <SaveSearchModal
+            currentFilters={digg(this, "currentFilters")}
+            currentUser={currentUser}
+            onRequestClose={digg(this, "onRequestCloseSaveSearchModal")}
+          />
         }
         {currentFilters?.map((filterData, filterIndex) =>
           <ApiMakerTableFilter
@@ -110,15 +120,15 @@ class ApiMakerTableFilters extends React.PureComponent {
         )}
         <div className="filter-actions">
           <button className="add-new-filter-button" onClick={digg(this, "onAddFilterClicked")}>
-            {I18n.t("js.api_maker.table.filters.add_new_filter", {defaultValue: "Add new filter"})}
+            {this.t(".add_new_filter", {defaultValue: "Add new filter"})}
           </button>
           {currentUser &&
             <>
               <button className="save-search-button" onClick={digg(this, "onSaveSearchClicked")}>
-                {I18n.t("js.api_maker.table.filters.save_search", {defaultValue: "Save search"})}
+                {this.t(".save_search", {defaultValue: "Save search"})}
               </button>
               <button className="load-search-button" onClick={digg(this, "onLoadSearchClicked")}>
-                {I18n.t("js.api_maker.table.filters.load_search", {defaultValue: "Load search"})}
+                {this.t(".load_search", {defaultValue: "Load search"})}
               </button>
             </>
           }
@@ -128,8 +138,8 @@ class ApiMakerTableFilters extends React.PureComponent {
   }
 
   currentFilters = () => {
-    const {queryParams, querySName} = digs(this.props, "queryParams", "querySName")
-    const currentFilters = queryParams[querySName] || []
+    const {querySName} = digs(this.props, "querySName")
+    const currentFilters = this.queryParams[querySName] || []
 
     return currentFilters.map((currentFilter) => JSON.parse(currentFilter))
   }
@@ -139,19 +149,19 @@ class ApiMakerTableFilters extends React.PureComponent {
 
     const newFilterIndex = this.currentFilters().length
 
-    this.shape.set({
+    this.setState({
       filter: {
         filterIndex: newFilterIndex
       }
     })
   }
 
-  onApplyClicked = () => this.shape.set({filter: undefined})
-  onFilterClicked = (args) => this.shape.set({filter: args})
+  onApplyClicked = () => this.setState({filter: undefined})
+  onFilterClicked = (args) => this.setState({filter: args})
 
   onLoadSearchClicked = (e) => {
     e.preventDefault()
-    this.shape.set({
+    this.setState({
       showLoadSearchModal: true
     })
   }
@@ -168,25 +178,23 @@ class ApiMakerTableFilters extends React.PureComponent {
 
     Params.changeParams(newParams)
 
-    this.shape.set({
+    this.setState({
       filter: undefined
     })
   }
 
-  onRequestCloseLoadSearchModal = () => this.shape.set({showLoadSearchModal: false})
-  onRequestCloseSaveSearchModal = () => this.shape.set({showSaveSearchModal: false})
+  onRequestCloseLoadSearchModal = () => this.setState({showLoadSearchModal: false})
+  onRequestCloseSaveSearchModal = () => this.setState({showSaveSearchModal: false})
 
   onSaveSearchClicked = (e) => {
     e.preventDefault()
 
     if (this.hasAnyFilters()) {
-      this.shape.set({showSaveSearchModal: true})
+      this.setState({showSaveSearchModal: true})
     } else {
-      FlashMessage.alert(I18n.t("js.api_maker.table.filters.no_filters_has_been_set", {defaultValue: "No filters has been set"}))
+      FlashMessage.alert(this.t(".no_filters_has_been_set", {defaultValue: "No filters has been set"}))
     }
   }
 
   hasAnyFilters = () => Object.keys(this.currentFilters()).length > 0
-}
-
-export default withQueryParams(ApiMakerTableFilters)
+}))

package/src/table/filters/save-search-modal.jsx

@@ -1,51 +1,60 @@
 import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import Checkbox from "@kaspernj/api-maker/src/bootstrap/checkbox"
 import {digg} from "diggerize"
 import Input from "../../bootstrap/input"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
-import {useCallback} from "react"
+import {memo} from "react"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
-const ApiMakerTableFiltersSaveSearchModal = (props) => {
-  const {currentFilters, currentUser, onRequestClose, ...restProps} = props
-  const Modal = apiMakerConfig.getModal()
+export default memo(shapeComponent(class ApiMakerTableFiltersSaveSearchModal extends ShapeComponent {
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.filters.save_search_modal"})
 
-  const onSaveSearchSubmit = useCallback(async (e) => {
+    this.t = t
+  }
+
+  render() {
+    const {currentFilters, currentUser, onRequestClose, ...restProps} = this.props
+    const Modal = apiMakerConfig.getModal()
+
+    return (
+      <Modal onRequestClose={onRequestClose} {...restProps}>
+        <form onSubmit={this.onSaveSearchSubmit}>
+          <Input
+            id="table_search_name"
+            label={this.t(".search_name", {defaultValue: "Search name"})}
+            name="table_search[name]"
+          />
+          <Checkbox
+            id="table_search_public"
+            label={this.t(".public", {defaultValue: "Public"})}
+            name="table_search[public]"
+          />
+          <button className="save-search-submit-button">
+            {this.t(".save_search", {defaultValue: "Save search"})}
+          </button>
+        </form>
+      </Modal>
+    )
+  }
+
+  onSaveSearchSubmit = async (e) => {
     e.preventDefault()
 
     const form = digg(e, "target")
     const formData = new FormData(form)
     const tableSearch = new TableSearch()
 
-    formData.append("table_search[query_params]", JSON.stringify(currentFilters()))
-    formData.append("table_search[user_type]", digg(currentUser.modelClassData(), "className"))
-    formData.append("table_search[user_id]", currentUser.id())
+    formData.append("table_search[query_params]", JSON.stringify(this.props.currentFilters()))
+    formData.append("table_search[user_type]", digg(this.props.currentUser.modelClassData(), "className"))
+    formData.append("table_search[user_id]", this.props.currentUser.id())
 
     try {
       await tableSearch.saveRaw(formData, {form})
-      onRequestClose()
+      this.props.onRequestClose()
     } catch (error) {
       FlashMessage.errorResponse(error)
     }
-  })
-
-  return (
-    <Modal onRequestClose={onRequestClose} {...restProps}>
-      <form onSubmit={onSaveSearchSubmit}>
-        <Input
-          id="table_search_name"
-          label={I18n.t("js.api_maker.table.filters.save_search_modal.search_name", {defaultValue: "Search name"})}
-          name="table_search[name]"
-        />
-        <Checkbox
-          id="table_search_public"
-          label={I18n.t("js.api_maker.table.filters.save_search_modal.public", {defaultValue: "Public"})}
-          name="table_search[public]"
-        />
-        <button className="save-search-submit-button">
-          {I18n.t("js.api_maker.table.filters.save_search_modal.save_search", {defaultValue: "Save search"})}
-        </button>
-      </form>
-    </Modal>
-  )
-}
-
-export default ApiMakerTableFiltersSaveSearchModal
+  }
+}))

package/src/table/table.jsx

@@ -12,7 +12,7 @@ import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {useEffect, useRef} from "react"
+import React, {memo, useEffect, useRef} from "react"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
 import Settings from "./settings"
@@ -26,7 +26,7 @@ import useCollection from "../use-collection"
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
 
-export default shapeComponent(class ApiMakerTable extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
   static defaultProps = {
     card: true,
     destroyEnabled: true,
@@ -620,4 +620,4 @@ export default shapeComponent(class ApiMakerTable extends ShapeComponent {
   }
 
   submitFilterDebounce = debounce(digg(this, "submitFilter"))
-})
+}))