@kaspernj/api-maker 1.0.388 → 1.0.390

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.388",
+  "version": "1.0.390",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "on-location-changed": ">= 1.0.13",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": "^1.0.45",
+    "set-state-compare": "^1.0.46",
     "spark-md5": "^3.0.2",
     "stacktrace-parser": "^0.1.10",
     "strftime": ">= 0.10.0",

package/src/form.jsx

@@ -0,0 +1,68 @@
+import {createContext, memo, useContext, useMemo} from "react"
+import BaseComponent from "./base-component"
+import FormDataObjectizer from "form-data-objectizer"
+import {Platform} from "react-native"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+const FormContext = createContext(null)
+
+class FormClass {
+  constructor() {
+    this.inputs = {}
+  }
+
+  asObject() {
+    const result = {}
+    const formDataObjectizer = new FormDataObjectizer()
+
+    for(const key in this.inputs) {
+      const value = this.inputs[key]
+
+      formDataObjectizer.treatInitial(key, value, result)
+    }
+
+    return result
+  }
+
+  setValue(name, value) {
+    console.log("Form", {name, value})
+
+    this.inputs[name] = value
+  }
+
+  setValueWithHidden(name, value) {
+    this.setValue(name, value)
+
+    if (Platform.OS == "web") {
+      return <input name={name} type="hidden" value={value !== null && value !== undefined ? value : ""} />
+    }
+  }
+}
+
+const Form = memo(shapeComponent(class Form extends BaseComponent {
+  render() {
+    const {children, setForm, ...restProps} = this.props
+    const form = useMemo(() => new FormClass(), [])
+
+    useMemo(() => {
+      if (setForm) {
+        setForm(form)
+      }
+    }, [setForm])
+
+    return (
+      <FormContext.Provider value={form}>
+        {Platform.OS == "web" &&
+          <form {...restProps}>
+            {children}
+          </form>
+        }
+        {Platform.OS != "web" && this.props.children}
+      </FormContext.Provider>
+    )
+  }
+}))
+
+const useForm = () => useContext(FormContext)
+
+export {Form, FormContext, useForm}

package/src/inputs/attachment.jsx

@@ -1,7 +1,10 @@
+import BaseComponent from "../base-component"
 import {Input as ApiMakerInput} from "@kaspernj/api-maker/src/inputs/input"
 import {Checkbox} from "./checkbox"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class ApiMakerInputsAttachment extends BaseComponent {
+export default memo(shapeComponent(class ApiMakerInputsAttachment extends BaseComponent {
   static propTypes = {
     className: PropTypes.string,
     model: PropTypes.object.isRequired,
@@ -9,8 +12,10 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
     purgeName: PropTypes.string
   }
 
-  state = {
-    purgeChecked: false
+  setup() {
+    this.useStates({
+      purgeChecked: false
+    })
   }
 
   render() {
@@ -91,4 +96,4 @@ export default class ApiMakerInputsAttachment extends BaseComponent {
 
     if (this.props.onPurgeChanged) this.props.onPurgeChanged(e)
   }
-}
+}))

package/src/inputs/checkbox.jsx

@@ -1,11 +1,14 @@
 import AutoSubmit from "./auto-submit.mjs"
+import BaseComponent from "../base-component"
 import {digg, digs} from "diggerize"
 import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {useForm} from "../form"
 
-class ApiMakerInputsCheckbox extends React.PureComponent {
+const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -28,6 +31,10 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
     zeroInput: PropTypes.bool
   }
 
+  setup() {
+    this.form = useForm()
+  }
+
   render () {
     const {
       attribute,
@@ -69,9 +76,11 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
   }
 
   onChanged = (...args) => {
-    const {attribute, autoSubmit, model, onChange} = this.props
+    const {form} = this.tt
+    const {attribute, autoSubmit, model, name, onChange} = this.props
 
     if (attribute && autoSubmit && model) new AutoSubmit({component: this}).autoSubmit()
+    if (form && name) form.setValue(name, args[0].target.checked)
     if (onChange) onChange(...args)
   }
 
@@ -92,7 +101,7 @@ class ApiMakerInputsCheckbox extends React.PureComponent {
       inputRef.current.checked = newValue
     }
   }
-}
+}))
 
 export {ApiMakerInputsCheckbox as Checkbox}
 export default inputWrapper(ApiMakerInputsCheckbox, {type: "checkbox"})

