@kaspernj/api-maker 1.0.310 → 1.0.312

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.310",
+  "version": "1.0.312",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -52,6 +52,7 @@
     "on-location-changed": ">= 1.0.8",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
+    "set-state-compare": ">= 1.0.25",
     "spark-md5": "^3.0.2",
     "strftime": ">= 0.10.0",
     "uniqunize": "^1.0.1",

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

@@ -3,19 +3,21 @@ 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.js"
 
 const ApiMakerSuperAdminLayoutHeader = ({actions, onTriggerMenu, title}) => {
+  const shape = useShape()
   const headerActionsRef = useRef()
-  const [headerActionsActive, setHeaderActionsActive] = useState(false)
+  const setHeaderActionsActive = shape.useState("headerActionsActive", false)
   const onGearsClicked = useCallback((e) => {
     e.preventDefault()
-    setHeaderActionsActive(!headerActionsActive)
-  }, [headerActionsActive])
+    setHeaderActionsActive(!shape.state.headerActionsActive)
+  }, [])
 
   const onWindowMouseUp = useCallback((e) => {
     // Close the header actions menu if clicked happened outside
-    if (headerActionsActive && headerActionsRef.current && !headerActionsRef.current.contains(e.target)) setHeaderActionsActive(false)
-  }, [headerActionsActive, headerActionsRef])
+    if (shape.state.headerActionsActive && headerActionsRef.current && !headerActionsRef.current.contains(e.target)) setHeaderActionsActive(false)
+  }, [])
 
   return (
     <div className="components--admin--layout--header">
@@ -24,7 +26,7 @@ const ApiMakerSuperAdminLayoutHeader = ({actions, onTriggerMenu, title}) => {
         {title}
       </div>
       {actions &&
-        <div className="header-actions-container" data-active={headerActionsActive}>
+        <div className="header-actions-container" data-active={shape.state.headerActionsActive}>
           <div className="header-actions" ref={headerActionsRef}>
             {actions}
           </div>

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

@@ -1,12 +1,14 @@
 import "./style"
 import classNames from "classnames"
 import CommandsPool from "../../commands-pool"
+import config from "super-admin/config"
 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 useCurrentUser from "../../use-current-user"
+import useShape from "set-state-compare/src/use-shape.js"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 
@@ -21,6 +23,7 @@ const ApiMakerSuperAdminLayout = ({
   menu,
   ...restProps
 }) => {
+  const shape = useShape()
   const currentUser = useCurrentUser()
 
   useEffect(() => {
@@ -36,22 +39,21 @@ const ApiMakerSuperAdminLayout = ({
     document.title = "Wooftech"
   }
 
-  const [menuTriggered, setMenuTriggered] = useState(false)
+  const setMenuTriggered = shape.useState("menuTriggered", false)
   const noAccess = !currentUser
   const onRequestMenuClose = useCallback(() => setMenuTriggered(false), [])
   const onTriggerMenu = useCallback((e) => {
     e.preventDefault()
-
-    setMenuTriggered(!menuTriggered)
-  }, [menuTriggered])
+    setMenuTriggered(!shape.state.menuTriggered)
+  }, [])
 
   return (
-    <div className={classNames("components--admin--layout", className)} data-menu-triggered={menuTriggered} {...restProps}>
+    <div className={classNames("components--admin--layout", className)} data-menu-triggered={shape.state.menuTriggered} {...restProps}>
       <Menu
         active={active}
         noAccess={noAccess}
         onRequestMenuClose={onRequestMenuClose}
-        triggered={menuTriggered}
+        triggered={shape.state.menuTriggered}
       />
       <Header actions={actions} onTriggerMenu={onTriggerMenu} title={headerTitle} />
       <div className="app-layout-content-container">
@@ -70,6 +72,7 @@ const ApiMakerSuperAdminLayout = ({
                 <div className="mb-4">
                   {I18n.t("js.api_maker.super_admin.layout.try_signing_in", {defaultValue: "Try signing in."})}
                 </div>
+                {config.signInContent()}
               </>
             }
           </>

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)
-    }
-  }
-}