@kaspernj/api-maker 1.0.304 → 1.0.306

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

@@ -1,77 +1,17 @@
 import "./style"
-import {digg, digs} from "diggerize"
+import {memo, useCallback, useRef} from "react"
 import Link from "../../../link"
 import MenuContent from "./menu-content"
 import MenuItem from "./menu-item"
-import React from "react"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import withCurrentUser from "../../../with-current-user"
+import useCurrentUser from "../../../use-current-user"
 
-class ComponentsAdminLayoutMenu extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    active: PropTypes.string,
-    currentUser: PropTypes.instanceOf(User),
-    noAccess: PropTypes.bool.isRequired,
-    onRequestMenuClose: PropTypes.func.isRequired,
-    triggered: PropTypes.bool.isRequired
-  })
+const ComponentsAdminLayoutMenu = ({active, noAccess, triggered}) => {
+  const currentUser = useCurrentUser()
+  const rootRef = useRef()
 
-  rootRef = React.createRef()
-
-  render() {
-    const {rootRef} = digs(this, "rootRef")
-    const {active} = this.props
-    const {
-      currentUser,
-      noAccess,
-      triggered
-    } = digs(
-      this.props,
-      "currentUser",
-      "noAccess",
-      "triggered"
-    )
-    return (
-      <div className="components--admin--layout--menu" data-triggered={triggered} ref={rootRef}>
-        <div className="menu-logo">
-          <Link className="menu-logo-link" to={Params.withParams({})}>
-            Admin
-          </Link>
-        </div>
-        <div className="menu-items-center">
-          {!noAccess &&
-            <MenuContent active={active} />
-          }
-        </div>
-        <div className="menu-items-bottom">
-          {currentUser &&
-            <div className="menu-user-section">
-              <div className="menu-user-icon">
-                <i className="fa fa-user" />
-              </div>
-              <div className="menu-user-name">
-                <div className="menu-user-name-container">
-                  {currentUser.name()}
-                </div>
-              </div>
-            </div>
-          }
-          {currentUser &&
-            <MenuItem
-              active
-              className="sign-out-menu-item"
-              icon="sign-out-alt"
-              label={I18n.t("js.api_maker.super_admin.layout.menu.sign_out", {defaultValue: "Sign out"})}
-              onClick={digg(this, "onSignOutClicked")}
-            />
-          }
-        </div>
-      </div>
-    )
-  }
-
-  onSignOutClicked = async (e) => {
+  const onSignOutClicked = useCallback(async (e) => {
     e.preventDefault()
 
     try {
@@ -80,8 +20,53 @@ class ComponentsAdminLayoutMenu extends React.PureComponent {
     } catch (error) {
       FlashMessage.errorResponse(error)
     }
-  }
+  }, [])
 
+  return (
+    <div className="components--admin--layout--menu" data-triggered={triggered} ref={rootRef}>
+      <div className="menu-logo">
+        <Link className="menu-logo-link" to={Params.withParams({})}>
+          Admin
+        </Link>
+      </div>
+      <div className="menu-items-center">
+        {!noAccess &&
+          <MenuContent active={active} />
+        }
+      </div>
+      <div className="menu-items-bottom">
+        {currentUser &&
+          <div className="menu-user-section">
+            <div className="menu-user-icon">
+              <i className="fa fa-user" />
+            </div>
+            <div className="menu-user-name">
+              <div className="menu-user-name-container">
+                {currentUser.name()}
+              </div>
+            </div>
+          </div>
+        }
+        {currentUser &&
+          <MenuItem
+            active
+            className="sign-out-menu-item"
+            icon="sign-out-alt"
+            label={I18n.t("js.api_maker.super_admin.layout.menu.sign_out", {defaultValue: "Sign out"})}
+            onClick={onSignOutClicked}
+          />
+        }
+      </div>
+    </div>
+  )
 }
 
-export default withCurrentUser(ComponentsAdminLayoutMenu)
+ComponentsAdminLayoutMenu.propTypes = PropTypesExact({
+  active: PropTypes.string,
+  currentUser: PropTypes.instanceOf(User),
+  noAccess: PropTypes.bool.isRequired,
+  onRequestMenuClose: PropTypes.func.isRequired,
+  triggered: PropTypes.bool.isRequired
+})
+
+export default memo(ComponentsAdminLayoutMenu)

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

@@ -1,10 +1,12 @@
-import CanCanLoader from "@kaspernj/api-maker/src/can-can-loader"
-import {digg, digs} from "diggerize"
+import CanCan from "../../../can-can"
+import {digg} from "diggerize"
+import {memo, useMemo} from "react"
 import MenuItem from "./menu-item"
 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"
 
 const abilities = []
 
@@ -14,37 +16,31 @@ for (const model of models) {
   )
 }
 
