@kaspernj/api-maker 1.0.385 → 1.0.387

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.385",
+  "version": "1.0.387",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/base-model/attribute.mjs

@@ -28,5 +28,6 @@ export default class ApiMakerBaseModelAttribute {
     return false
   }
 
+  isTranslated = () => digg(this, "attributeData", "translated")
   name = () => digg(this, "attributeData", "name")
 }

package/src/super-admin/config-reader.jsx

@@ -60,14 +60,20 @@ export default class ApiMakerSuperAdminConfigReader {
     const columns = []
 
     for (const attribute of attributes) {
-      if (!attribute.isSelectedByDefault()) continue
+      if (!attribute.isSelectedByDefault() && attribute.name() != "name") {
+        continue
+      }
 
       const camelizedName = inflection.camelize(attribute.name(), true)
       const column = {
         attribute: camelizedName
       }
 
-      if (attribute.isColumn()) column.sortKey = camelizedName
+      if (attribute.isColumn()) {
+        column.sortKey = camelizedName
+      } else if (attribute.isTranslated()) {
+        column.sortKey = `currentTranslation${camelizedName}`
+      }
 
       columns.push(column)
     }

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

@@ -0,0 +1,35 @@
+import BaseComponent from "../../base-component"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+export default memo(shapeComponent(class EditAttributeContent extends BaseComponent {
+  render() {
+    const {attribute, id, inputs, model, name} = this.props
+
+    if (!(attribute.attribute in model)) {
+      throw new Error(`${attribute.attribute} isn't set on the resource ${model.modelClassData().name}`)
+    }
+
+    const defaultValue = useCallback(() => model[attribute.attribute]() || "")
+    const [value, setValue] = useState(() => defaultValue())
+    const onChangeValue = useCallback((newValue) => {
+      inputs[name] = newValue
+      setValue(newValue)
+    })
+    useMemo(() => {
+      inputs[name] = value
+    }, [])
+
+    const contentArgs = () => ({
+      inputProps: {
+        attribute: attribute.attribute,
+        defaultValue: defaultValue(),
+        id,
+        model
+      },
+      onChangeValue
+    })
+
+    return attribute.content(contentArgs())
+  }
+}))

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

@@ -0,0 +1,61 @@
+import BaseComponent from "../../base-component"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Text, TextInput, View} from "react-native"
+import {memo, useMemo} from "react"
+
+export default memo(shapeComponent(class EditAttributeInput extends BaseComponent {
+  static propTypes = propTypesExact({
+    inputs: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired
+  })
+
+  setup() {
+    const {inputs, name} = this.p
+
+    this.useStates({
+      value: this.defaultValue()
+    })
+
+    useMemo(() => {
+      inputs[name] = this.s.value
+    }, [])
+  }
+
+  defaultValue = () => this.p.model[this.p.attributeName]() || ""
+
+  render() {
+    const {attributeName, id, label, model, name} = this.p
+    const {value} = this.s
+
+    if (!(attributeName in model)) {
+      throw new Error(`${attributeName} isn't set on the resource ${model.modelClassData().name}`)
+    }
+
+    return (
+      <View style={{marginBottom: 12}}>
+        <Text>{label}</Text>
+        <View>
+          <TextInput
+            dataSet={{
+              attribute: attributeName,
+              id,
+              name
+            }}
+            onChangeText={this.tt.onChangeText}
+            style={{paddingTop: 9, paddingRight: 13, paddingBottom: 9, paddingLeft: 13, borderRadius: 5, backgroundColor: "#fff", border: "1px solid #cecece"}}
+            value={value}
+          />
+        </View>
+      </View>
+    )
+  }
+
+  onChangeText = (newValue) => {
+    const {inputs, name} = this.p
+
+    inputs[name] = newValue
+    this.setState({value: newValue})
+  }
+}))

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

