@kaspernj/api-maker 1.0.377 → 1.0.379

package/package.json

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

package/src/base-component.jsx

@@ -0,0 +1,8 @@
+import fetchingObject from "fetching-object"
+import {ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default class BaseComponent extends ShapeComponent {
+  p = fetchingObject(() => this.props)
+  s = fetchingObject(() => this.shape || this.state)
+  tt = fetchingObject(this)
+}

package/src/bootstrap/attribute-row/index.jsx

@@ -17,14 +17,18 @@ export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends S
     checkIfAttributeLoaded: PropTypes.bool.isRequired,
     children: PropTypes.node,
     identifier: PropTypes.string,
-    label: PropTypes.node,
+    label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
     model: PropTypes.object,
     value: PropTypes.node
   }
 
   setup() {
     this.attribute = useMemo(
-      () => this.props.model?.constructor?.attributes()?.find((attribute) => attribute.name() == inflection.underscore(this.props.attribute)),
+      () => {
+        if (this.props.attribute) {
+          return this.props.model?.constructor?.attributes()?.find((attribute) => attribute.name() == inflection.underscore(this.props.attribute))
+        }
+      },
       [this.props.attribute, this.props.model]
     )
   }

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

@@ -1,19 +1,21 @@
+import BaseComponent from "../base-component"
+import {memo} from "react"
 import ModelClassTable from "./model-class-table"
 import PropTypes from "prop-types"
-import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-const ApiMakerSuperAdminIndexPage = ({modelClass}) => {
-  return (
-    <div className="super-admin--index-page">
-      <ModelClassTable
-        modelClass={modelClass}
-      />
-    </div>
-  )
-}
+export default memo(shapeComponent(class ApiMakerSuperAdminIndexPage extends BaseComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired
+  }
 
-ApiMakerSuperAdminIndexPage.propTypes = {
-  modelClass: PropTypes.func.isRequired
-}
+  render() {
+    const {modelClass} = this.props
 
-export default memo(ApiMakerSuperAdminIndexPage)
+    return (
+      <div className="super-admin--index-page">
+        <ModelClassTable modelClass={modelClass} />
+      </div>
+    )
+  }
+}))

package/src/super-admin/index.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../base-component"
 import EditPage from "./edit-page"
 import hasEditConfig from "./has-edit-config.js"
 import IndexPage from "./index-page"
@@ -5,36 +6,52 @@ import Layout from "./layout"
 import Link from "../link"
 import {memo, useMemo} from "react"
 import * as modelsModule from "@kaspernj/api-maker/src/models.mjs.erb"
-import {useCallback, useEffect, useState} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowPage from "./show-page"
 import ShowReflectionActions from "./show-reflection-actions"
 import ShowReflectionPage from "./show-reflection-page"
+import {useEffect} from "react"
 import useCanCan from "../use-can-can"
 import useCurrentUser from "../use-current-user.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
