@kaspernj/api-maker 1.0.329 → 1.0.331

package/package.json

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

package/src/devise.mjs

@@ -104,7 +104,19 @@ export default class ApiMakerDevise {
     return this.currents[scope]
   }
 
+  hasCurrentScope(scope) {
+    if (globalThis.apiMakerDeviseCurrent && scope in globalThis.apiMakerDeviseCurrent) {
+      return true
+    }
+
+    return false
+  }
+
   loadCurrentScope (scope) {
+    if (!this.hasCurrentScope(scope)) {
+      return null
+    }
+
     const scopeData = globalThis.apiMakerDeviseCurrent[scope]
 
     if (!scopeData) return null

package/src/router.jsx

@@ -1,45 +1,38 @@
 import PropTypes from "prop-types"
-import React from "react"
-import shouldComponentUpdate from "set-state-compare/src/should-component-update"
+import React, {memo} from "react"
 import {Suspense} from "react"
 import withRouter from "./with-router"
 
-class ApiMakerRouter extends React.Component {
-  static propTypes = {
-    notFoundComponent: PropTypes.elementType,
-    requireComponent: PropTypes.func.isRequired
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldComponentUpdate(this, nextProps, nextState)
+const ApiMakerRouter = (props) => {
+  const {match, ...restProps} = props
+  const {matchingRoute} = match
+
+  if (!matchingRoute) {
+    if (props.notFoundComponent) {
+      const NotFoundComponent = props.notFoundComponent
+
+      return (
+        <Suspense fallback={<div />}>
+          <NotFoundComponent match={match} />
+        </Suspense>
+      )
+    } else {
+      return null
+    }
   }
 
-  render() {
-    const {match, ...restProps} = this.props
-    const {matchingRoute} = match
-
-    if (!matchingRoute) {
-      if (this.props.notFoundComponent) {
-        const NotFoundComponent = this.props.notFoundComponent
+  const Component = props.requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
 
-        return (
-          <Suspense fallback={<div />}>
-            <NotFoundComponent match={match} />
-          </Suspense>
-        )
-      } else {
-        return null
-      }
-    }
-
-    const Component = this.props.requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
+  return (
+    <Suspense fallback={<div />}>
+      <Component match={match} {...restProps} />
+    </Suspense>
+  )
+}
 
-    return (
-      <Suspense fallback={<div />}>
-        <Component match={match} {...restProps} />
-      </Suspense>
-    )
-  }
+ApiMakerRouter.propTypes = {
+  notFoundComponent: PropTypes.elementType,
+  requireComponent: PropTypes.func.isRequired
 }
 
-export default withRouter(ApiMakerRouter)
+export default withRouter(memo(ApiMakerRouter))

package/src/use-current-user.mjs

@@ -1,10 +1,50 @@
-import {useCallback, useEffect, useState} from "react"
+import {useCallback, useEffect, useMemo} from "react"
+import {camelize} from "inflection"
 import Devise from "./devise.mjs"
+import Services from "./services.mjs"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const currentUserData = {}
+
+const useCurrentUser = (args) => {
+  const s = useShape()
+  const scope = args?.scope || "user"
+
+  s.meta.scope = scope
+  s.meta.scopeName = useMemo(() => `current${camelize(s.m.scope)}`, [scope])
+
+  const loadCurrentUserFromRequest = useCallback(async () => {
+    const {scope, scopeName} = s.m.scope
+    const result = await Services.current().sendRequest("Devise::Current", {scope})
+    const current = digg(result, "current")
+
+    currentUserData[scope] = current
+
+    s.setStates[scopeName](current)
+  }, [])
+
+  const defaultCurrentUser = useCallback(() => {
+    const {scope, scopeName} = s.m
+
+    if (scope in currentUserData) {
+      return currentUserData[scope]
+    } else if (Devise.current().hasCurrentScope(scope)) {
+      currentUserData[scope] = Devise[scopeName]()
+
+      return currentUserData[scope]
+    }
+  }, [])
+
+  s.useStates({currentUser: defaultCurrentUser()})
 
-const useCurrentUser = () => {
-  const [currentUser, setCurrentUser] = useState(Devise.currentUser())
   const updateCurrentUser = useCallback(() => {
-    setCurrentUser(Devise.currentUser())
+    s.set({currentUser: Devise[s.m.scopeName]()})
+  }, [])
+
+  useEffect(() => {
+    if (!(s.m.scope in currentUserData)) {
+      loadCurrentUserFromRequest()
+    }
   }, [])
 
   useEffect(() => {
@@ -13,7 +53,7 @@ const useCurrentUser = () => {
     return () => {
       Devise.events().removeListener("onDeviseSignIn", updateCurrentUser)
     }
-  })
+  }, [])
 
   useEffect(() => {
     Devise.events().addListener("onDeviseSignOut", updateCurrentUser)
@@ -21,9 +61,9 @@ const useCurrentUser = () => {
     return () => {
       Devise.events().removeListener("onDeviseSignOut", updateCurrentUser)
     }
-  })
+  }, [])
 
-  return currentUser
+  return s.s.currentUser
 }
 
 export default useCurrentUser

package/src/use-router.jsx

@@ -0,0 +1,125 @@
+import config from "./config.mjs"
+import escapeStringRegexp from "escape-string-regexp"
+import * as inflection from "inflection"
+import PropTypes from "prop-types"
+import {useCallback, useMemo} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const useRouter = (props) => {
+  const s = useShape(props)
+
+  const findRouteParams = useCallback((routeDefinition) => {
+    const result = []
+    const parts = routeDefinition.path.split("/")
+
+    for (const part of parts) {
+      if (part.match(/^:([a-z_]+)$/))
+        result.push(part)
+    }
+
+    return result
+  }, [])
+
+  const getPath = useCallback(() => {
+    let path = s.p.path || window.location.pathname
+
+    path = path.replace(/[/]+$/, "")
+
+    return path
+  }, [])
+
+  const getRouteDefinitions = useCallback(() =>  s.p.routeDefinitions || config.getRouteDefinitions(), [])
+  const getRoutes = useCallback(() => s.p.routes || config.getRoutes(), [])
+
+  const parseRouteDefinitions = useCallback(() => {
+    const Locales = require("shared/locales").default
+    const routeDefinitions = getRouteDefinitions()
+    const routes = getRoutes()
+    const regex = /:([A-z\d_]+)/
+    const parsedRouteDefinitions = []
+
+    for (const locale of Locales.availableLocales()) {
+      for (const routeDefinition of routeDefinitions.routes) {
+        const routePathName = `${inflection.camelize(routeDefinition.name, true)}Path`
+        const params = findRouteParams(routeDefinition)
+
+        params.push({locale})
+
+        if (!(routePathName in routes))
+          throw new Error(`${routePathName} not found in routes: ${Object.keys(routes, ", ")}`)
+
+        const routePath = routes[routePathName](...params).replace(/[/]+$/, "")
+        const groups = []
+        let pathRegexString = "^"
+
+        pathRegexString += escapeStringRegexp(routePath)
+
+        while (true) {
+          const match = pathRegexString.match(regex)
+
+          if (!match) break
+
+          const variableName = match[1]
+
+          groups.push(variableName)
+
+          pathRegexString = pathRegexString.replace(match[0], "([^/]+)")
+        }
+
+        pathRegexString += "$"
+
+        const pathRegex = new RegExp(pathRegexString)
+
+        parsedRouteDefinitions.push({groups, pathRegex, routeDefinition})
+      }
+    }
+
+    return parsedRouteDefinitions
+  }, [])
+
+  const parsedRouteDefinitions = useMemo(() => parseRouteDefinitions(), [])
+
+  s.updateMeta({parsedRouteDefinitions})
+
+  const findMatchingRoute = useCallback(() => {
+    const path = getPath()
+
+    for (const parsedRouteDefinition of s.m.parsedRouteDefinitions) {
+      const match = path.match(parsedRouteDefinition.pathRegex)
+      let matched, params
+
+      if (match) {
+        matched = true
+        params = {}
+
+        for (const groupKey in parsedRouteDefinition.groups) {
+          const groupName = parsedRouteDefinition.groups[groupKey]
+
+          params[groupName] = match[Number(groupKey) + 1]
+        }
+      }
+
+      if (path == "" && parsedRouteDefinition.routeDefinition.path == "/") matched = true
+      if (matched) {
+        return {params, parsedRouteDefinition}
+      }
+    }
+  }, [])
+
+  const matchingRoute = findMatchingRoute()
+  const params = matchingRoute?.params || {}
+  const match = {
+    matchingRoute,
+    params
+  }
+
+  return {match}
+}
+
+useRouter.propTypes = {
+  path: PropTypes.string,
+  routeDefinitions: PropTypes.object,
+  routes: PropTypes.object
+}
+
+export default useRouter

package/src/with-router.jsx

@@ -1,133 +1,10 @@
-import config from "./config.mjs"
-import escapeStringRegexp from "escape-string-regexp"
-import * as inflection from "inflection"
-import PropTypes from "prop-types"
-import React from "react"
-import shouldComponentUpdate from "set-state-compare/src/should-component-update"
+import useRouter from "./use-router"
 
-export default (WrapperComponent) => class WithRouter extends React.Component {
-  static propTypes = {
-    path: PropTypes.string,
-    routeDefinitions: PropTypes.object,
-    routes: PropTypes.object
-  }
+export default (WrapperComponent) => (props) => {
+  const {path, routes, routeDefinitions, ...restProps} = props
+  const {match} = useRouter({path, routes, routeDefinitions})
 
-  parsedRouteDefinitions = this.parseRouteDefinitions()
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldComponentUpdate(this, nextProps, nextState)
-  }
-
-  findRouteParams(routeDefinition) {
-    const result = []
-    const parts = routeDefinition.path.split("/")
-
-    for (const part of parts) {
-      if (part.match(/^:([a-z_]+)$/))
-        result.push(part)
-    }
-
-    return result
-  }
-
-  path() {
-    let path = this.props.path || window.location.pathname
-
-    path = path.replace(/[/]+$/, "")
-
-    return path
-  }
-
-  routeDefinitions() {
-    return this.props.routeDefinitions || config.getRouteDefinitions()
-  }
-
-  routes() {
-    return this.props.routes || config.getRoutes()
-  }
-
-  parseRouteDefinitions() {
-    const Locales = require("shared/locales").default
-    const routeDefinitions = this.routeDefinitions()
-    const routes = this.routes()
-    const regex = /:([A-z\d_]+)/
-    const parsedRouteDefinitions = []
-
-    for (const locale of Locales.availableLocales()) {
-      for (const routeDefinition of routeDefinitions.routes) {
-        const routePathName = `${inflection.camelize(routeDefinition.name, true)}Path`
-        const params = this.findRouteParams(routeDefinition)
-
-        params.push({locale})
-
-        if (!(routePathName in routes))
-          throw new Error(`${routePathName} not found in routes: ${Object.keys(routes, ", ")}`)
-
-        const routePath = routes[routePathName](...params).replace(/[/]+$/, "")
-        const groups = []
-        let pathRegexString = "^"
-
-        pathRegexString += escapeStringRegexp(routePath)
-
-        while (true) {
-          const match = pathRegexString.match(regex)
-
-          if (!match) break
-
-          const variableName = match[1]
-
-          groups.push(variableName)
-
-          pathRegexString = pathRegexString.replace(match[0], "([^/]+)")
-        }
-
-        pathRegexString += "$"
-
-        const pathRegex = new RegExp(pathRegexString)
-
-        parsedRouteDefinitions.push({groups, pathRegex, routeDefinition})
-      }
-    }
-
-    return parsedRouteDefinitions
-  }
-
-  findMatchingRoute() {
-    const path = this.path()
-
-    for (const parsedRouteDefinition of this.parsedRouteDefinitions) {
-      const match = path.match(parsedRouteDefinition.pathRegex)
-      let matched, params
-
-      if (match) {
-        matched = true
-        params = {}
-
-        for (const groupKey in parsedRouteDefinition.groups) {
-          const groupName = parsedRouteDefinition.groups[groupKey]
-
-          params[groupName] = match[Number(groupKey) + 1]
-        }
-      }
-
-      if (path == "" && parsedRouteDefinition.routeDefinition.path == "/") matched = true
-      if (matched) {
-        return {params, parsedRouteDefinition}
-      }
-    }
-  }
-
-  render() {
-    const {path, routes, routeDefinitions, ...restProps} = this.props
-    const matchingRoute = this.findMatchingRoute()
-    const params = matchingRoute?.params || {}
-    const match = {
-      matchingRoute,
-      params
-    }
-
-    return (
-      <WrapperComponent match={match} {...restProps} />
-    )
-  }
+  return (
+    <WrapperComponent match={match} {...restProps} />
+  )
 }