@kaspernj/api-maker 1.0.311 → 1.0.312

package/package.json

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

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

@@ -3,7 +3,7 @@ import EventListener from "../../../event-listener"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useCallback, useRef, useState} from "react"
-import useShape from "set-state-compare/src/use-shape"
+import useShape from "set-state-compare/src/use-shape.js"
 
 const ApiMakerSuperAdminLayoutHeader = ({actions, onTriggerMenu, title}) => {
   const shape = useShape()

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

@@ -8,7 +8,7 @@ import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useCallback, useEffect, useState} from "react"
 import useCurrentUser from "../../use-current-user"
-import useShape from "set-state-compare/src/use-shape"
+import useShape from "set-state-compare/src/use-shape.js"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 

package/src/use-can-can.mjs

@@ -0,0 +1,38 @@
+import CanCan from "./can-can.mjs"
+import {useCallback, useEffect, useState} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const useCanCan = (abilitiesCallback, dependencies) => {
+  const shape = useShape({abilitiesCallback})
+  const [canCan, setCanCan] = useState()
+
+  useEffect(() => {
+    loadAbilities()
+  }, dependencies)
+
+  const loadAbilities = useCallback(async () => {
+    const canCan = CanCan.current()
+    const abilities = shape.props.abilitiesCallback()
+
+    await canCan.loadAbilities(abilities)
+
+    setCanCan(canCan)
+  }, [])
+
+  const onResetAbilities = useCallback(() => {
+    setCanCan(undefined)
+    loadAbilities()
+  }, [])
+
+  useEffect(() => {
+    CanCan.current().events.addListener("onResetAbilities", onResetAbilities)
+
+    return () => {
+      CanCan.current().events.removeListener("onResetAbilities", onResetAbilities)
+    }
+  }, [])
+
+  return canCan
+}
+
+export default useCanCan

package/src/with-can-can.jsx

@@ -1,16 +1,12 @@
-import CanCanLoader from "./can-can-loader"
+import useCanCan from "./use-can-can.mjs"
+import {memo} from "react"
 
-export default (WrappedComponent, abilities) => class WithCanCan extends React.PureComponent {
-  state = {
-    canCan: undefined
-  }
+export default (WrappedComponent, abilities) => {
+  const WithCanCan = (props) => {
+    const canCan = useCanCan(() => abilities)
 
-  render() {
-    return (
-      <>
-        <CanCanLoader abilities={abilities} component={this} />
-        <WrappedComponent canCan={this.state.canCan} {...this.props} />
-      </>
-    )
+    return <WrappedComponent canCan={canCan} {...props} />
   }
+
+  return memo(WithCanCan)
 }

package/src/can-can-loader.jsx

@@ -1,54 +0,0 @@
-import ApiMakerEventEmitterListener from "./event-emitter-listener"
-import {digg, digs} from "diggerize"
-import CanCan from "./can-can.mjs"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import React from "react"
-
-export default class ApiMakerCanCanLoader extends React.PureComponent {
-  static propTypes = propTypesExact({
-    abilities: PropTypes.array.isRequired,
-    component: PropTypes.object.isRequired
-  })
-
-  componentDidMount () {
-    this.loadAbilities()
-  }
-
-  async loadAbilities () {
-    const canCan = CanCan.current()
-    const {abilities} = digs(this.props, "abilities")
-
-    await canCan.loadAbilities(abilities)
-
-    this.updateComponent({canCan})
-  }
-
-  render () {
-    const canCan = CanCan.current()
-    const events = digg(canCan, "events")
-
-    return (
-      <ApiMakerEventEmitterListener
-        event="onResetAbilities"
-        events={events}
-        onCalled={this.onResetAbilities}
-      />
-    )
-  }
-
-  onResetAbilities = () => {
-    this.updateComponent({canCan: undefined})
-    this.loadAbilities()
-  }
-
-  updateComponent (updatedState) {
-    const {component} = digs(this.props, "component")
-
-    if (component.shape) {
-      component.shape.set(updatedState)
-    } else {
-      component.setState(updatedState)
-    }
-  }
-}