-const ApiMakerSuperAdmin = () => {
-  const currentUser = useCurrentUser()
-  const queryParams = useQueryParams()
-  let modelClass, pageToShow
+export default memo(shapeComponent(class ApiMakerSuperAdmin extends BaseComponent {
+  setup() {
+    this.queryParams = useQueryParams()
 
-  if (queryParams.model) modelClass = modelsModule[queryParams.model]
+    if (this.queryParams.model) {
+      this.modelClass = modelsModule[this.queryParams.model]
+    } else {
+      this.modelClass = null
+    }
+
+    this.modelId = this.queryParams.model_id
+    this.modelName = this.modelClass?.modelClassData()?.name
+    this.currentUser = useCurrentUser()
 
-  const modelId = queryParams.model_id
-  const modelName = modelClass?.modelClassData()?.name
-  const [model, setModel] = useState()
-  const canCan = useCanCan(
-    () => {
-      const abilities = []
+    this.canCan = useCanCan(
+      () => {
+        const abilities = []
 
-      if (modelClass) abilities.push([modelClass, ["new"]])
+        if (this.modelClass) abilities.push([this.modelClass, ["new"]])
+
+        return abilities
+      },
+      [this.currentUser?.id(), this.modelClass]
+    )
+
+    this.useStates({
+      model: undefined
+    })
+    useEffect(
+      () => { this.loadModel() },
+      [this.modelId]
+    )
+  }
 
-      return abilities
-    },
-    [currentUser?.id(), modelClass]
-  )
+  loadModel = async () => {
+    const {modelClass, modelId, modelName} = this.tt
 
-  const loadModel = useCallback(async () => {
     if (modelId && modelClass) {
       const abilities = {}
       const abilitiesForModel = ["destroy", "edit"]
@@ -46,29 +63,96 @@ const ApiMakerSuperAdmin = () => {
         .abilities(abilities)
         .first()
 
-      setModel(model)
+      this.setState({model})
     } else {
-      setModel(undefined)
+      this.setState({model: undefined})
     }
-  })
-
-  useEffect(() => { loadModel() }, [modelId])
-
-  if (queryParams.model && queryParams.model_id && queryParams.model_reflection) {
-    pageToShow = "show_reflection"
-  } else if (queryParams.model && queryParams.model_id && queryParams.mode == "edit") {
-    pageToShow = "edit"
-  } else if (queryParams.model && queryParams.model_id) {
-    pageToShow = "show"
-  } else if (queryParams.model && queryParams.mode == "new") {
-    pageToShow = "edit"
-  } else if (queryParams.model) {
-    pageToShow = "index"
-  } else {
-    pageToShow = "welcome"
   }
 
-  const onDestroyClicked = useCallback(async (e) => {
+  render() {
+    const {canCan, modelClass, modelId, modelName, queryParams} = this.tt
+    const {model} = this.s
+    let pageToShow
+
+    if (queryParams.model && queryParams.model_id && queryParams.model_reflection) {
+      pageToShow = "show_reflection"
+    } else if (queryParams.model && queryParams.model_id && queryParams.mode == "edit") {
+      pageToShow = "edit"
+    } else if (queryParams.model && queryParams.model_id) {
+      pageToShow = "show"
+    } else if (queryParams.model && queryParams.mode == "new") {
+      pageToShow = "edit"
+    } else if (queryParams.model) {
+      pageToShow = "index"
+    } else {
+      pageToShow = "welcome"
+    }
+
+    const actions = useMemo(
+      () => <>
+        {modelClass && pageToShow == "index" &&
+          <>
+            {canCan?.can("new", modelClass) && hasEditConfig(modelClass) &&
+              <Link className="create-new-model-link" to={Params.withParams({model: modelName, mode: "new"})}>
+                Create new
+              </Link>
+            }
+          </>
+        }
+        {model && pageToShow == "show" &&
+          <>
+            {model.can("edit") && hasEditConfig(modelClass) &&
+              <Link className="edit-model-link" to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
+                Edit
+              </Link>
+            }
+            {model.can("destroy") &&
+              <a className="destroy-model-link" href="#" onClick={this.tt.onDestroyClicked}>
+                Delete
+              </a>
+            }
+          </>
+        }
+        {pageToShow == "show_reflection" &&
+          <ShowReflectionActions model={model} modelClass={modelClass} reflectionName={queryParams.model_reflection} />
+        }
+      </>,
+      [canCan, model, modelClass, pageToShow]
+    )
+
+    return (
+      <Layout actions={actions} active={queryParams.model} headerTitle={modelClass?.modelName()?.human({count: 2})}>
+        {pageToShow == "index" &&
+          <IndexPage
+            key={`index-page-${modelName}`}
+            modelClass={modelClass}
+          />
+        }
+        {pageToShow == "show" &&
+          <ShowPage
+            key={`show-page-${modelName}-${modelId}`}
+            modelClass={modelClass}
+            modelId={modelId}
+          />
+        }
+        {pageToShow == "show_reflection" &&
+          <ShowReflectionPage
+            key={`show-reflection-page-${modelName}-${modelId}`}
+            modelClass={modelClass}
+            modelId={modelId}
+          />
+        }
+        {pageToShow == "edit" &&
+          <EditPage
+            key={`edit-page-${modelName}-${modelId}`}
+            modelClass={modelClass}
+          />
+        }
+      </Layout>
+    )
+  }
+
+  onDestroyClicked = async (e) => {
     e.preventDefault()
 
     if (!confirm("Are you sure?")) {
@@ -76,76 +160,11 @@ const ApiMakerSuperAdmin = () => {
     }
 
     try {
-      await model.destroy()
+      await this.s.model.destroy()
 
       Params.changeParams({mode: undefined, model_id: undefined})
     } catch (error) {
       FlashMessage.errorResponse(error)
     }
-  }, [model])
-
-  const actions = useMemo(
-    () => <>
-      {modelClass && pageToShow == "index" &&
-        <>
-          {canCan?.can("new", modelClass) && hasEditConfig(modelClass) &&
-            <Link className="create-new-model-link" to={Params.withParams({model: modelName, mode: "new"})}>
-              Create new
-            </Link>
-          }
-        </>
-      }
-      {model && pageToShow == "show" &&
-        <>
-          {model.can("edit") && hasEditConfig(modelClass) &&
-            <Link className="edit-model-link" to={Params.withParams({model: modelName, model_id: modelId, mode: "edit"})}>
-              Edit
-            </Link>
-          }
-          {model.can("destroy") &&
-            <a className="destroy-model-link" href="#" onClick={onDestroyClicked}>
-              Delete
-            </a>
-          }
-        </>
-      }
-      {pageToShow == "show_reflection" &&
-        <ShowReflectionActions model={model} modelClass={modelClass} reflectionName={queryParams.model_reflection} />
-      }
-    </>,
-    [canCan, model, modelClass, pageToShow]
-  )
-
-  return (
-    <Layout actions={actions} active={queryParams.model} headerTitle={modelClass?.modelName()?.human({count: 2})}>
-      {pageToShow == "index" &&
-        <IndexPage
-          key={`index-page-${modelName}`}
-          modelClass={modelClass}
-        />
-      }
-      {pageToShow == "show" &&
-        <ShowPage
-          key={`show-page-${modelName}-${modelId}`}
-          modelClass={modelClass}
-          modelId={modelId}
-        />
-      }
-      {pageToShow == "show_reflection" &&
-        <ShowReflectionPage
-          key={`show-reflection-page-${modelName}-${modelId}`}
-          modelClass={modelClass}
-          modelId={modelId}
-        />
-      }
-      {pageToShow == "edit" &&
-        <EditPage
-          key={`edit-page-${modelName}-${modelId}`}
-          modelClass={modelClass}
-        />
-      }
-    </Layout>
-  )
-}
-
-export default memo(ApiMakerSuperAdmin)
+  }
+}))

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

@@ -1,63 +1,62 @@
+import BaseComponent from "../base-component"
 import ConfigReader from "./config-reader.jsx"
 import {digg} from "diggerize"
 import hasEditConfig from "./has-edit-config.js"
 import * as inflection from "inflection"
 import Params from "../params"
 import PropTypes from "prop-types"
-import {memo, useCallback, useMemo} from "react"
+import {memo, useMemo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import Table from "../table/table"
 import useCurrentUser from "../use-current-user"
-import useShape from "set-state-compare/src/use-shape.js"
-
-const ApiMakerSuperAdminModelClassTable = (props) => {
-  const s = useShape(props)
-  const {modelClass, ...restProps} = props
-  const currentUser = useCurrentUser()
-  const configReader = useMemo(() => ConfigReader.forModel(modelClass), [modelClass])
-  const columns = useMemo(() => configReader.tableColumns(), [modelClass])
-  const tableConfig = configReader.modelConfig?.table
-
-  const editModelPath = useCallback((args) => {
-    const argName = inflection.camelize(digg(s.p.modelClass.modelClassData(), "name"), true)
+
+export default memo(shapeComponent(class ApiMakerSuperAdminModelClassTable extends BaseComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired
+  }
+
+  render() {
+    const {modelClass, ...restProps} = this.props
+    const currentUser = useCurrentUser()
+    const configReader = useMemo(() => ConfigReader.forModel(modelClass), [modelClass])
+    const columns = useMemo(() => configReader.tableColumns(), [modelClass])
+    const tableConfig = configReader.modelConfig?.table
+    const tableProps = {}
+
+    if (tableConfig?.query) tableProps.collection = tableConfig.query
+
+    return (
+      <Table
+        columns={columns}
+        currentUser={currentUser}
+        editModelPath={hasEditConfig(modelClass) ? this.tt.editModelPath : undefined}
+        modelClass={modelClass}
+        viewModelPath={this.tt.viewModelPath}
+        workplace
+        {...tableProps}
+        {...restProps}
+      />
+    )
+  }
+
+  editModelPath = (args) => {
+    const argName = inflection.camelize(digg(this.p.modelClass.modelClassData(), "name"), true)
     const model = digg(args, argName)
 
     return Params.withParams({
-      model: s.p.modelClass.modelClassData().name,
+      model: this.p.modelClass.modelClassData().name,
       model_id: model.primaryKey(),
       mode: "edit"
     })
-  }, [])
+  }
 
-  const viewModelPath = useCallback((args) => {
-    const argName = inflection.camelize(digg(s.p.modelClass.modelClassData(), "name"), true)
+  viewModelPath = (args) => {
+    const argName = inflection.camelize(digg(this.p.modelClass.modelClassData(), "name"), true)
     const model = digg(args, argName)
 
     return Params.withParams({
-      model: s.p.modelClass.modelClassData().name,
+      model: this.p.modelClass.modelClassData().name,
       model_id: model.primaryKey()
     })
-  }, [])
-
-  const tableProps = {}
-
-  if (tableConfig?.query) tableProps.collection = tableConfig.query
-
-  return (
-    <Table
-      columns={columns}
-      currentUser={currentUser}
-      editModelPath={hasEditConfig(modelClass) ? editModelPath : undefined}
-      modelClass={modelClass}
-      viewModelPath={viewModelPath}
-      workplace
-      {...tableProps}
-      {...restProps}
-    />
-  )
-}
-
-ApiMakerSuperAdminModelClassTable.propTypes = {
-  modelClass: PropTypes.func.isRequired
-}
-
-export default memo(ApiMakerSuperAdminModelClassTable)
+  }
+}))

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

@@ -1,35 +1,36 @@
-import {digg} from "diggerize"
+import BaseComponent from "../base-component"
 import Link from "../link"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import ShowReflectionLink from "./show-reflection-link"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
-const ApiMakerSuperAdminShowNav = ({model, modelClass}) => {
-  const queryParams = useQueryParams()
-  const reflections = modelClass.reflections()
+export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseComponent {
+  static propTypes = PropTypesExact({
+    model: PropTypes.object.isRequired,
+    modelClass: PropTypes.func.isRequired
+  })
 
-  return (
-    <div>
+  render() {
+    const {model, modelClass} = this.props
+    const queryParams = useQueryParams()
+    const reflections = modelClass.reflections()
+
+    return (
       <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>
-      </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())}
+        <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>
         </div>
-      )}
-    </div>
-  )
-}
-
-ApiMakerSuperAdminShowNav.propTypes = PropTypesExact({
-  model: PropTypes.object.isRequired,
-  modelClass: PropTypes.func.isRequired
-})
-
-export default React.memo(ApiMakerSuperAdminShowNav)
+        {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>
+          <div key={reflection.name()}>
+            <ShowReflectionLink model={model} modelClass={modelClass} reflection={reflection} />
+          </div>
+        )}
+      </div>
+    )
+  }
+}))

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

