@kaspernj/api-maker 1.0.361 → 1.0.363

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.361",
+  "version": "1.0.363",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "on-location-changed": ">= 1.0.10",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": "^1.0.41",
+    "set-state-compare": "^1.0.42",
     "spark-md5": "^3.0.2",
     "strftime": ">= 0.10.0",
     "uniqunize": "^1.0.1",

package/src/api.mjs

@@ -4,6 +4,7 @@ import FormDataObjectizer from "form-data-objectizer"
 import Logger from "./logger.mjs"
 import qs from "qs"
 import SessionStatusUpdater from "./session-status-updater.mjs"
+import urlEncode from "./url-encode.mjs"
 
 const logger = new Logger({name: "ApiMaker / Api"})
 
@@ -21,7 +22,7 @@ export default class Api {
     requestPath += path
 
     if (pathParams) {
-      const pathParamsString = qs.stringify(pathParams, {arrayFormat: "brackets"})
+      const pathParamsString = qs.stringify(pathParams, {arrayFormat: "brackets", encoder: urlEncode})
       requestPath += `?${pathParamsString}`
     }
 

package/src/bootstrap/input.jsx

@@ -4,10 +4,10 @@ import {Input} from "../inputs/input"
 import InvalidFeedback from "./invalid-feedback"
 import Money from "../inputs/money"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-const ApiMakerBootstrapInput = shapeComponent(class ApiMakerBootstrapInput extends ShapeComponent {
+const ApiMakerBootstrapInput = memo(shapeComponent(class ApiMakerBootstrapInput extends ShapeComponent {
   static propTypes = {
     append: PropTypes.node,
     appendText: PropTypes.node,
@@ -167,6 +167,6 @@ const ApiMakerBootstrapInput = shapeComponent(class ApiMakerBootstrapInput exten
 
     return classNames.join(" ")
   }
-})
+}))
 
 export default inputWrapper(ApiMakerBootstrapInput)

package/src/bootstrap/live-table.jsx

@@ -9,7 +9,7 @@ import ModelRow from "./live-table/model-row"
 import Paginate from "./paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {memo} from "react"
+import {memo} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import SortLink from "./sort-link"
 

package/src/bootstrap/paginate.jsx

@@ -3,10 +3,12 @@ import Link from "../link"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import qs from "qs"
-import React from "react"
+import {memo} from "react"
 import Result from "../result"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import urlEncode from "../url-encode.mjs"
 
-export default class ApiMakerBootstrapPaginate extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends ShapeComponent {
   static propTypes = propTypesExact({
     result: PropTypes.oneOfType([
       instanceOfClassName("ApiMakerResult"),
@@ -14,8 +16,10 @@ export default class ApiMakerBootstrapPaginate extends React.PureComponent {
     ]).isRequired
   })
 
-  state = {
-    pages: this.pages()
+  setup() {
+    this.useStates({
+      pages: () => this.pages()
+    })
   }
 
   componentDidUpdate (prevProps) {
@@ -52,12 +56,13 @@ export default class ApiMakerBootstrapPaginate extends React.PureComponent {
   pagePath (pageNumber) {
     let pageKey = this.props.result.data.collection.queryArgs.pageKey
 
-    if (!pageKey)
+    if (!pageKey) {
       pageKey = "page"
+    }
 
     const currentParams = qs.parse(globalThis.location.search.substr(1))
     currentParams[pageKey] = pageNumber
-    const newParams = qs.stringify(currentParams)
+    const newParams = qs.stringify(currentParams, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
 
     return newPath
@@ -150,4 +155,4 @@ export default class ApiMakerBootstrapPaginate extends React.PureComponent {
       </>
     )
   }
-}
+}))

package/src/bootstrap/sort-link.jsx

@@ -3,6 +3,7 @@ import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import qs from "qs"
 import React from "react"
+import urlEncode from "../url-encode.mjs"
 
 import Link from "../link"
 import PureComponent from "set-state-compare/src/pure-component"
@@ -35,7 +36,7 @@ class ApiMakerBootstrapSortLink extends PureComponent {
 
     queryParams[searchKey] = JSON.stringify(qParams)
 
-    const newParams = qs.stringify(queryParams)
+    const newParams = qs.stringify(queryParams, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
 
     return newPath

package/src/inputs/input.jsx

@@ -4,12 +4,12 @@ import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
 import Money from "./money"
 import PropTypes from "prop-types"
-import React, {useRef} from "react"
+import {memo, useRef} from "react"
 import replaceall from "replaceall"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
 
-const ApiMakerInputsInput = shapeComponent(class ApiMakerInputsInput extends ShapeComponent {
+const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends ShapeComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -229,7 +229,7 @@ const ApiMakerInputsInput = shapeComponent(class ApiMakerInputsInput extends Sha
     if (this.props.inputProps.type == "file" && value == "")
       return true
   }
-})
+}))
 
 export {ApiMakerInputsInput as Input}
 export default inputWrapper(ApiMakerInputsInput)

package/src/inputs/money.jsx

@@ -6,10 +6,10 @@ import * as inflection from "inflection"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React, {useRef} from "react"
+import {memo, useRef} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
   static defaultProps = {
     disabled: false,
     showCurrencyOptions: true
@@ -183,4 +183,4 @@ export default shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
     if (this.props.onChange && oldCents != cents)
       this.props.onChange()
   }
-})
+}))

package/src/params.mjs