-export default class ComponentsAdminLayoutMenuContent extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    active: PropTypes.string
-  })
-
-  state = {
-    canCan: undefined
-  }
+const ComponentsAdminLayoutMenuContent = ({active, canCan}) => {
+  const sortedModels = useMemo(
+    () => models.sort((a, b) => a.modelName().human({count: 2}).toLowerCase().localeCompare(b.modelName().human({count: 2}).toLowerCase())),
+    []
+  )
 
-  render() {
-    const {active} = digs(this.props, "active")
-    const {canCan} = digs(this.state, "canCan")
+  return (
+    <>
+      {sortedModels.map((model) => canCan?.can("index", model) &&
+        <MenuItem
+          active={active}
+          icon="sitemap"
+          identifier={digg(model.modelClassData(), "name")}
+          label={model.modelName().human({count: 2})}
+          key={model.modelClassData().name}
+          to={Params.withParams({model: model.modelClassData().name})}
+        />
+      )}
+    </>
+  )
+}
 
-    return (
-      <>
-        <CanCanLoader abilities={abilities} component={this} />
-        {this.sortedModels().map((model) => canCan?.can("index", model) &&
-          <MenuItem
-            active={active}
-            icon="sitemap"
-            identifier={digg(model.modelClassData(), "name")}
-            label={model.modelName().human({count: 2})}
-            key={model.modelClassData().name}
-            to={Params.withParams({model: model.modelClassData().name})}
-          />
-        )}
-      </>
-    )
-  }
+ComponentsAdminLayoutMenuContent.propTypes = PropTypesExact({
+  active: PropTypes.string,
+  canCan: PropTypes.instanceOf(CanCan)
+})
 
-  sortedModels() {
-    return models.sort((a, b) => a.modelName().human({count: 2}).toLowerCase().localeCompare(b.modelName().human({count: 2}).toLowerCase()))
-  }
-}
+export default withCanCan(memo(ComponentsAdminLayoutMenuContent), abilities)

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

@@ -1,31 +1,29 @@
 import "./style"
 import classNames from "classnames"
 import Link from "../../../../link"
+import {memo} from "react"
 import PropTypes from "prop-types"
-import React from "react"
 