@@ -1,110 +1,129 @@
 import AttributeRow from "../../bootstrap/attribute-row"
+import BaseComponent from "../../base-component"
 import BelongsToAttributeRow from "./belongs-to-attribute-row"
 import ConfigReader from "../config-reader.jsx"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"
-import {memo} from "react"
+import {memo, useMemo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowNav from "../show-nav"
 import useModel from "../../use-model"
 
-const AttributePresenter = ({attribute, model, modelArgs}) => {
-  const attributeRowProps = {}
+const AttributePresenter = memo(({attribute, model, modelArgs}) => {
+  const attributeRowProps = {
+    model
+  }
 
   if (typeof attribute == "object") {
-    attributeRowProps.attribute = attribute.attribute
+    if (attribute.attribute) attributeRowProps.attribute = attribute.attribute
     if (attribute.content) attributeRowProps.children = attribute.content(modelArgs)
-  } else {
+    if (attribute.label) attributeRowProps.label = attribute.label
+  } else if (attribute) {
     attributeRowProps.attribute = attribute
   }
 
   return (
-    <AttributeRow model={model} {...attributeRowProps} />
+    <AttributeRow {...attributeRowProps} />
   )
-}
-
-const ApiMakerSuperAdminShowPage = ({modelClass}) => {
-  const configReader = ConfigReader.forModel(modelClass)
-  const showConfig = configReader.modelConfig?.show
-  const attributes = configReader.attributesToShow()
-  const extraContent = showConfig?.extraContent
-  const modelClassName = modelClass.modelClassData().name
-  const primaryKeyName = modelClass.primaryKey()
-  const preload = []
-  const select = showConfig?.extraSelect || {}
-  const modelClassSelect = select[modelClassName] || []
-
-  if (!(modelClassName in select)) select[modelClassName] = modelClassSelect
-  if (!modelClassSelect.includes(primaryKeyName)) modelClassSelect.push(primaryKeyName)
-
-  // Select all attributes selected by default because they will be shown by default
-  for (const attribute of modelClass.attributes()) {
-    if (attribute.isSelectedByDefault() && !modelClassSelect.includes(attribute.name())) modelClassSelect.push(attribute.name())
-  }
-
-  for (const reflection of modelClass.reflections()) {
-    if (reflection.macro() == "belongs_to") {
-      const reflectionModelClass = reflection.modelClass()
-      const reflectionModelClassName = reflectionModelClass.modelClassData().name
-      const reflectionModelClassAttributes = reflectionModelClass.attributes()
-      const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
-
-      preload.push(inflection.underscore(reflection.name()))
+})
 
-      if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
-      if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
-      if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
-
-      // The foreign key is needed to look up any belongs-to-relationships
-      if (!modelClassSelect.includes(reflection.foreignKey())) modelClassSelect.push(reflection.foreignKey())
-    } else if (reflection.macro() == "has_one") {
-      const reflectionModelClass = reflection.modelClass()
-      const reflectionModelClassName = reflectionModelClass.modelClassData().name
-      const reflectionModelClassAttributes = reflectionModelClass.attributes()
-      const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
+export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends BaseComponent {
+  static propTypes = {
+    modelClass: PropTypes.func.isRequired
+  }
 
-      preload.push(inflection.underscore(reflection.name()))
+  setup() {
+    const {modelClass} = this.props
+    const configReader = useMemo(() => ConfigReader.forModel(modelClass), [modelClass])
+    const showConfig = configReader.modelConfig?.show
 
-      if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
-      if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
-      if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
+    this.setInstance({configReader, showConfig})
+  }
 
-      // The foreign key is needed to look up any has-one-relationships
-      if (!modelClassSelect.includes(reflection.foreignKey()) && !select[reflectionModelClassName].includes(reflection.foreignKey()) && !reflection.through()) {
-        select[reflectionModelClassName].push(reflection.foreignKey())
+  render() {
+    const {modelClass} = this.props
+    const {configReader, showConfig} = this.tt
+    const attributes = configReader.attributesToShow()
+    const extraContent = showConfig?.extraContent
+    const modelClassName = modelClass.modelClassData().name
+    const primaryKeyName = modelClass.primaryKey()
+    const preload = []
+    const select = showConfig?.extraSelect || {}
+    const modelClassSelect = select[modelClassName] || []
+
+    if (showConfig?.preload) {
+      for (const showConfigPreload of showConfig.preload) {
+        preload.push(showConfigPreload)
       }
     }
-  }
 
-  const useModelResult = useModel(modelClass, {
-    loadByQueryParam: ({queryParams}) => queryParams.model_id,
-    preload,
-    select
-  })
-  const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
-  const model = digg(useModelResult, camelizedLower)
-  const modelArgs = {}
+    if (!(modelClassName in select)) select[modelClassName] = modelClassSelect
+    if (!modelClassSelect.includes(primaryKeyName)) modelClassSelect.push(primaryKeyName)
 
-  modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
+    // Select all attributes selected by default because they will be shown by default
+    for (const attribute of modelClass.attributes()) {
+      if (attribute.isSelectedByDefault() && !modelClassSelect.includes(attribute.name())) modelClassSelect.push(attribute.name())
+    }
 
-  return (
-    <div className="super-admin--show-page">
-      {model &&
-        <ShowNav model={model} modelClass={modelClass} />
+    for (const reflection of modelClass.reflections()) {
+      if (reflection.macro() == "belongs_to") {
+        const reflectionModelClass = reflection.modelClass()
+        const reflectionModelClassName = reflectionModelClass.modelClassData().name
+        const reflectionModelClassAttributes = reflectionModelClass.attributes()
+        const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
+
+        preload.push(inflection.underscore(reflection.name()))
+
+        if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
+        if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
+        if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
+
+        // The foreign key is needed to look up any belongs-to-relationships
+        if (!modelClassSelect.includes(reflection.foreignKey())) modelClassSelect.push(reflection.foreignKey())
+      } else if (reflection.macro() == "has_one") {
+        const reflectionModelClass = reflection.modelClass()
+        const reflectionModelClassName = reflectionModelClass.modelClassData().name
+        const reflectionModelClassAttributes = reflectionModelClass.attributes()
+        const nameAttribute = reflectionModelClassAttributes.find((attribute) => attribute.name() == "name")
+
+        preload.push(inflection.underscore(reflection.name()))
+
+        if (!(reflectionModelClassName in select)) select[reflectionModelClassName] = []
+        if (!select[reflectionModelClassName].includes("id")) select[reflectionModelClassName].push("id")
+        if (nameAttribute && !select[reflectionModelClassName].includes("name")) select[reflectionModelClassName].push("name")
+
+        // The foreign key is needed to look up any has-one-relationships
+        if (!modelClassSelect.includes(reflection.foreignKey()) && !select[reflectionModelClassName].includes(reflection.foreignKey()) && !reflection.through()) {
+          select[reflectionModelClassName].push(reflection.foreignKey())
+        }
       }
-      {attributes && model && attributes.map((attribute) =>
-        <AttributePresenter attribute={attribute} key={attribute.attribute || attribute} modelArgs={modelArgs} model={model} />
-      )}
-      {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to" || reflection.macro() == "has_one").map((reflection) =>
-        <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
-      )}
-      {model && extraContent && extraContent(modelArgs)}
-    </div>
-  )
-}
-
-ApiMakerSuperAdminShowPage.propTypes = {
-  modelClass: PropTypes.func.isRequired
-}
+    }
 
-export default memo(ApiMakerSuperAdminShowPage)
+    const useModelResult = useModel(modelClass, {
+      loadByQueryParam: ({queryParams}) => queryParams.model_id,
+      preload,
+      select
+    })
+    const camelizedLower = digg(modelClass.modelClassData(), "camelizedLower")
+    const model = digg(useModelResult, camelizedLower)
+    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 && attributes.map((attribute) =>
+          <AttributePresenter attribute={attribute} key={attribute.key || attribute.attribute || attribute} modelArgs={modelArgs} model={model} />
+        )}
+        {model && modelClass.reflections().filter((reflection) => reflection.macro() == "belongs_to" || reflection.macro() == "has_one").map((reflection) =>
+          <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
+        )}
+        {model && extraContent && extraContent(modelArgs)}
+      </div>
+    )
+  }
+}))

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

@@ -0,0 +1,33 @@
+import BaseComponent from "../base-component"
+import {digg} from "diggerize"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {useMemo} from "react"
+
+export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionLink extends BaseComponent {
+  setup() {
+    this.useStates({count: undefined})
+
+    useMemo(() => {
+      this.countRelationship()
+    }, [])
+  }
+
+  countRelationship = async () => {
+    const {model, reflection} = this.p
+    const query = model[reflection.name()]()
+    const count = await query.ransack().count()
+
+    this.setState({count})
+  }
+
+  render() {
+    const {model, modelClass, reflection} = this.p
+    const {count} = this.s
+
+    return (
+      <Link to={Params.withParams({model: digg(modelClass.modelClassData(), "name"), model_id: model.primaryKey(), model_reflection: reflection.name()})}>
+        {modelClass.humanAttributeName(reflection.name())} ({count})
+      </Link>
+    )
+  }
+}))