@kaspernj/api-maker 1.0.317 → 1.0.319

package/package.json

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

package/src/can-can.mjs

@@ -81,6 +81,9 @@ export default class ApiMakerCanCan {
       for (const abilityData of abilities) {
         const subject = abilityData[0]
 
+        if (!subject) throw new Error(`Invalid subject given in abilities: ${subject} - ${JSON.stringify(abilities)}`)
+        if (!Array.isArray(abilityData[1])) throw new Error(`Expected an array of abilities but got: ${typeof abilityData[1]}: ${abilityData[1]}`)
+
         for (const ability of abilityData[1]) {
           const promise = this.loadAbility(ability, subject)
 
@@ -119,7 +122,7 @@ export default class ApiMakerCanCan {
       clearTimeout(this.queueAbilitiesRequestTimeout)
     }
 
-    this.queueAbilitiesRequestTimeout = setTimeout(() => this.sendAbilitiesRequest(), 0)
+    this.queueAbilitiesRequestTimeout = setTimeout(this.sendAbilitiesRequest, 0)
   }
 
   async resetAbilities () {
@@ -129,7 +132,7 @@ export default class ApiMakerCanCan {
     this.events.emit("onResetAbilities")
   }
 
-  async sendAbilitiesRequest () {
+  sendAbilitiesRequest = async () => {
     const abilitiesToLoad = this.abilitiesToLoad
     const abilitiesToLoadData = this.abilitiesToLoadData
 

package/src/super-admin/edit-page.jsx

@@ -8,7 +8,7 @@ import useCurrentUser from "../use-current-user"
 import useModel from "../use-model"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
-const EditAttributeInput = ({attributeName, id, inputs, label, model, name}) => {
+const EditAttributeInput = memo(({attributeName, id, inputs, label, model, name}) => {
   if (!(attributeName in model)) {
     throw new Error(`${attributeName} isn't set on the resource ${model.modelClassData().name}`)
   }
@@ -42,9 +42,9 @@ const EditAttributeInput = ({attributeName, id, inputs, label, model, name}) =>
       </View>
     </View>
   )
-}
+})
 
-const EditAttributeContent = ({attribute, id, inputs, model, name}) => {
+const EditAttributeContent = memo(({attribute, id, inputs, model, name}) => {
   if (!(attribute.attribute in model)) {
     throw new Error(`${attribute.attribute} isn't set on the resource ${model.modelClassData().name}`)
   }
@@ -70,9 +70,9 @@ const EditAttributeContent = ({attribute, id, inputs, model, name}) => {
   })
 
   return attribute.content(contentArgs())
-}
+})
 
-const EditAttribute = ({attribute, inputs, model, modelClass}) => {
+const EditAttribute = memo(({attribute, inputs, model, modelClass}) => {
   const availableLocales = Locales.availableLocales()
   const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
 
@@ -81,7 +81,7 @@ const EditAttribute = ({attribute, inputs, model, modelClass}) => {
       {attribute.content &&
         <EditAttributeContent
           attribute={attribute}
-          id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
+          id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
           inputs={inputs}
           model={model}
           name={inflection.underscore(attribute.attribute)}
@@ -90,7 +90,7 @@ const EditAttribute = ({attribute, inputs, model, modelClass}) => {
       {!attribute.content && attribute.translated && availableLocales.map((locale) =>
         <EditAttributeInput
           attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
-          id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}_${locale}`}
+          id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}
           inputs={inputs}
           label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
           model={model}
@@ -101,7 +101,7 @@ const EditAttribute = ({attribute, inputs, model, modelClass}) => {
       {!attribute.content && !attribute.translated &&
         <EditAttributeInput
           attributeName={attribute.attribute}
-          id={`${camelizedLower}_${inflection.underscore(attribute.attribute)}`}
+          id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
           inputs={inputs}
           label={modelClass.humanAttributeName(attribute.attribute)}
           model={model}
@@ -110,7 +110,7 @@ const EditAttribute = ({attribute, inputs, model, modelClass}) => {
       }
     </>
   )
-}
+})
 
 const EditPage = ({modelClass}) => {
   const availableLocales = Locales.availableLocales()
@@ -128,6 +128,10 @@ const EditPage = ({modelClass}) => {
 
   selectedAttributes[modelClassName] = selectedModelAttributes
 
+  if (!attributes) {
+    throw new Error(`No 'attributes' given from edit config for ${modelClass.modelClassData().name}`)
+  }
+
   for (const attribute of attributes) {
     if (attribute.translated) {
       for (const locale of availableLocales) {

package/src/super-admin/index.jsx

@@ -8,6 +8,7 @@ import {useCallback, useEffect, useState} from "react"
 import ShowPage from "./show-page"
 import ShowReflectionActions from "./show-reflection-actions"
 import ShowReflectionPage from "./show-reflection-page"
+import useCanCan from "../use-can-can"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
 const ApiMakerSuperAdmin = () => {
@@ -19,6 +20,13 @@ const ApiMakerSuperAdmin = () => {
   const modelId = queryParams.model_id
   const modelName = modelClass?.modelClassData()?.name
   const [model, setModel] = useState()
+  const canCan = useCanCan(() => {
+    const abilities = []
+
+    if (modelClass) abilities.push([modelClass, ["new"]])
+
+    return abilities
+  })
 
   const loadModel = useCallback(async () => {
     if (modelId && modelClass) {
@@ -73,9 +81,13 @@ const ApiMakerSuperAdmin = () => {
   const actions = useMemo(
     () => <>
       {modelClass && pageToShow == "index" &&
-        <Link className="create-new-model-link" to={Params.withParams({model: modelName, mode: "new"})}>
-          Create new
-        </Link>
+        <>
+          {canCan?.can("new", modelClass) &&
+            <Link className="create-new-model-link" to={Params.withParams({model: modelName, mode: "new"})}>
+              Create new
+            </Link>
+          }
+        </>
       }
       {model && pageToShow == "show" &&
         <>
@@ -95,7 +107,7 @@ const ApiMakerSuperAdmin = () => {
         <ShowReflectionActions model={model} modelClass={modelClass} reflectionName={queryParams.model_reflection} />
       }
     </>,
-    [model, modelClass, pageToShow]
+    [canCan, model, modelClass, pageToShow]
   )
 
   return (

package/src/super-admin/layout/index.jsx

@@ -6,7 +6,7 @@ import Header from "./header"
 import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useCallback, useEffect, useState} from "react"
+import {memo, useCallback, useEffect} from "react"
 import useCurrentUser from "../../use-current-user"
 import useShape from "set-state-compare/src/use-shape.js"
 
@@ -29,7 +29,7 @@ const ApiMakerSuperAdminLayout = ({
   useEffect(() => {
     CommandsPool.current().globalRequestData.layout = "admin"
     CommandsPool.current().globalRequestData.locale = I18n.locale
-  }, [])
+  }, [I18n.locale])
 
   const headTitle = headTitle || headerTitle
 

package/src/super-admin/layout/menu/index.jsx

@@ -63,7 +63,6 @@ const ComponentsAdminLayoutMenu = ({active, noAccess, triggered}) => {
 
 ComponentsAdminLayoutMenu.propTypes = PropTypesExact({
   active: PropTypes.string,
-  currentUser: PropTypes.instanceOf(User),
   noAccess: PropTypes.bool.isRequired,
   onRequestMenuClose: PropTypes.func.isRequired,
   triggered: PropTypes.bool.isRequired

package/src/super-admin/layout/menu/menu-content.jsx

@@ -1,4 +1,3 @@
-import CanCan from "../../../can-can"
 import {digg} from "diggerize"
 import {memo, useMemo} from "react"
 import MenuItem from "./menu-item"
@@ -6,20 +5,13 @@ import models from "../../models"
 import Params from "../../../params"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import withCanCan from "@kaspernj/api-maker/src/with-can-can"
+import useCanCan from "../../../use-can-can"
 
-const abilities = []
-
-for (const model of models) {
-  abilities.push(
-    [model, ["index"]]
-  )
-}
-
-const ComponentsAdminLayoutMenuContent = ({active, canCan}) => {
+const ComponentsAdminLayoutMenuContent = ({active}) => {
+  const canCan = useCanCan(() => models.map((model) => [model, ["index"]]))
   const sortedModels = useMemo(
     () => models.sort((a, b) => a.modelName().human({count: 2}).toLowerCase().localeCompare(b.modelName().human({count: 2}).toLowerCase())),
-    []
+    [I18n.locale]
   )
 
   return (
@@ -39,8 +31,7 @@ const ComponentsAdminLayoutMenuContent = ({active, canCan}) => {
 }
 
 ComponentsAdminLayoutMenuContent.propTypes = PropTypesExact({
-  active: PropTypes.string,
-  canCan: PropTypes.instanceOf(CanCan)
+  active: PropTypes.string
 })
 
-export default withCanCan(memo(ComponentsAdminLayoutMenuContent), abilities)
+export default memo(ComponentsAdminLayoutMenuContent)

package/src/super-admin/show-reflection-actions.jsx

@@ -6,6 +6,7 @@ const SuperAdminShowReflectionActions = ({model, modelClass, reflectionName}) =>
   const modelClassName = digg(reflection, "reflectionData", "className")
   const modelData = {}
   const dataParamName = inflection.singularize(reflection.reflectionData.collectionName)
+  const canCan = useCanCan(() => [[reflection.modelClass(), ["new"]]])
 
   modelData[reflection.foreignKey()] = model?.id()
 
@@ -17,9 +18,13 @@ const SuperAdminShowReflectionActions = ({model, modelClass, reflectionName}) =>
   linkParams[dataParamName] = modelData
 
   return (
-    <Link className="create-new-model-link" to={Params.withParams(linkParams)}>
-      Create new
-    </Link>
+    <>
+      {canCan?.can("new", reflection.modelClass()) &&
+        <Link className="create-new-model-link" to={Params.withParams(linkParams)}>
+          Create new
+        </Link>
+      }
+    </>
   )
 }
 

package/src/use-can-can.mjs

@@ -1,14 +1,16 @@
 import CanCan from "./can-can.mjs"
 import {useCallback, useEffect, useState} from "react"
+import useCurrentUser from "./use-current-user.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
 
 const useCanCan = (abilitiesCallback, dependencies) => {
+  const currentUser = useCurrentUser()
   const s = useShape({abilitiesCallback})
   const [canCan, setCanCan] = useState()
 
-  useEffect(() => {
-    loadAbilities()
-  }, dependencies)
+  if (!dependencies) {
+    dependencies = [currentUser?.id()]
+  }
 
   const loadAbilities = useCallback(async () => {
     const canCan = CanCan.current()
@@ -24,6 +26,10 @@ const useCanCan = (abilitiesCallback, dependencies) => {
     loadAbilities()
   }, [])
 
+  useEffect(() => {
+    loadAbilities()
+  }, dependencies)
+
   useEffect(() => {
     CanCan.current().events.addListener("onResetAbilities", onResetAbilities)