@@ -2,6 +2,7 @@ import config from "./config.mjs"
 import formSerialize from "form-serialize"
 import Incorporator from "incorporator"
 import qs from "qs"
+import urlEncode from "./url-encode.mjs"
 
 export default class Params {
   static parse () {
@@ -17,7 +18,7 @@ export default class Params {
   }
 
   static withParams (params) {
-    const newParams = qs.stringify(params)
+    const newParams = qs.stringify(params, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
 
     return newPath
@@ -25,7 +26,7 @@ export default class Params {
 
   static changeParams (given, opts = {}) {
     const params = Params.change(given)
-    const newParams = qs.stringify(params)
+    const newParams = qs.stringify(params, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
     const appHistory = opts.appHistory || config.getHistory() || AppHistory
 

package/src/resize-observer.jsx

@@ -1,43 +1,10 @@
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
-import React from "react"
+import {memo} from "react"
+import useResizeObserver from "./use-resize-observer.mjs"
 
-export default class ApiMakerResizeObserver extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    element: PropTypes.instanceOf(Element),
-    onResize: PropTypes.func.isRequired
-  })
+const ApiMakerResizeObserver = memo(({element, onResize}) => {
+  useResizeObserver(element, onResize)
 
-  componentDidMount() {
-    if (this.props.element) this.startObserve()
-  }
+  return null
+})
 
-  componentDidUpdate(prevProps) {
-    if (!prevProps.element && this.props.element) {
-      this.startObserve()
-    } else if (prevProps.element && !this.props.element) {
-      this.endObserve()
-    } else if (prevProps.element != this.props.element) {
-      this.endObserve()
-      this.startObserve()
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.observer) this.endObserve()
-  }
-
-  startObserve() {
-    this.observer = new ResizeObserver(this.props.onResize)
-    this.observer.observe(this.props.element)
-  }
-
-  endObserve() {
-    this.observer.disconnect()
-    this.observer = null
-  }
-
-  render() {
-    return null
-  }
-}
+export default ApiMakerResizeObserver

package/src/routes-native.mjs

@@ -1,6 +1,7 @@
 import {dig, digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import qs from "qs"
+import urlEncode from "./url-encode.mjs"
 
 export default class ApiMakerRoutesNative {
   constructor ({getLocale}) {
@@ -111,7 +112,7 @@ export default class ApiMakerRoutesNative {
         .join("/")
 
       if (restOptions && Object.keys(restOptions).length > 0) {
-        translatedRoute += `?${qs.stringify(restOptions)}`
+        translatedRoute += `?${qs.stringify(restOptions, {encoder: urlEncode})}`
       }
 
       if (url) return this.addHostToRoute({host, port, protocol, translatedRoute})
@@ -132,7 +133,7 @@ export default class ApiMakerRoutesNative {
         .join("/")
 
       if (restOptions && Object.keys(restOptions).length > 0) {
-        translatedRoute += `?${qs.stringify(restOptions)}`
+        translatedRoute += `?${qs.stringify(restOptions, {encoder: urlEncode})}`
       }
 
       if (url) return this.addHostToRoute({host, port, protocol, translatedRoute})

package/src/table/filters/index.jsx

@@ -3,7 +3,7 @@ import FilterForm from "./filter-form"
 import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
-import React, {memo} from "react"
+import {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"

package/src/table/model-row.jsx

@@ -6,11 +6,12 @@ import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
+import {memo} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
-export default shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends ShapeComponent {
   static propTypes = {
     cacheKey: PropTypes.string.isRequired,
     model: PropTypes.object.isRequired,
@@ -188,4 +189,4 @@ export default shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends S
       throw new Error(`Unhandled type: ${apiMakerType}`)
     }
   }
-})
+}))

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

@@ -4,12 +4,12 @@ import EventConnection from "../event-connection"
 import modelClassRequire from "../model-class-require.mjs"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React, {useEffect} from "react"
+import {memo, useEffect} from "react"
 import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
 const Workplace = modelClassRequire("Workplace")
 
-export default shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends ShapeComponent {
   static propTypes = PropTypesExact({
     currentWorkplace: PropTypes.object,
     model: PropTypes.object.isRequired
@@ -102,4 +102,4 @@ export default shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends S
       this.setState({checked: false})
     }
   }
-})
+}))

package/src/url-encode.mjs

@@ -0,0 +1,19 @@
+const replaces = {
+  " ": "+",
+  "&": "%26",
+  "#": "%23",
+  "/": "%2F",
+  "?": "%3F"
+}
+
+const urlEncode = (string) => {
+  return `${string}`.replaceAll(/( |&|#)/g, (character) => {
+    if (!(character in replaces)) {
+      throw new Error(`Didn't exist in replaces: "${character}"`)
+    }
+
+    return replaces[character]
+  })
+}
+
+export default urlEncode

package/src/use-resize-observer.mjs

@@ -0,0 +1,24 @@
+import {useCallback, useMemo} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const useResizeObserver = (element, callback) => {
+  const s = useShape({callback})
+  const onResize = useCallback((...args) => {
+    s.p.callback(...args)
+  }, [])
+  const observer = useMemo(() => new ResizeObserver(onResize), [])
+
+  useEffect(() => {
+    if (element) {
+      observer.observe(element)
+    }
+
+    return () => {
+      if (element) {
+        observer.disconnect()
+      }
+    }
+  }, [element])
+}
+
+export default useResizeObserver