@kaspernj/api-maker 1.0.361 → 1.0.362

package/package.json

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

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/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 React, {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/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/url-encode.mjs

@@ -0,0 +1,17 @@
+const replaces = {
+  " ": "+",
+  "&": "%26",
+  "#": "%23"
+}
+
+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