@@ -0,0 +1,51 @@
+import BaseComponent from "../../base-component"
+import {digg} from "diggerize"
+import EditAttributeContent from "./edit-attribute-content"
+import EditAttributeInput from "./edit-attribute-input"
+import * as inflection from "inflection"
+import Locales from "shared/locales"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+export default memo(shapeComponent(class EditAttribute extends BaseComponent {
+  render() {
+    const {attribute, inputs, model, modelClass} = this.props
+    const availableLocales = Locales.availableLocales()
+    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+
+    return (
+      <>
+        {attribute.content &&
+          <EditAttributeContent
+            attribute={attribute}
+            id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+            inputs={inputs}
+            model={model}
+            name={inflection.underscore(attribute.attribute)}
+          />
+        }
+        {!attribute.content && attribute.translated && availableLocales.map((locale) =>
+          <EditAttributeInput
+            attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
+            id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}
+            inputs={inputs}
+            label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
+            model={model}
+            name={`${inflection.underscore(attribute.attribute)}_${locale}`}
+            key={locale}
+          />
+        )}
+        {!attribute.content && !attribute.translated &&
+          <EditAttributeInput
+            attributeName={attribute.attribute}
+            id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
+            inputs={inputs}
+            label={modelClass.humanAttributeName(attribute.attribute)}
+            model={model}
+            name={inflection.underscore(attribute.attribute)}
+          />
+        }
+      </>
+    )
+  }
+}))

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

@@ -1,196 +1,109 @@
+import BaseComponent from "../base-component"
 import ConfigReader from "./config-reader.jsx"
 import {digg} from "diggerize"
+import EditAttribute from "./edit-page/edit-attribute"
 import * as inflection from "inflection"
-import {Pressable, Text, TextInput, View} from "react-native"
+import {Pressable, Text, View} from "react-native"
 import Locales from "shared/locales"
-import {memo, useCallback, useMemo, useState} from "react"
+import {memo} from "react"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../use-current-user"
 import useModel from "../use-model"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