-export default class ComponentsAdminLayoutMenuMenuItem extends React.PureComponent {
-  static propTypes = {
-    active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-    className: PropTypes.string,
-    icon: PropTypes.string.isRequired,
-    label: PropTypes.node
-  }
-
-  render() {
-    const {active, children, className, icon, identifier, label, to, ...restProps} = this.props
+const ComponentsAdminLayoutMenuMenuItem = ({active, children, className, icon, identifier, label, to, ...restProps}) => {
+  return (
+    <Link
+      className={classNames("components--admin--layout--menu--menu-item", className)}
+      data-active={active === true || active == identifier}
+      data-identifier={identifier}
+      to={to || "#"}
+      {...restProps}
+    >
+      <i className={`fa fa-fw fa-${icon} menu-item-icon`} />
+      {children || label}
+    </Link>
+  )
+}
 
-    return (
-      <Link
-        className={classNames("components--admin--layout--menu--menu-item", className)}
-        data-active={active === true || active == identifier}
-        data-identifier={identifier}
-        to={to || "#"}
-        {...restProps}
-      >
-        <i className={`fa fa-fw fa-${icon} menu-item-icon`} />
-        {children || label}
-      </Link>
-    )
-  }
+ComponentsAdminLayoutMenuMenuItem.propTypes = {
+  active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  className: PropTypes.string,
+  icon: PropTypes.string.isRequired,
+  label: PropTypes.node
 }
+
+export default memo(ComponentsAdminLayoutMenuMenuItem)

package/src/super-admin/layout/menu/style.scss

@@ -3,6 +3,8 @@
 .components--admin--layout--menu {
   position: fixed;
   z-index: 9;
+  overflow-y: auto;
+  overflow-x: hidden;
   top: 0;
   left: 0;
   display: flex;

package/src/super-admin/layout/no-access.jsx

@@ -1,16 +1,17 @@
-class ComponentsAdminLayoutNoAccess extends React.PureComponent {
-  render() {
-    const {currentUser} = digs(this.props, "currentUser")
+import {memo} from "react"
+import useCurrentUser from "../../use-current-user"
 
-    return (
-      <div
-        className="components--admin--layout-no-access"
-        data-user-roles={currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")}
-      >
-        {I18n.t("js.api_maker.super_admin.layout.no_access.you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}
-      </div>
-    )
-  }
+const ComponentsAdminLayoutNoAccess = () => {
+  const currentUser = useCurrentUser()
+
+  return (
+    <div
+      className="components--admin--layout-no-access"
+      data-user-roles={currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")}
+    >
+      {I18n.t("js.api_maker.super_admin.layout.no_access.you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}
+    </div>
+  )
 }
 
-export default withCurrentUser(ComponentsAdminLayoutNoAccess)
+export default memo(ComponentsAdminLayoutNoAccess)

package/src/super-admin/model-class-table.jsx

@@ -1,46 +1,56 @@
 import ConfigReader from "./config-reader"
-import {digg, digs} from "diggerize"
+import {digg} from "diggerize"
 import * as inflection from "inflection"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo, useCallback} from "react"
 import Table from "../table/table"
+import useCurrentUser from "../use-current-user"
 
-export default class ApiMakerSuperAdminModelClassTable extends React.PureComponent {
-  static propTypes = {
-    currentUser: PropTypes.object,
-    modelClass: PropTypes.func.isRequired,
-    queryParams: PropTypes.object.isRequired
-  }
-
-  render() {
-    const {currentUser, modelClass, queryParams, ...restProps} = this.props
-
-    return (
-      <Table
-        columns={digg(this, "columns")}
-        currentUser={currentUser}
-        modelClass={modelClass}
-        viewModelPath={digg(this, "viewModelPath")}
-        {...restProps}
-      />
-    )
-  }
-
-  columns = () => {
-    const {modelClass} = digs(this.props, "modelClass")
+const ApiMakerSuperAdminModelClassTable = ({modelClass, ...restProps}) => {
+  const currentUser = useCurrentUser()
+
+  const columns = useCallback(() => {
     const configReader = ConfigReader.forModel(modelClass)
 
     return configReader.tableColumns()
-  }
+  }, [modelClass])
+
+  const editModelPath = useCallback((args) => {
+    const argName = inflection.camelize(digg(modelClass.modelClassData(), "name"), true)
+    const model = digg(args, argName)
+
+    return Params.withParams({
+      model: modelClass.modelClassData().name,
+      model_id: model.primaryKey(),
+      mode: "edit"
+    })
+  })
 
-  viewModelPath = (args) => {
-    const argName = inflection.camelize(digg(this.props.modelClass.modelClassData(), "name"), true)
+  const viewModelPath = useCallback((args) => {
+    const argName = inflection.camelize(digg(modelClass.modelClassData(), "name"), true)
     const model = digg(args, argName)
 
     return Params.withParams({
-      model: this.props.modelClass.modelClassData().name,
+      model: modelClass.modelClassData().name,
       model_id: model.primaryKey()
     })
-  }
+  }, [modelClass])
+
+  return (
+    <Table
+      columns={columns}
+      currentUser={currentUser}
+      editModelPath={editModelPath}
+      modelClass={modelClass}
+      viewModelPath={viewModelPath}
+      {...restProps}
+    />
+  )
 }
+
+ApiMakerSuperAdminModelClassTable.propTypes = {
+  modelClass: PropTypes.func.isRequired
+}
+
+export default memo(ApiMakerSuperAdminModelClassTable)

package/src/super-admin/show-nav.jsx

@@ -1,35 +1,35 @@
-import {digg, digs} from "diggerize"
+import {digg} from "diggerize"
 import Link from "../link"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import React from "react"
+import useQueryParams from "on-location-changed/src/use-query-params"
 
-export default class ApiMakerSuperAdminShowNav extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    model: PropTypes.object.isRequired,
-    modelClass: PropTypes.func.isRequired,
-    queryParams: PropTypes.object.isRequired
-  })
+const ApiMakerSuperAdminShowNav = ({model, modelClass}) => {
+  const queryParams = useQueryParams()
+  const reflections = modelClass.reflections()
 
-  render() {
-    const {model, modelClass, queryParams} = digs(this.props, "model", "modelClass", "queryParams")
-    const reflections = modelClass.reflections()
-
-    return (
+  return (
+    <div>
       <div>
-        <div>
-          <Link to={Params.withParams({model: modelClass.modelClassData().name, model_id: queryParams.model_id})}>
-            {I18n.t("js.api_maker.suprt_admin.show_reflection_page.general", {defaultValue: "General"})}
+        <Link to={Params.withParams({model: modelClass.modelClassData().name, model_id: queryParams.model_id})}>
+          {I18n.t("js.api_maker.suprt_admin.show_reflection_page.general", {defaultValue: "General"})}
+        </Link>
+      </div>
+      {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>
+        <div key={reflection.name()}>
+          <Link to={Params.withParams({model: digg(modelClass.modelClassData(), "name"), model_id: model.primaryKey(), model_reflection: reflection.name()})}>
+            {modelClass.humanAttributeName(reflection.name())}
           </Link>
         </div>
-        {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>
-          <div key={reflection.name()}>
-            <Link to={Params.withParams({model: digg(modelClass.modelClassData(), "name"), model_id: model.primaryKey(), model_reflection: reflection.name()})}>
-              {modelClass.humanAttributeName(reflection.name())}
-            </Link>
-          </div>
-        )}
-      </div>
-    )
-  }
+      )}
+    </div>
+  )
 }
+
+ApiMakerSuperAdminShowNav.propTypes = PropTypesExact({
+  model: PropTypes.object.isRequired,
+  modelClass: PropTypes.func.isRequired
+})
+
+export default React.memo(ApiMakerSuperAdminShowNav)

package/src/super-admin/show-page/belongs-to-attribute-row.jsx

@@ -1,25 +1,23 @@
 import AttributeRow from "../../bootstrap/attribute-row"
-import {digs} from "diggerize"
 import * as inflection from "inflection"
 import Link from "../../link"
 import Params from "../../params"
-import React from "react"
+import {memo} from "react"
 
-export default class ApiMakerSuperAdminShowPageBelongsToAttributeRow extends React.PureComponent {
-  render() {
-    const {model, modelClass, reflection} = digs(this.props, "model", "modelClass", "reflection")
-    const reflectionMethodName = inflection.camelize(reflection.name(), true)
-    const subModel = model[reflectionMethodName]()
+const ApiMakerSuperAdminShowPageBelongsToAttributeRow = ({model, modelClass, reflection}) => {
+  const reflectionMethodName = inflection.camelize(reflection.name(), true)
+  const subModel = model[reflectionMethodName]()
 
-    return (
-      <AttributeRow label={modelClass.humanAttributeName(inflection.camelize(reflection.name(), true))}>
-        {subModel &&
-          <Link to={Params.withParams({model: subModel.modelClassData().name, model_id: subModel.primaryKey()})}>
-            {subModel && "name" in subModel && subModel.name()}
-            {subModel && !("name" in subModel) && subModel?.id()}
-          </Link>
-        }
-      </AttributeRow>
-    )
-  }
+  return (
+    <AttributeRow label={modelClass.humanAttributeName(inflection.camelize(reflection.name(), true))}>
+      {subModel &&
+        <Link to={Params.withParams({model: subModel.modelClassData().name, model_id: subModel.primaryKey()})}>
+          {subModel && "name" in subModel && subModel.name()}
+          {subModel && !("name" in subModel) && subModel?.id()}
+        </Link>
+      }
+    </AttributeRow>
+  )
 }
+
+export default memo(ApiMakerSuperAdminShowPageBelongsToAttributeRow)

package/src/super-admin/show-page/index.jsx

@@ -1,54 +1,42 @@
 import AttributeRows from "../../bootstrap/attribute-rows"
 import BelongsToAttributeRow from "./belongs-to-attribute-row"
 import ConfigReader from "../config-reader"
-import {digg, digs} from "diggerize"
+import {digg} from "diggerize"
 import * as inflection from "inflection"
+import Link from "../../link"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
 import ShowNav from "../show-nav"
 import withModel from "../../with-model"
 
-class ApiMakerSuperAdminShowPage extends React.PureComponent {
-  static propTypes = {
-    modelClass: PropTypes.func.isRequired,
-    queryParams: PropTypes.object.isRequired
-  }
-
-  configReader = ConfigReader.forModel(digg(this, "props", "modelClass"))
-
-  render() {
-    const {modelClass, queryParams} = digs(this.props, "modelClass", "queryParams")
-    const attributes = this.attributes()
-    const model = this.model()
-    const extraContent = this.configReader.modelConfig?.show?.extraContent
-    const modelArgs = {}
-
-    modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
-
-    return (
-      <div className="super-admin--show-page">
-        {model &&
-          <ShowNav model={model} modelClass={modelClass} queryParams={queryParams} />
-        }
-        {attributes && model &&
-          <AttributeRows attributes={attributes} model={model} />
-        }
-        {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to").map((reflection) =>
-          <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
-        )}
-        {model && extraContent && extraContent(modelArgs)}
-      </div>
-    )
-  }
-
-  attributes = () => this.configReader.attributesToShow()
-
-  model() {
-    const {modelClass} = digs(this.props, "modelClass")
-    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+const ApiMakerSuperAdminShowPage = ({modelClass, ...restProps}) => {
+  const configReader = ConfigReader.forModel(modelClass)
+  const attributes = configReader.attributesToShow()
+  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+  const model = digg(restProps, camelizedLower)
+  const extraContent = configReader.modelConfig?.show?.extraContent
+  const modelArgs = {}
+
+  modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
+
+  return (
+    <div className="super-admin--show-page">
+      {model &&
+        <ShowNav model={model} modelClass={modelClass} />
+      }
+      {attributes && model &&
+        <AttributeRows attributes={attributes} model={model} />
+      }
+      {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to").map((reflection) =>
+        <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
+      )}
+      {model && extraContent && extraContent(modelArgs)}
+    </div>
+  )
+}
 
-    return digg(this, "props", camelizedLower)
-  }
+ApiMakerSuperAdminShowPage.propTypes = {
+  modelClass: PropTypes.func.isRequired
 }
 
 const modelClassResolver = {callback: ({queryParams}) => {
@@ -59,7 +47,7 @@ const modelClassResolver = {callback: ({queryParams}) => {
 }}
 
 export default withModel(
-  ApiMakerSuperAdminShowPage,
+  memo(ApiMakerSuperAdminShowPage),
   modelClassResolver,
   ({modelClass}) => {
     const preload = []