package/src/inputs/checkboxes.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digs} from "diggerize"
 import inputWrapper from "./input-wrapper"
@@ -5,9 +6,10 @@ import * as inflection from "inflection"
 import InvalidFeedback from "../bootstrap/invalid-feedback"
 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"
 
-class ApiMakerInputsCheckboxes extends React.PureComponent {
+const ApiMakerInputsCheckboxes = memo(shapeComponent(class ApiMakerInputsCheckboxes extends BaseComponent {
   static propTypes = propTypesExact({
     attribute: PropTypes.string,
     defaultValue: PropTypes.array,
@@ -108,6 +110,6 @@ class ApiMakerInputsCheckboxes extends React.PureComponent {
       </div>
     )
   }
-}
+}))
 
 export default inputWrapper(ApiMakerInputsCheckboxes)

package/src/inputs/input.jsx

@@ -1,4 +1,5 @@
 import AutoSubmit from "./auto-submit.mjs"
+import BaseComponent from "../base-component"
 import {dig, digg, digs} from "diggerize"
 import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
@@ -6,10 +7,11 @@ import Money from "./money"
 import PropTypes from "prop-types"
 import {memo, useRef} from "react"
 import replaceall from "replaceall"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
+import {useForm} from "../form"
 
-const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends ShapeComponent {
+const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -32,6 +34,7 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
   }
 
   setup() {
+    this.form = useForm()
     this.visibleInputRef = useRef()
 
     this.useStates({
@@ -204,13 +207,15 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
   }
 
   onInputChanged = (e) => {
-    const {attribute, autoSubmit, inputProps, model, onChange} = this.props
+    const {form} = this.tt
+    const {attribute, autoSubmit, inputProps, model, name, onChange} = this.props
     const {localizedNumber} = digs(this.props, "localizedNumber")
 
     if (localizedNumber) this.inputReference().current.value = this.actualValue(digg(e, "target"))
 
     if (attribute && autoSubmit && model) this.delayAutoSubmit()
     if (digg(inputProps, "type") == "file") this.setState({blankInputName: this.getBlankInputName()})
+    if (form && name) form.setValue(name, e.target.value)
     if (onChange) onChange(e)
   }
 

package/src/inputs/select.jsx

@@ -1,9 +1,11 @@
-import {dig} from "diggerize"
+import BaseComponent from "../base-component"
 import inputWrapper from "./input-wrapper"
 import PropTypes from "prop-types"
-import React from "react"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {useForm} from "../form"
 
-class ApiMakerInputsSelect extends React.PureComponent {
+const ApiMakerInputsSelect = memo(shapeComponent(class ApiMakerInputsSelect extends BaseComponent {
   static propTypes = {
     attribute: PropTypes.string,
     children: PropTypes.node,
@@ -13,10 +15,15 @@ class ApiMakerInputsSelect extends React.PureComponent {
     inputProps: PropTypes.object.isRequired,
     model: PropTypes.object,
     name: PropTypes.string,
+    onChange: PropTypes.func,
     options: PropTypes.array,
     wrapperOpts: PropTypes.object.isRequired
   }
 
+  setup() {
+    this.form = useForm()
+  }
+
   render () {
     const {
       attribute,
@@ -28,13 +35,14 @@ class ApiMakerInputsSelect extends React.PureComponent {
       inputRef,
       model,
       name,
+      onChange,
       options,
       wrapperOpts,
       ...restProps
     } = this.props
 
     return (
-      <select {...inputProps} {...restProps}>
+      <select onChange={this.tt.onChange} {...inputProps} {...restProps}>
         {this.includeBlank() &&
           <option data-include-blank="true">
             {typeof includeBlank != "boolean" ? includeBlank : null}
@@ -50,6 +58,14 @@ class ApiMakerInputsSelect extends React.PureComponent {
     )
   }
 
+  onChange = (e) => {
+    const {form} = this.tt
+    const {name, onChange} = this.props
+
+    if (form && name) form.setValue(name, e.target.value)
+    if (onChange) onChange(e)
+  }
+
   optionKey (option) {
     if (Array.isArray(option)) {
       return `select-option-${option[1]}`
@@ -81,7 +97,7 @@ class ApiMakerInputsSelect extends React.PureComponent {
       return false
     }
   }
-}
+}))
 
 export {ApiMakerInputsSelect as Select}
 export default inputWrapper(ApiMakerInputsSelect)

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

@@ -49,12 +49,12 @@ export default class ApiMakerSuperAdminConfigReader {
     const {modelConfig} = digs(this, "modelConfig")
 
     if (modelConfig?.table?.columns) {
-      return modelConfig.table.columns()
+      return {
+        columns: modelConfig.table.columns()
+      }
+    } else {
+      return this.defaultTableColumns()
     }
-
-    const {columns} = this.defaultTableColumns()
-
-    return columns
   }
 
   defaultTableColumns() {

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

@@ -1,35 +1,57 @@
 import BaseComponent from "../../base-component"
+import {FormContext} from "../../form"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
 export default memo(shapeComponent(class EditAttributeContent extends BaseComponent {
+  setup() {
+    const {inputs, name} = this.p
+
+    this.form = useContext(FormContext)
+    this.useStates({
+      value: () => this.defaultValue()
+    })
+
+    useMemo(() => {
+      inputs[name] = this.s.value
+
+      if (this.form) {
+        this.form.setValue(name, this.s.value)
+      }
+    }, [])
+  }
+
   render() {
-    const {attribute, id, inputs, model, name} = this.props
+    const {attribute, id, model} = 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 = () => ({
+    const contentArgs = useMemo(() => ({
       inputProps: {
         attribute: attribute.attribute,
-        defaultValue: defaultValue(),
+        defaultValue: this.defaultValue(),
         id,
         model
       },
-      onChangeValue
-    })
+      onChangeValue: this.tt.onChangeValue
+    }), [attribute.attribute, id, model])
+
+    return attribute.content(contentArgs)
+  }
+
+  defaultValue = () => this.p.model[this.p.attribute.attribute]() || ""
+
+  onChangeValue = (newValue) => {
+    const {inputs, name} = this.p
+
+    inputs[name] = newValue
+
+    if (this.form) {
+      this.form.setValue(name, newValue)
+    }
 
-    return attribute.content(contentArgs())
+    this.setState({value: newValue})
   }
 }))

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

@@ -1,4 +1,5 @@
 import BaseComponent from "../../base-component"
+import {useForm} from "../../form"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
@@ -14,12 +15,17 @@ export default memo(shapeComponent(class EditAttributeInput extends BaseComponen
   setup() {
     const {inputs, name} = this.p
 
+    this.form = useForm()
     this.useStates({
       value: this.defaultValue()
     })
 
     useMemo(() => {
       inputs[name] = this.s.value
+
+      if (this.form) {
+        this.form.setValue(name, this.s.value)
+      }
     }, [])
   }
 
@@ -56,6 +62,11 @@ export default memo(shapeComponent(class EditAttributeInput extends BaseComponen
     const {inputs, name} = this.p
 
     inputs[name] = newValue
+
+    if (this.form) {
+      this.form.setValue(name, newValue)
+    }
+
     this.setState({value: newValue})
   }
 }))

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

@@ -1,9 +1,10 @@
+import {Pressable, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import ConfigReader from "./config-reader.jsx"
 import {digg} from "diggerize"
 import EditAttribute from "./edit-page/edit-attribute"
+import {Form} from "../form"
 import * as inflection from "inflection"
-import {Pressable, Text, View} from "react-native"
 import Locales from "shared/locales"
 import {memo} from "react"
 import PropTypes from "prop-types"
@@ -50,7 +51,8 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
     const useModelResult = useModel(modelClass, {
       cacheArgs: [currentUser?.id()],
       loadByQueryParam: (props) => props.queryParams.model_id,
-      newIfNoId: true,
+      newIfNoId: this.configReader.modelConfig?.edit?.newIfNoId || true,
+      preload: this.configReader.modelConfig?.edit?.preload,
       select: selectedAttributes
     })
 
@@ -61,6 +63,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
     this.modelId = queryParams.model_id
     this.modelArgs = {}
     this.modelArgs[modelIdVarName] = this.modelId
+    this.useStates({form: null})
   }
 
   render() {
@@ -70,27 +73,29 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
 
     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>
+        <Form setForm={this.setStates.form}>
+          {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>
+        </Form>
       </View>
     )
   }
@@ -98,8 +103,14 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
   onSubmit = async () => {
     try {
       const {inputs, model} = this.tt
+      const {form} = this.s
+
+      const formObject = form.asObject()
+      const allInputs = Object.assign({}, inputs, formObject)
+
+      console.log({allInputs})
 
-      model.assignAttributes(inputs)
+      model.assignAttributes(allInputs)
       await model.save(this.inputs)
       Params.changeParams({mode: undefined, model_id: model.id()})
     } catch (error) {

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

@@ -3,6 +3,7 @@ import {memo} from "react"
 import ModelClassTable from "./model-class-table"
 import PropTypes from "prop-types"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminIndexPage extends BaseComponent {
   static propTypes = {
@@ -13,9 +14,9 @@ export default memo(shapeComponent(class ApiMakerSuperAdminIndexPage extends Bas
     const {modelClass} = this.props
 
     return (
-      <div className="super-admin--index-page">
+      <View dataSet={{component: "super-admin--index-page"}}>
         <ModelClassTable modelClass={modelClass} />
-      </div>
+      </View>
     )
   }
 }))

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

@@ -1,10 +1,12 @@
 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 {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {Text, View} from "react-native"
+import useBreakpoint from "../../../use-breakpoint"
+import useEventListener from "../../../use-event-listener"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -14,27 +16,93 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
   })
 
   setup() {
+    const {breakpoint} = useBreakpoint()
+
     this.headerActionsRef = useRef()
+    this.setInstance({breakpoint})
     this.useStates({
       headerActionsActive: false
     })
+
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
   }
 
   render() {
+    const {breakpoint} = this.tt
     const {actions, onTriggerMenu, title} = this.props
 
+    const headerStyle = {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      zIndex: 9,
+      height: 100,
+      paddingRight: 30,
+      paddingLeft: 30,
+      backgroundColor: "#fff"
+    }
+
+    const headerActionsContainerStyle = {}
+    const headerActionsStyle = {}
+
+    if (breakpoint == "xs" || breakpoint == "sm") {
+      headerStyle.position = "absolute"
+      headerStyle.width = "100%"
+
+      Object.assign(headerActionsContainerStyle, {
+        position: "fixed",
+        top: 0,
+        left: 0,
+
+        display: "flex",
+        width: "100vw",
+        height: "100vh",
+        alignItems: "center",
+        justifyContent: "center",
+
+        background: "rgba(#000, .8)"
+      })
+
+      if (!this.s.headerActionsActive) {
+        headerActionsContainerStyle.display = "none"
+      }
+
+      Object.assign(headerActionsStyle, {
+        minWidth: "80vw",
+        maxWidth: "100vw",
+        backgroundColor: "#fff"
+      })
+    } else if (breakpoint == "md") {
+      headerStyle.position = "fixed"
+      headerStyle.left = 250
+      headerStyle.width = "calc(100% - 250px)"
+    } else if (breakpoint == "lg" || breakpoint == "xl" || breakpoint == "xxl") {
+      headerStyle.position = "fixed"
+      headerStyle.left = 290
+      headerStyle.width = "calc(100% - 290px)"
+    }
+
+    if (breakpoint == "md" || breakpoint == "lg" || breakpoint == "xl" || breakpoint == "xxl") {
+      headerActionsContainerStyle.marginLeft = "auto"
+    }
+
     return (
-      <div className="components--admin--layout--header">
-        <EventListener event="mouseup" onCalled={this.tt.onWindowMouseUp} target={window} />
-        <div className="header-title-container">
-          {title}
-        </div>
+      <View dataSet={{component: "super-admin--layout--header"}} style={headerStyle}>
+        <View dataSet={{class: "header-title-container"}}>
+          <Text style={{color: "#282a33", fontSize: 22}}>
+            {title}
+          </Text>
+        </View>
         {actions &&
-          <div className="header-actions-container" data-active={this.s.headerActionsActive}>
-            <div className="header-actions" ref={this.tt.headerActionsRef}>
+          <View dataSet={{active: this.s.headerActionsActive, class: "header-actions-container"}} style={headerActionsContainerStyle}>
+            <View
+              dataSet={{class: "header-actions"}}
+              ref={this.tt.headerActionsRef}
+              style={headerActionsStyle}
+            >
               {actions}
-            </div>
-          </div>
+            </View>
+          </View>
         }
         <div className="burger-menu-container">
           {actions &&
@@ -46,7 +114,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
             <i className="fa fa-bars" />
           </a>
         </div>
-      </div>
+      </View>
     )
   }
 

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

@@ -1,42 +1,8 @@
 @import "@kaspernj/api-maker/src/super-admin/stylesheets/variables";
 
-.components--admin--layout--header {
-  top: 0;
-  display: flex;
-  height: 100px;
-  align-items: center;
-  padding-right: 30px;
-  padding-left: 30px;
-  background: #fff;
-  color: #282a33;
-
+[data-component="super-admin--layout--header"] {
   @media (max-width: $sm-to) {
-    position: absolute;
-    width: 100%;
-
-    .header-actions-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-
-      display: flex;
-      width: 100vw;
-      height: 100vh;
-      align-items: center;
-      justify-content: center;
-
-      background: rgba(#000, .8);
-
-      &[data-active="false"] {
-        display: none;
-      }
-    }
-
-    .header-actions {
-      min-width: 80vw;
-      max-width: 100vw;
-      background: #fff;
-
+    [data-class="header-actions"] {
       .action-button {
         display: block;
         padding: 11px;
@@ -63,15 +29,7 @@
   }
 
   @media (min-width: $md-from) {
-    position: fixed;
-    left: 250px;
-    width: calc(100% - 250px);
-
-    .header-actions-container {
-      margin-left: auto;
-    }
-
-    .header-actions {
+    [data-class="header-actions"] {
       .action-button {
         display: inline-block;
         padding: 7px 10px;
@@ -89,11 +47,6 @@
     }
   }
 
-  @media (min-width: $lg-from) {
-    left: 290px;
-    width: calc(100% - 290px);
-  }
-
   .burger-menu-container {
     @media (max-width: $sm-to) {
       margin-left: auto;
@@ -117,8 +70,4 @@
       color: #1b1c1e;
     }
   }
-
-  .header-title-container {
-    font-size: 22px;
-  }
 }

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

@@ -7,10 +7,11 @@ import Header from "./header"
 import Menu from "./menu"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useCallback, useMemo} from "react"
+import {memo, 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"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import {View} from "react-native"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 
@@ -27,7 +28,21 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
     headerTitle: PropTypes.string
   })
 
+  setup() {
+    const currentUser = useCurrentUser()
+    const {locale, t} = useI18n({namespace: "js.api_maker.super_admin.layout"})
+
+    this.useStates({menuTriggered: false})
+    this.setInstance({currentUser, t})
+
+    useMemo(() => {
+      CommandsPool.current().globalRequestData.layout = "admin"
+      CommandsPool.current().globalRequestData.locale = locale
+    }, [I18n.locale])
+  }
+
   render() {
+    const {currentUser, t} = this.tt
     const {
       actions,
       active,
@@ -39,14 +54,6 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
       menu,
       ...restProps
     } = this.props
-    const s = useShape()
-    const currentUser = useCurrentUser()
-
-    useMemo(() => {
-      CommandsPool.current().globalRequestData.layout = "admin"
-      CommandsPool.current().globalRequestData.locale = I18n.locale
-    }, [I18n.locale])
-
     const headTitle = headTitle || headerTitle
 
     if (headTitle) {
@@ -55,38 +62,32 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
       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)
-    }, [])
 
     return (
-      <div className={classNames("components--admin--layout", className)} data-menu-triggered={s.state.menuTriggered} {...restProps}>
+      <View dataSet={{component: "super-admin--layout", class: className, menuTriggered: this.s.menuTriggered}} {...restProps}>
         <Menu
           active={active}
           noAccess={noAccess}
-          onRequestMenuClose={onRequestMenuClose}
-          triggered={s.state.menuTriggered}
+          onRequestMenuClose={this.tt.onRequestMenuClose}
+          triggered={this.s.menuTriggered}
         />
-        <Header actions={actions} onTriggerMenu={onTriggerMenu} title={headerTitle} />
-        <div className="app-layout-content-container">
+        <Header actions={actions} onTriggerMenu={this.tt.onTriggerMenu} title={headerTitle} />
+        <View dataSet={{class: "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."})}
+                    {t(".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."})}
+                    {t(".try_signing_in", {defaultValue: "Try signing in."})}
                   </div>
                   {config.signInContent()}
                 </>
@@ -94,8 +95,14 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayout extends BaseCo
             </>
           }
           {!noAccess && children}
-        </div>
-      </div>
+        </View>
+      </View>
     )
   }
+
+  onRequestMenuClose = () => this.setState({menuTriggered: false})
+  onTriggerMenu = (e) => {
+    e.preventDefault()
+    setMenuTriggered(!this.s.menuTriggered)
+  }
 }))

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

@@ -8,6 +8,8 @@ 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 useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -17,13 +19,19 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
     triggered: PropTypes.bool.isRequired
   })
 
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.menu"})
+    const currentUser = useCurrentUser()
+
+    this.setInstance({currentUser, t})
+  }
+
   render() {
+    const {currentUser, t} = this.tt
     const {active, noAccess, triggered} = this.props
-    const currentUser = useCurrentUser()
-    const rootRef = useRef()
 
     return (
-      <div className="components--admin--layout--menu" data-triggered={triggered} ref={rootRef}>
+      <View dataSet={{component: "super-admin--layout--menu", triggered}}>
         <div className="menu-logo">
           <Link className="menu-logo-link" to={Params.withParams({})}>
             Admin
@@ -52,12 +60,12 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
               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"})}
+              label={t(".sign_out", {defaultValue: "Sign out"})}
               onClick={this.tt.onSignOutClicked}
             />
           }
         </div>
-      </div>
+      </View>
     )
   }
 
@@ -66,7 +74,7 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
 
     try {
       await Devise.signOut()
-      FlashMessage.success(I18n.t("js.api_maker.super_admin.layout.menu.you_have_been_signed_out", {defaultValue: "You have been signed out"}))
+      FlashMessage.success(this.t(".you_have_been_signed_out", {defaultValue: "You have been signed out"}))
     } catch (error) {
       FlashMessage.errorResponse(error)
     }

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

@@ -1,6 +1,6 @@
 @import "@kaspernj/api-maker/src/super-admin/stylesheets/variables";
 
-.components--admin--layout--menu {
+[data-component="super-admin--layout--menu"] {
   position: fixed;
   z-index: 9;
   overflow-y: auto;

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

@@ -2,18 +2,23 @@ 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"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ComponentsAdminLayoutNoAccess extends BaseComponent {
   render() {
     const currentUser = useCurrentUser()
+    const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.no_access"})
 
     return (
-      <div
-        className="components--admin--layout-no-access"
-        data-user-roles={currentUser?.userRoles()?.loaded()?.map((userRole) => userRole.role()?.identifier()).join(", ")}
+      <View
+        dataSet={{
+          component: "super-admin--layout--no-access",
+          userRoles: 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>
+        {t(".you_dont_have_no_access_to_this_page", {defaultValue: "You don't have access to this page."})}
+      </View>
     )
   }
 }))

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

@@ -1,12 +1,12 @@
 @import "@kaspernj/api-maker/src/super-admin/stylesheets/variables";
 
-.components--admin--layout {
+[data-component="super-admin--layout"] {
   width: 100%;
   min-height: 100vh;
   background: #fff;
   color: #000;
 
-  .app-layout-content-container {
+  [data-class="app-layout-content-container"] {
     min-height: 100vh;
     background: #f7f7f7;
 

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

@@ -23,6 +23,8 @@ export default memo(shapeComponent(class ApiMakerSuperAdminModelClassTable exten
     const tableConfig = configReader.modelConfig?.table
     const tableProps = {}
 
+    if (!columns) throw new Error("No columns given")
+
     if (tableConfig?.query) tableProps.collection = tableConfig.query
 
     return (

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

@@ -5,7 +5,9 @@ import PropTypesExact from "prop-types-exact"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import ShowReflectionLink from "./show-reflection-link"
+import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
+import {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -14,23 +16,24 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowNav extends BaseC
   })
 
   render() {
+    const {t} = useI18n({namespace: "js.api_maker.suprt_admin.show_reflection_page"})
     const {model, modelClass} = this.props
     const queryParams = useQueryParams()
     const reflections = modelClass.reflections()
 
     return (
-      <div>
-        <div>
+      <View dataSet={{component: "super-admin--show-nav"}}>
+        <View>
           <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"})}
+            {t(".general", {defaultValue: "General"})}
           </Link>
-        </div>
+        </View>
         {model && reflections.filter((reflection) => reflection.macro() == "has_many").map((reflection) =>
-          <div key={reflection.name()}>
+          <View key={reflection.name()}>
             <ShowReflectionLink model={model} modelClass={modelClass} reflection={reflection} />
-          </div>
+          </View>
         )}
-      </div>
+      </View>
     )
   }
 }))

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

@@ -9,6 +9,7 @@ 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"
+import {View} from "react-native"
 
 const AttributePresenter = memo(({attribute, model, modelArgs}) => {
   const attributeRowProps = {
@@ -63,7 +64,9 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends Base
 
     // 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())
+      if ((attribute.isSelectedByDefault() || attribute.name() == "name") && !modelClassSelect.includes(attribute.name())) {
+        modelClassSelect.push(attribute.name())
+      }
     }
 
     for (const reflection of modelClass.reflections()) {
@@ -112,7 +115,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends Base
     modelArgs[inflection.camelize(modelClass.modelClassData().name, true)] = model
 
     return (
-      <div className="super-admin--show-page">
+      <View dataSet={{component: "super-admin--show-page"}}>
         {model &&
           <ShowNav model={model} modelClass={modelClass} />
         }
@@ -123,7 +126,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowPage extends Base
           <BelongsToAttributeRow key={reflection.name()} model={model} modelClass={modelClass} reflection={reflection} />
         )}
         {model && extraContent && extraContent(modelArgs)}
-      </div>
+      </View>
     )
   }
 }))

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

@@ -7,10 +7,12 @@ 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 {View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage extends BaseComponent {
   static propTypes = propTypesExact({
-    modelClass: PropTypes.func.isRequired
+    modelClass: PropTypes.func.isRequired,
+    modelId: PropTypes.string.isRequired
   })
 
   render() {
@@ -27,7 +29,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage ex
     if (model) collection = model[reflection.name()]()
 
     return (
-      <div className="super-admin--show-page">
+      <View dataSet={{component: "super-admin--show-page"}}>
         {model &&
           <ShowNav model={model} modelClass={modelClass} />
         }
@@ -38,7 +40,7 @@ export default memo(shapeComponent(class ApiMakerSuperAdminShowReflectionPage ex
             modelClass={reflectionModelClass}
           />
         }
-      </div>
+      </View>
     )
   }
 }))

package/src/table/table.jsx

@@ -21,7 +21,7 @@ import Settings from "./settings"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
-import useBreakpoint from "./use-breakpoint"
+import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
 
@@ -175,7 +175,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   updateSettingsFullCacheKey = () => this.setState({tableSettingFullCacheKey: this.state.tableSetting.fullCacheKey()})
 
   columnsAsArray = () => {
-    if (typeof this.props.columns == "function") return this.props.columns()
+    if (typeof this.props.columns == "function") {
+      return this.props.columns()
+    }
 
     return this.props.columns
   }

package/src/table/with-breakpoint.jsx

@@ -1,9 +0,0 @@
-import useBreakpoint from "./use-breakpoint"
-
-export default (WrappedComponent) => (props) => {
-  const {breakpoint} = useBreakpoint()
-
-  return (
-    <WrappedComponent breakPoint={breakpoint} {...props} />
-  )
-}