-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}`)
-  }
-
-  const defaultValue = useCallback(() => model[attributeName]() || "")
-  const [value, setValue] = useState(() => defaultValue())
-
-  useMemo(() => {
-    inputs[name] = value
-  }, [])
-
-  const onChangeText = useCallback((newValue) => {
-    inputs[name] = newValue
-    setValue(newValue)
-  }, [])
-
-  return (
-    <View style={{marginBottom: 12}}>
-      <Text>{label}</Text>
-      <View>
-        <TextInput
-          dataSet={{
-            attribute: attributeName,
-            id,
-            name
-          }}
-          onChangeText={onChangeText}
-          style={{paddingTop: 9, paddingRight: 13, paddingBottom: 9, paddingLeft: 13, borderRadius: 5, backgroundColor: "#fff", border: "1px solid #cecece"}}
-          value={value}
-        />
-      </View>
-    </View>
-  )
-})
-
-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}`)
-  }
-
-  const defaultValue = useCallback(() => model[attribute.attribute]() || "")
-  const [value, setValue] = useState(() => defaultValue())
-  const onChangeValue = useCallback((newValue) => {
-    inputs[name] = newValue
-    setValue(newValue)
-  })
-  useMemo(() => {
-    inputs[name] = value
-  }, [])
-
-  const contentArgs = () => ({
-    inputProps: {
-      attribute: attribute.attribute,
-      defaultValue: defaultValue(),
-      id,
-      model
-    },
-    onChangeValue
+export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends BaseComponent {
+  static propTypes = propTypesExact({
+    modelClass: PropTypes.func.isRequired
   })
 
-  return attribute.content(contentArgs())
-})
-
-const EditAttribute = memo(({attribute, inputs, model, modelClass}) => {
-  const availableLocales = Locales.availableLocales()
-  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+  inputs = {}
+
+  setup() {
+    const {modelClass} = this.p
+    const modelClassName = modelClass.modelClassData().name
+    const availableLocales = Locales.availableLocales()
+    this.configReader = ConfigReader.forModel(modelClass)
+    const currentUser = useCurrentUser()
+    const queryParams = useQueryParams()
+    const selectedModelAttributes = ["id"]
+    const selectedAttributes = {}
+    this.attributes = this.configReader.modelConfig?.edit?.attributes
+
+    if (!this.attributes) {
+      throw new Error(`No 'attributes' given from edit config for ${modelClass.modelClassData().name}`)
+    }
 
-  return (
-    <>
-      {attribute.content &&
-        <EditAttributeContent
-          attribute={attribute}
-          id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
-          inputs={inputs}
-          model={model}
-          name={inflection.underscore(attribute.attribute)}
-        />
-      }
-      {!attribute.content && attribute.translated && availableLocales.map((locale) =>
-        <EditAttributeInput
-          attributeName={`${attribute.attribute}${inflection.camelize(locale)}`}
-          id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}_${locale}`}
-          inputs={inputs}
-          label={`${modelClass.humanAttributeName(attribute.attribute)} (${locale})`}
-          model={model}
-          name={`${inflection.underscore(attribute.attribute)}_${locale}`}
-          key={locale}
-        />
-      )}
-      {!attribute.content && !attribute.translated &&
-        <EditAttributeInput
-          attributeName={attribute.attribute}
-          id={`${inflection.underscore(camelizedLower)}_${inflection.underscore(attribute.attribute)}`}
-          inputs={inputs}
-          label={modelClass.humanAttributeName(attribute.attribute)}
-          model={model}
-          name={inflection.underscore(attribute.attribute)}
-        />
+    for (const attribute of this.attributes) {
+      if (attribute.translated) {
+        for (const locale of availableLocales) {
+          selectedModelAttributes.push(`${attribute.attribute}${inflection.camelize(locale)}`)
+        }
+      } else {
+        selectedModelAttributes.push(attribute.attribute)
       }
-    </>
-  )
-})
+    }
 
-const EditPage = ({modelClass}) => {
-  const availableLocales = Locales.availableLocales()
-  const currentUser = useCurrentUser()
-  const queryParams = useQueryParams()
-  const configReader = ConfigReader.forModel(modelClass)
-  const inputs = useMemo(() => ({}))
-  const modelClassName = modelClass.modelClassData().name
-  const modelIdVarName = `${inflection.camelize(modelClass.modelClassData().name, true)}Id`
-  const modelVarName = inflection.camelize(modelClass.modelClassData().name, true)
-  const extraContent = configReader.modelConfig?.edit?.extraContentconst
-  const attributes = configReader.modelConfig?.edit?.attributes
-  const selectedModelAttributes = ["id"]
-  const selectedAttributes = {}
+    selectedAttributes[modelClassName] = selectedModelAttributes
 
-  selectedAttributes[modelClassName] = selectedModelAttributes
+    const useModelResult = useModel(modelClass, {
+      cacheArgs: [currentUser?.id()],
+      loadByQueryParam: (props) => props.queryParams.model_id,
+      newIfNoId: true,
+      select: selectedAttributes
+    })
 
-  if (!attributes) {
-    throw new Error(`No 'attributes' given from edit config for ${modelClass.modelClassData().name}`)
-  }
+    const modelIdVarName = `${inflection.camelize(modelClass.modelClassData().name, true)}Id`
+    const modelVarName = inflection.camelize(modelClass.modelClassData().name, true)
 
-  for (const attribute of attributes) {
-    if (attribute.translated) {
-      for (const locale of availableLocales) {
-        selectedModelAttributes.push(`${attribute.attribute}${inflection.camelize(locale)}`)
-      }
-    } else {
-      selectedModelAttributes.push(attribute.attribute)
-    }
+    this.model = digg(useModelResult, modelVarName)
+    this.modelId = queryParams.model_id
+    this.modelArgs = {}
+    this.modelArgs[modelIdVarName] = this.modelId
   }
 
-  const useModelResult = useModel(modelClass, {
-    cacheArgs: [currentUser?.id()],
-    loadByQueryParam: (props) => props.queryParams.model_id,
-    newIfNoId: true,
-    select: selectedAttributes
-  })
-
-  const model = digg(useModelResult, modelVarName)
-  const modelId = queryParams.model_id
-  const modelArgs = {}
-
-  modelArgs[modelIdVarName] = modelId
+  render() {
+    const {attributes, model} = this.tt
+    const {modelClass} = this.p
+    const extraContent = this.configReader.modelConfig?.edit?.extraContentconst
+
+    return (
+      <View dataSet={{class: "super-admin--edit-page"}}>
+        {model && attributes?.map((attribute) =>
+          <EditAttribute attribute={attribute} inputs={this.inputs} key={attribute.attribute} model={model} modelClass={modelClass} />
+        )}
+        {extraContent && extraContent(modelArgs)}
+        <Pressable
+          dataSet={{class: "submit-button"}}
+          onPress={this.tt.onSubmit}
+          style={{
+            paddingTop: 18,
+            paddingRight: 24,
+            paddingBottom: 18,
+            paddingLeft: 24,
+            borderRadius: 10,
+            backgroundColor: "#4c93ff",
+            marginTop: 10
+          }}
+        >
+          <Text style={{color: "#fff"}}>
+            Submit
+          </Text>
+        </Pressable>
+      </View>
+    )
+  }
 
-  const onSubmit = useCallback(async () => {
+  onSubmit = async () => {
     try {
-      model.assignAttributes(inputs)
+      const {inputs, model} = this.tt
 
-      await model.save(inputs)
+      model.assignAttributes(inputs)
+      await model.save(this.inputs)
       Params.changeParams({mode: undefined, model_id: model.id()})
     } catch (error) {
       FlashMessage.errorResponse(error)
     }
-  }, [model])
-
-  return (
-    <View dataSet={{class: "super-admin--edit-page"}}>
-      {model && attributes?.map((attribute) =>
-        <EditAttribute attribute={attribute} inputs={inputs} key={attribute.attribute} model={model} modelClass={modelClass} />
-      )}
-      {extraContent && extraContent(modelArgs)}
-      <Pressable
-        dataSet={{class: "submit-button"}}
-        onPress={onSubmit}
-        style={{
-          paddingTop: 18,
-          paddingRight: 24,
-          paddingBottom: 18,
-          paddingLeft: 24,
-          borderRadius: 10,
-          backgroundColor: "#4c93ff",
-          marginTop: "10px"
-        }}
-      >
-        <Text style={{color: "#fff"}}>
-          Submit
-        </Text>
-      </Pressable>
-    </View>
-  )
-}
-
-export default memo(EditPage)
+  }
+}))

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

@@ -1,55 +1,64 @@
 import "./style"
+import BaseComponent from "../../../base-component"
 import EventListener from "../../../event-listener"
+import {memo, useRef} from "react"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useCallback, useRef} from "react"
-import useShape from "set-state-compare/src/use-shape.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-const ApiMakerSuperAdminLayoutHeader = ({actions, onTriggerMenu, title}) => {
-  const s = useShape()
-  const headerActionsRef = useRef()
-  const setHeaderActionsActive = s.useState("headerActionsActive", false)
-  const onGearsClicked = useCallback((e) => {
-    e.preventDefault()
-    setHeaderActionsActive(!s.state.headerActionsActive)
-  }, [])
+export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends BaseComponent {
+  static propTypes = PropTypesExact({
+    actions: PropTypes.node,
+    onTriggerMenu: PropTypes.func.isRequired,
+    title: PropTypes.string
+  })
 
-  const onWindowMouseUp = useCallback((e) => {
-    // Close the header actions menu if clicked happened outside
-    if (s.state.headerActionsActive && headerActionsRef.current && !headerActionsRef.current.contains(e.target)) setHeaderActionsActive(false)
-  }, [])
+  setup() {
+    this.headerActionsRef = useRef()
+    this.useStates({
+      headerActionsActive: false
+    })
+  }
 
-  return (
-    <div className="components--admin--layout--header">
-      <EventListener event="mouseup" onCalled={onWindowMouseUp} target={window} />
-      <div className="header-title-container">
-        {title}
-      </div>
-      {actions &&
-        <div className="header-actions-container" data-active={s.state.headerActionsActive}>
-          <div className="header-actions" ref={headerActionsRef}>
-            {actions}
-          </div>
+  render() {
+    const {actions, onTriggerMenu, title} = this.props
+
+    return (
+      <div className="components--admin--layout--header">
+        <EventListener event="mouseup" onCalled={this.tt.onWindowMouseUp} target={window} />
+        <div className="header-title-container">
+          {title}
         </div>
-      }
-      <div className="burger-menu-container">
         {actions &&
-          <a className="actions-link" href="#" onClick={onGearsClicked}>
-            <i className="fa fa-gear" />
-          </a>
+          <div className="header-actions-container" data-active={this.s.headerActionsActive}>
+            <div className="header-actions" ref={this.tt.headerActionsRef}>
+              {actions}
+            </div>
+          </div>
         }
-        <a className="burger-menu-link" href="#" onClick={onTriggerMenu}>
-          <i className="fa fa-bars" />
-        </a>
+        <div className="burger-menu-container">
+          {actions &&
+            <a className="actions-link" href="#" onClick={this.tt.onGearsClicked}>
+              <i className="fa fa-gear" />
+            </a>
+          }
+          <a className="burger-menu-link" href="#" onClick={onTriggerMenu}>
+            <i className="fa fa-bars" />
+          </a>
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
 
-ApiMakerSuperAdminLayoutHeader.propTypes = PropTypesExact({
-  actions: PropTypes.node,
-  onTriggerMenu: PropTypes.func.isRequired,
-  title: PropTypes.string
-})
+  onGearsClicked = (e) => {
+    e.preventDefault()
+    this.setState({headerActionsActive: !this.s.headerActionsActive})
+  }
 
-export default memo(ApiMakerSuperAdminLayoutHeader)
+  onWindowMouseUp = (e) => {
+    // Close the header actions menu if clicked happened outside
+    if (this.s.headerActionsActive && this.tt.headerActionsRef.current && !this.tt.headerActionsRef.current.contains(e.target)) {
+      this.setState({headerActionsActive: false})
+    }
+  }
+}))

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

@@ -1,4 +1,5 @@
 import "./style"
+import BaseComponent from "../../base-component"
 import classNames from "classnames"
 import CommandsPool from "../../commands-pool"
 import config from "super-admin/config"
@@ -7,92 +8,94 @@ import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useCallback, useMemo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../use-current-user"
 import useShape from "set-state-compare/src/use-shape.js"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 
-const ApiMakerSuperAdminLayout = ({
-  actions,
-  active,
-  children,
-  className,
-  currentCustomer,
-  currentCustomerId,
-  headerTitle,
-  menu,
-  ...restProps
-}) => {
-  const s = useShape()
-  const currentUser = useCurrentUser()
+export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseComponent {
+  static propTypes = PropTypesExact({
+    actions: PropTypes.node,
+    active: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    currentCustomer: PropTypes.instanceOf(User),
+    currentCustomerId: PropTypes.string,
+    currentUser: PropTypes.instanceOf(User),
+    headTitle: PropTypes.string,
+    headerTitle: PropTypes.string
+  })
 
-  useMemo(() => {
-    CommandsPool.current().globalRequestData.layout = "admin"
-    CommandsPool.current().globalRequestData.locale = I18n.locale
-  }, [I18n.locale])
+  render() {
+    const {
+      actions,
+      active,
+      children,
+      className,
+      currentCustomer,
+      currentCustomerId,
+      headerTitle,
+      menu,
+      ...restProps
+    } = this.props
+    const s = useShape()
+    const currentUser = useCurrentUser()
 
-  const headTitle = headTitle || headerTitle
+    useMemo(() => {
+      CommandsPool.current().globalRequestData.layout = "admin"
+      CommandsPool.current().globalRequestData.locale = I18n.locale
+    }, [I18n.locale])
 
-  if (headTitle) {
-    document.title = headTitle
-  } else {
-    document.title = "Wooftech"
-  }
-
-  const setMenuTriggered = s.useState("menuTriggered", false)
-  const noAccess = !currentUser
-  const onRequestMenuClose = useCallback(() => setMenuTriggered(false), [])
-  const onTriggerMenu = useCallback((e) => {
-    e.preventDefault()
-    setMenuTriggered(!s.state.menuTriggered)
-  }, [])
+    const headTitle = headTitle || headerTitle
 
-  return (
-    <div className={classNames("components--admin--layout", className)} data-menu-triggered={s.state.menuTriggered} {...restProps}>
-      <Menu
-        active={active}
-        noAccess={noAccess}
-        onRequestMenuClose={onRequestMenuClose}
-        triggered={s.state.menuTriggered}
-      />
-      <Header actions={actions} onTriggerMenu={onTriggerMenu} title={headerTitle} />
-      <div className="app-layout-content-container">
-        {noAccess &&
-          <>
-            <NoAccess />
-            {currentUser &&
-              <>
-                <div className="mb-4">
-                  {I18n.t("js.api_maker.super_admin.layout.try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
-                </div>
-              </>
-            }
-            {!currentUser &&
-              <>
-                <div className="mb-4">
-                  {I18n.t("js.api_maker.super_admin.layout.try_signing_in", {defaultValue: "Try signing in."})}
-                </div>
-                {config.signInContent()}
-              </>
-            }
-          </>
-        }
-        {!noAccess && children}
-      </div>
-    </div>
-  )
-}
+    if (headTitle) {
+      document.title = headTitle
+    } else {
+      document.title = "Wooftech"
+    }
 
-ApiMakerSuperAdminLayout.propTypes = PropTypesExact({
-  actions: PropTypes.node,
-  active: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  currentCustomer: PropTypes.instanceOf(User),
-  currentCustomerId: PropTypes.string,
-  currentUser: PropTypes.instanceOf(User),
-  headTitle: PropTypes.string,
-  headerTitle: PropTypes.string
-})
+    const setMenuTriggered = s.useState("menuTriggered", false)
+    const noAccess = !currentUser
+    const onRequestMenuClose = useCallback(() => setMenuTriggered(false), [])
+    const onTriggerMenu = useCallback((e) => {
+      e.preventDefault()
+      setMenuTriggered(!s.state.menuTriggered)
+    }, [])
 
-export default memo(ApiMakerSuperAdminLayout)
+    return (
+      <div className={classNames("components--admin--layout", className)} data-menu-triggered={s.state.menuTriggered} {...restProps}>
+        <Menu
+          active={active}
+          noAccess={noAccess}
+          onRequestMenuClose={onRequestMenuClose}
+          triggered={s.state.menuTriggered}
+        />
+        <Header actions={actions} onTriggerMenu={onTriggerMenu} title={headerTitle} />
+        <div className="app-layout-content-container">
+          {noAccess &&
+            <>
+              <NoAccess />
+              {currentUser &&
+                <>
+                  <div className="mb-4">
+                    {I18n.t("js.api_maker.super_admin.layout.try_signing_out_and_in_with_a_different_user", {defaultValue: "Try signing in with a different user."})}
+                  </div>
+                </>
+              }
+              {!currentUser &&
+                <>
+                  <div className="mb-4">
+                    {I18n.t("js.api_maker.super_admin.layout.try_signing_in", {defaultValue: "Try signing in."})}
+                  </div>
+                  {config.signInContent()}
+                </>
+              }
+            </>
+          }
+          {!noAccess && children}
+        </div>
+      </div>
+    )
+  }
+}))

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

@@ -1,17 +1,67 @@
 import "./style"
-import {memo, useCallback, useRef} from "react"
+import BaseComponent from "../../../base-component"
+import {memo, useRef} from "react"
 import Link from "../../../link"
 import MenuContent from "./menu-content"
 import MenuItem from "./menu-item"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../../use-current-user"
 
-const ComponentsAdminLayoutMenu = ({active, noAccess, triggered}) => {
-  const currentUser = useCurrentUser()
-  const rootRef = useRef()
+export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.string,
+    noAccess: PropTypes.bool.isRequired,
+    onRequestMenuClose: PropTypes.func.isRequired,
+    triggered: PropTypes.bool.isRequired
+  })
 
-  const onSignOutClicked = useCallback(async (e) => {
+  render() {
+    const {active, noAccess, triggered} = this.props
+    const currentUser = useCurrentUser()
+    const rootRef = useRef()
+
+    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={this.tt.onSignOutClicked}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  onSignOutClicked = async (e) => {
     e.preventDefault()
 
     try {
@@ -20,52 +70,5 @@ const ComponentsAdminLayoutMenu = ({active, noAccess, triggered}) => {
     } 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>
-  )
-}
-
-ComponentsAdminLayoutMenu.propTypes = PropTypesExact({
-  active: PropTypes.string,
-  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,3 +1,4 @@
+import BaseComponent from "../../../base-component"
 import {digg} from "diggerize"
 import {memo, useMemo} from "react"
 import MenuItem from "./menu-item"
@@ -5,33 +6,35 @@ import models from "../../models"
 import Params from "../../../params"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCanCan from "../../../use-can-can"
 
-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]
-  )
+export default memo(shapeComponent(class ComponentsAdminLayoutMenuContent extends BaseComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.string
+  })
 
-  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})}
-        />
-      )}
-    </>
-  )
-}
+  render() {
+    const {active} = this.p
+    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]
+    )
 
-ComponentsAdminLayoutMenuContent.propTypes = PropTypesExact({
-  active: PropTypes.string
-})
-
-export default memo(ComponentsAdminLayoutMenuContent)
+    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})}
+          />
+        )}
+      </>
+    )
+  }
+}))

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

@@ -1,29 +1,33 @@
 import "./style"
+import BaseComponent from "../../../../base-component"
 import classNames from "classnames"
 import Link from "../../../../link"
 import {memo} from "react"
 import PropTypes from "prop-types"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-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>
-  )
-}
+export default memo(shapeComponent(class ComponentsAdminLayoutMenuMenuItem extends BaseComponent {
+  static propTypes = {
+    active: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    className: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    label: PropTypes.node
+  }
 
-ComponentsAdminLayoutMenuMenuItem.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
 
-export default memo(ComponentsAdminLayoutMenuMenuItem)
+    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>
+    )
+  }
+}))

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

@@ -1,17 +1,19 @@
+import BaseComponent from "../../base-component"
 import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import useCurrentUser from "../../use-current-user"
 
-const ComponentsAdminLayoutNoAccess = () => {
-  const currentUser = useCurrentUser()
+export default memo(shapeComponent(class ComponentsAdminLayoutNoAccess extends BaseComponent {
+  render() {
+    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 memo(ComponentsAdminLayoutNoAccess)
+    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>
+    )
+  }
+}))

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

@@ -1,23 +1,26 @@
 import AttributeRow from "../../bootstrap/attribute-row"
+import BaseComponent from "../../base-component"
 import * as inflection from "inflection"
 import Link from "../../link"
-import Params from "../../params"
 import {memo} from "react"
+import Params from "../../params"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-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>
-  )
-}
+export default memo(shapeComponent(class ApiMakerSuperAdminShowPageBelongsToAttributeRow extends BaseComponent {
+  render() {
+    const {model, modelClass, reflection} = this.props
+    const reflectionMethodName = inflection.camelize(reflection.name(), true)
+    const subModel = model[reflectionMethodName]()
 
-export default memo(ApiMakerSuperAdminShowPageBelongsToAttributeRow)
+    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>
+    )
+  }
+}))

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

@@ -1,31 +1,48 @@
+import BaseComponent from "../base-component"
 import {digg} from "diggerize"
-import {memo} from "react"
+import {memo, useMemo} from "react"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-const SuperAdminShowReflectionActions = ({model, modelClass, reflectionName}) => {
-  const reflection = modelClass.reflections().find((reflection) => reflection.name() == reflectionName)
-  const modelClassName = digg(reflection, "reflectionData", "className")
-  const modelData = {}
-  const dataParamName = inflection.singularize(reflection.reflectionData.collectionName)
-  const canCan = useCanCan(() => [[reflection.modelClass(), ["new"]]])
+export default memo(shapeComponent(class SuperAdminShowReflectionActions extends BaseComponent {
+  static propTypes = propTypesExact({
+    model: PropTypes.object,
+    modelClass: PropTypes.func,
+    reflectionName: PropTypes.string
+  })
 
-  modelData[reflection.foreignKey()] = model?.id()
+  setup() {
+    const {modelClass, reflectionName} = this.p
 
-  const linkParams = {
-    model: modelClassName,
-    mode: "new"
+    this.reflection = useMemo(() => modelClass.reflections().find((reflection) => reflection.name() == reflectionName), [modelClass, reflectionName])
+    this.canCan = useCanCan(() => [[this.reflection.modelClass(), ["new"]]])
   }
 
-  linkParams[dataParamName] = modelData
+  render() {
+    const {canCan, reflection} = this.tt
+    const {model} = this.p
+    const modelClassName = digg(reflection, "reflectionData", "className")
+    const modelData = {}
+    const dataParamName = inflection.singularize(reflection.reflectionData.collectionName)
 
-  return (
-    <>
-      {canCan?.can("new", reflection.modelClass()) &&
-        <Link className="create-new-model-link" to={Params.withParams(linkParams)}>
-          Create new
-        </Link>
-      }
-    </>
-  )
-}
+    modelData[reflection.foreignKey()] = model?.id()
 
-export default memo(SuperAdminShowReflectionActions)
+    const linkParams = {
+      model: modelClassName,
+      mode: "new"
+    }
+
+    linkParams[dataParamName] = modelData
+
+    return (
+      <>
+        {canCan?.can("new", reflection.modelClass()) &&
+          <Link className="create-new-model-link" to={Params.withParams(linkParams)}>
+            Create new
+          </Link>
+        }
+      </>
+    )
+  }
+}))

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

@@ -1,41 +1,44 @@
+import BaseComponent from "../base-component"
 import {digg} from "diggerize"
 import PropTypes from "prop-types"
-import React, {memo} from "react"
+import propTypesExact from "prop-types-exact"
+import {memo} from "react"
 import ModelClassTable from "./model-class-table"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowNav from "./show-nav"
 import useQueryParams from "on-location-changed/src/use-query-params"
-import withModel from "../with-model"
 
-const ApiMakerSuperAdminShowReflectionPage = ({modelClass, restProps}) => {
-  const queryParams = useQueryParams()
-  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
-  const useModelResult = useModel(modelClass, {loadByQueryParam: ({queryParams}) => digg(queryParams, "model_id")})
-  const model = digg(useModelResult, camelizedLower)
-  const reflections = modelClass.reflections()
-  const reflection = reflections.find((reflectionI) => reflectionI.name() == queryParams.model_reflection)
-  const reflectionModelClass = reflection.modelClass()
-  let collection
+export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage extends BaseComponent {
+  static propTypes = propTypesExact({
+    modelClass: PropTypes.func.isRequired
+  })
 
-  if (model) collection = model[reflection.name()]()
+  render() {
+    const {modelClass} = this.p
+    const queryParams = useQueryParams()
+    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+    const useModelResult = useModel(modelClass, {loadByQueryParam: ({queryParams}) => digg(queryParams, "model_id")})
+    const model = digg(useModelResult, camelizedLower)
+    const reflections = modelClass.reflections()
+    const reflection = reflections.find((reflectionI) => reflectionI.name() == queryParams.model_reflection)
+    const reflectionModelClass = reflection.modelClass()
+    let collection
 
-  return (
-    <div className="super-admin--show-page">
-      {model &&
-        <ShowNav model={model} modelClass={modelClass} />
-      }
-      {collection &&
-        <ModelClassTable
-          collection={collection}
-          key={reflectionModelClass.modelName().human()}
-          modelClass={reflectionModelClass}
-        />
-      }
-    </div>
-  )
-}
+    if (model) collection = model[reflection.name()]()
 
-ApiMakerSuperAdminShowReflectionPage.propTypes = {
-  modelClass: PropTypes.func.isRequired
-}
-
-export default memo(ApiMakerSuperAdminShowReflectionPage)
+    return (
+      <div className="super-admin--show-page">
+        {model &&
+          <ShowNav model={model} modelClass={modelClass} />
+        }
+        {collection &&
+          <ModelClassTable
+            collection={collection}
+            key={reflectionModelClass.modelName().human()}
+            modelClass={reflectionModelClass}
+          />
+        }
+      </div>
+    )
+  }
+}))

package/src/use-model.mjs

@@ -1,4 +1,4 @@
-import {useCallback, useLayoutEffect, useMemo, useState} from "react"
+import {useCallback, useLayoutEffect, useMemo} from "react"
 import Devise from "./devise.mjs"
 import * as inflection from "inflection"
 import ModelEvents from "./model-events.mjs"