@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/utils/checkbox.jsx

@@ -0,0 +1,80 @@
+import BaseComponent from "../base-component"
+import {CheckBox, Pressable, View} from "react-native"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "./text"
+
+export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseComponent {
+  static defaultProps = {
+    label: undefined
+  }
+
+  static propTypes = propTypesExact({
+    checked: PropTypes.bool,
+    dataSet: PropTypes.object,
+    defaultChecked: PropTypes.bool,
+    label: PropTypes.string,
+    onCheckedChange: PropTypes.func,
+    style: PropTypes.object
+  })
+
+  setup() {
+    this.useStates({
+      checked: this.props.defaultChecked
+    })
+    this.isChecked = this.calculateChecked()
+  }
+
+  calculateChecked() {
+    if ("checked" in this.props) {
+      return this.p.checked
+    } else {
+      return this.s.checked
+    }
+  }
+
+  render() {
+    const {isChecked} = this.tt
+    const {label} = this.p
+    const {dataSet} = this.props
+    const actualStyle = Object.assign(
+      {flexDirection: "row", alignItems: "center"},
+      this.props.style
+    )
+    const actualDataSet = Object.assign(
+      {
+        checked: isChecked
+      },
+      dataSet
+    )
+
+    return (
+      <View
+        dataSet={{component: "api-maker/utils/checkbox"}}
+        style={actualStyle}
+      >
+        <CheckBox dataSet={actualDataSet} onValueChange={this.tt.onValueChange} value={isChecked} />
+        {label &&
+          <Pressable onPress={this.tt.onLabelPressed}>
+            <Text style={{marginLeft: 3}}>
+              {label}
+            </Text>
+          </Pressable>
+        }
+      </View>
+    )
+  }
+
+  onLabelPressed = () => this.p.onCheckedChange(!this.tt.isChecked)
+
+  onValueChange = (e) => {
+    if (this.props.onCheckedChange) {
+      this.p.onCheckedChange(e)
+    }
+
+    this.setState({checked: !this.tt.isChecked})
+  }
+}))

package/src/utils/checkboxes.jsx

@@ -0,0 +1,158 @@
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import React, {useMemo} from "react"
+import Checkbox from "./checkbox"
+import {digs} from "diggerize"
+import {useForm} from "../form"
+import * as inflection from "inflection"
+import InvalidFeedback from "./invalid-feedback"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import Text from "./text"
+import useInput from "../use-input"
+import {View} from "react-native"
+
+const OptionElement = memo(shapeComponent(class OptionElement extends ShapeComponent {
+  static propTypes = propTypesExact({
+    checked: PropTypes.bool.isRequired,
+    inputName: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    option: PropTypes.array.isRequired
+  })
+
+  render() {
+    const {checked, inputName, option} = this.p
+
+    return (
+      <View >
+        <Checkbox
+          checked={checked}
+          dataSet={{
+            component: "api-maker/utils/checkboxes/option",
+            name: inputName,
+            value: option[1]
+          }}
+          label={option[0]}
+          onCheckedChange={this.tt.onChange}
+        />
+      </View>
+    )
+  }
+
+  onChange = (checked) => this.p.onChange({checked, option: this.p.option})
+}))
+
+export default memo(shapeComponent(class ApiMakerUtilsCheckboxes extends ShapeComponent {
+  static propTypes = propTypesExact({
+    attribute: PropTypes.string,
+    defaultValue: PropTypes.array,
+    label: PropTypes.string,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array.isRequired
+  })
+
+  setup() {
+    const {inputProps, wrapperOpts} = useInput({props: this.props})
+
+    this.generatedId = useMemo(
+      () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
+      []
+    )
+
+    this.setInstance({
+      form: useForm(),
+      inputProps,
+      wrapperOpts
+    })
+    this.useStates({
+      checkedOptions: () => {
+        if (Array.isArray(this.props.defaultValue)) return this.props.defaultValue
+        if (this.props.defaultValue) return [this.props.defaultValue]
+
+        return []
+      }
+    })
+
+    useMemo(() => {
+      if (this.form && inputProps.name) {
+        this.form.setValue(inputProps.name, this.s.checkedOptions)
+      }
+    }, [])
+  }
+
+  render () {
+    const {wrapperOpts} = this.tt
+    const {errors} = digs(wrapperOpts, "errors")
+
+    return (
+      <View dataSet={{component: "api-maker/utils/checkboxes"}}>
+        <Text style={{fontWeight: "bold"}}>
+          {this.tt.wrapperOpts.label}
+        </Text>
+        {this.props.options.map((option) =>
+          <OptionElement
+            checked={this.isChecked(option)}
+            inputName={this.inputName()}
+            key={option[1]}
+            onChange={this.tt.onOptionChecked}
+            option={option}
+          />
+        )}
+        {errors.length > 0 &&
+          <InvalidFeedback errors={errors} />
+        }
+      </View>
+    )
+  }
+
+  inputDefaultValue () {
+    const {attribute, defaultValue, model} = this.props
+
+    if (defaultValue) {
+      return defaultValue
+    } else if (attribute && model) {
+      if (!model[attribute]) throw `No such attribute: ${attribute}`
+
+      return this.props.model[attribute]()
+    }
+  }
+
+  inputName () {
+    if (this.props.name) {
+      return `${this.props.name}[]`
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]`
+    }
+  }
+
+  isChecked = (option) => this.s.checkedOptions.includes(option[1])
+
+  onOptionChecked = ({checked, option}) => {
+    const {inputProps, form} = this.tt
+    const {name} = inputProps
+    let newOptions
+
+    if (checked) {
+      newOptions = this.s.checkedOptions.concat([option[1]])
+
+      this.setState({checkedOptions: newOptions})
+    } else {
+      newOptions = this.s.checkedOptions.filter((value) => value != option[1])
+
+      this.setState({checkedOptions: newOptions})
+    }
+
+    console.log({checkedOptions: this.s.checkedOptions})
+
+    if (this.props.onChange) {
+      this.p.onChange({checked, option})
+    }
+
+    if (form && name) {
+      form.setValue(name, newOptions)
+    }
+  }
+}))

package/src/utils/default-style.jsx

@@ -0,0 +1,25 @@
+import React, {createContext, useContext} from "react"
+import memo from "set-state-compare/src/memo"
+
+const DefaultStyleContext = createContext({
+  Text: {}
+})
+
+const useDefaultStyle = () => {
+  const defaultStyle = useContext(DefaultStyleContext)
+
+  return defaultStyle
+}
+
+const WithDefaultStyle = memo((props) => {
+  const defaultStyle = useContext(DefaultStyleContext)
+  const newDefaultStyle = Object.assign({}, defaultStyle, props.style)
+
+  return (
+    <DefaultStyleContext.Provider value={newDefaultStyle}>
+      {props.children}
+    </DefaultStyleContext.Provider>
+  )
+})
+
+export {useDefaultStyle, WithDefaultStyle}

package/src/utils/icon.jsx

@@ -0,0 +1,21 @@
+import BaseComponent from "../base-component"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {useDefaultStyle} from "./default-style"
+
+export default memo(shapeComponent(class ApiMakerUtilsIcon extends BaseComponent {
+  render() {
+    const defaultStyle = useDefaultStyle()
+    const {style, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {color: defaultStyle.Text.color},
+      style
+    )
+
+    return (
+      <FontAwesomeIcon style={actualStyle} {...restProps} />
+    )
+  }
+}))

package/src/utils/invalid-feedback.jsx

@@ -0,0 +1,20 @@
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import Text from "./text"
+
+export default memo(shapeComponent(class ApiMakerUtilsInvalidFeedback extends ShapeComponent {
+  static propTypes = propTypesExact({
+    message: PropTypes.string.isRequired
+  })
+
+  render() {
+    return (
+      <Text style={{color: "red"}}>
+        {this.p.message}
+      </Text>
+    )
+  }
+}))

package/src/utils/modal.jsx

@@ -0,0 +1,60 @@
+import {Modal, Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import Card from "./card"
+import Icon from "../utils/icon"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useBreakpoint from "../use-breakpoint"
+
+export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComponent {
+  render() {
+    const {xs, sm} = useBreakpoint()
+    const {children, dataSet, ...restProps} = this.props
+    const actualDataSet = Object.assign(
+      {
+        component: "api-maker/utils/modal"
+      },
+      dataSet
+    )
+    let width, maxWidth
+
+    if (xs || sm) {
+      width = "95%"
+    } else {
+      width = "80%"
+      maxWidth = 800
+    }
+
+    return (
+      <Modal dataSet={actualDataSet} {...restProps}>
+        <View
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0, 0, 0, 0.8)"
+          }}
+        >
+          <Card
+            controls={this.cardHeaderControls()}
+            style={{width, maxWidth}}
+          >
+            {children}
+          </Card>
+        </View>
+      </Modal>
+    )
+  }
+
+  cardHeaderControls() {
+    return (
+      <Pressable onPress={this.tt.onModalClosePress} style={{marginLeft: "auto", padding: 5}}>
+        <Icon name="remove" />
+      </Pressable>
+    )
+  }
+
+  onModalClosePress = () => this.props.onRequestClose && this.props.onRequestClose()
+}))

package/src/utils/text.jsx

@@ -0,0 +1,38 @@
+import memo from "set-state-compare/src/memo"
+import React, {useMemo} from "react"
+import {Text} from "react-native"
+import {useDefaultStyle, WithDefaultStyle} from "./default-style"
+
+export default memo((props) => {
+  const {style, ...restProps} = props
+  const defaultStyle = useDefaultStyle()
+  const {actualStyle, stylesList} = useMemo(() => {
+    const stylesList = []
+    const actualStyle = {}
+
+    if (defaultStyle?.Text) {
+      Object.assign(actualStyle, defaultStyle.Text)
+      stylesList.push(defaultStyle.Text)
+    }
+
+    if (style) {
+      if (Array.isArray(style)) {
+        for (const styleI of style) {
+          Object.assign(actualStyle, styleI)
+          stylesList.push(styleI)
+        }
+      } else {
+        Object.assign(actualStyle, style)
+        stylesList.push(style)
+      }
+    }
+
+    return {actualStyle, stylesList}
+  }, [defaultStyle?.Text, style])
+
+  return (
+    <WithDefaultStyle style={actualStyle}>
+      <Text style={stylesList} {...restProps} />
+    </WithDefaultStyle>
+  )
+})

package/src/{validation-error.mjs → validation-error.js}

@@ -1,8 +1,8 @@
-import BaseError from "./base-error.mjs"
-import inflection from "inflection"
+import BaseError from "./base-error"
+import * as inflection from "inflection"
 
 class ValidationError extends BaseError {
-  constructor (validationErrors, args) {
+  constructor(validationErrors, args) {
     const errorMessage = validationErrors.getUnhandledErrorMessage() || validationErrors.getErrorMessage()
     const forwardedArgs = {addResponseErrorsToErrorMessage: false}
     const newArgs = Object.assign({}, args, forwardedArgs)
@@ -11,12 +11,16 @@ class ValidationError extends BaseError {
     this.validationErrors = validationErrors
   }
 
-  hasUnhandledErrors () {
+  getUnhandledErrors = () => this.validationErrors.getValidationErrors().filter((validationError) => !validationError.getHandled())
+  getValidationErrors = () => digg(this, "validationErrors")
+
+  hasUnhandledErrors() {
     const unhandledError = this.validationErrors.getValidationErrors().find((validationError) => !validationError.getHandled())
+
     return Boolean(unhandledError)
   }
 
-  hasValidationErrorForAttribute (attributeName) {
+  hasValidationErrorForAttribute(attributeName) {
     const underscoredAttributeName = inflection.underscore(attributeName)
     const foundAttribute = this.validationErrors.getValidationErrors().find((validationError) => validationError.getAttributeName() == underscoredAttributeName)
 

package/src/{validation-errors.mjs → validation-errors.js}

@@ -1,9 +1,9 @@
 import {digg, digs} from "diggerize"
-import inflection from "inflection"
-import modelClassRequire from "./model-class-require.mjs"
+import * as inflection from "inflection"
+import modelClassRequire from "./model-class-require"
 
 class ValidationError {
-  constructor (args) {
+  constructor(args) {
     this.attributeName = digg(args, "attribute_name")
     this.attributeType = digg(args, "attribute_type")
     this.errorMessages = digg(args, "error_messages")
@@ -13,7 +13,7 @@ class ValidationError {
     this.modelName = digg(args, "model_name")
   }
 
-  matchesAttributeAndInputName (attributeName, inputName) {
+  matchesAttributeAndInputName(attributeName, inputName) {
     if (this.getInputName() == inputName) return true
     if (!attributeName) return false
 
@@ -30,15 +30,10 @@ class ValidationError {
     return false
   }
 
-  getAttributeName () {
-    return digg(this, "attributeName")
-  }
-
-  getErrorMessages () {
-    return digg(this, "errorMessages")
-  }
+  getAttributeName = () => digg(this, "attributeName")
+  getErrorMessages = () => digg(this, "errorMessages")
 
-  getFullErrorMessages () {
+  getFullErrorMessages() {
     const {attributeType} = digs(this, "attributeType")
 
     if (attributeType == "base") {
@@ -55,32 +50,27 @@ class ValidationError {
     }
   }
 
-  getHandled () {
-    return digg(this, "handled")
-  }
+  getHandled = () => digg(this, "handled")
+  getInputName = () => digg(this, "inputName")
 
-  getInputName () {
-    return digg(this, "inputName")
-  }
-
-  getModelClass () {
+  getModelClass() {
     const modelName = inflection.classify(digg(this, "modelName"))
 
     return modelClassRequire(modelName)
   }
 
-  setHandled () {
+  setHandled() {
     this.handled = true
   }
 }
 
 class ValidationErrors {
-  constructor (args) {
+  constructor(args) {
     this.rootModel = digg(args, "model")
     this.validationErrors = digg(args, "validationErrors").map((validationError) => new ValidationError(validationError))
   }
 
-  getErrorMessage () {
+  getErrorMessage() {
     const fullErrorMessages = []
 
     for (const validationError of this.validationErrors) {
@@ -92,16 +82,14 @@ class ValidationErrors {
     return fullErrorMessages.join(". ")
   }
 
-  getValidationErrors () {
-    return this.validationErrors
-  }
+  getValidationErrors = () => this.validationErrors
 
   getValidationErrorsForInput ({attribute, inputName, onMatchValidationError}) {
     const validationErrors = this.validationErrors.filter((validationError) => {
       if (onMatchValidationError) {
         return onMatchValidationError(validationError)
       } else {
-        return validationError.matchesAttributeAndInputName(attribute, inputName, onMatchValidationError)
+        return validationError.matchesAttributeAndInputName(attribute, inputName)
       }
     })
 

package/src/with-api-maker.jsx

@@ -0,0 +1,31 @@
+import React, {createContext, useContext, useMemo} from "react"
+import ApiMakerConfig from "./config"
+import memo from "set-state-compare/src/memo"
+
+const ApiMakerContext = createContext()
+const useApiMaker = () => {
+  const apiMakerContext = useContext(ApiMakerContext)
+
+  if (apiMakerContext) {
+    return apiMakerContext
+  }
+
+  return {
+    config: ApiMakerConfig
+  }
+}
+
+const WithApiMaker = memo(({children, config, ...restProps}) => {
+  const restPropsKeys = Object.keys(restProps)
+  const value = useMemo(() => ({config}), [config])
+
+  if (restPropsKeys.length > 0) throw new Error(`Unhandled props: ${restPropsKeys.join(", ")}`)
+
+  return (
+    <ApiMakerContext.Provider value={value}>
+      {children}
+    </ApiMakerContext.Provider>
+  )
+})
+
+export {useApiMaker, WithApiMaker}

package/src/with-collection.jsx

@@ -0,0 +1,17 @@
+import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import useCollection from "./use-collection"
+
+export default (WrappedComponent, withCollectionArgs) => memo(() => {
+  const useCollectionResult = useCollection(withCollectionArgs)
+  const models = digg(useCollectionResult, "models")
+  const modelsArgName = inflection.camelize(digg(withCollectionArgs.modelClass.modelClassData(), "pluralName"), true)
+  const forwardArgs = {}
+
+  forwardArgs[modelsArgName] = models
+
+  return (
+    <WrappedComponent {...forwardArgs} {...this.props} />
+  )
+})

package/src/with-current-user.jsx

@@ -1,28 +1,10 @@
-import {digs} from "diggerize"
-import EventEmitterListener from "./event-emitter-listener"
-import PureComponent from "set-state-compare/src/pure-component"
+import React from "react"
+import useCurrentUser from "./use-current-user"
 
-export default (WrappedComponent) => class WithCurrentUser extends PureComponent {
-  state = {
-    currentUser: Devise.currentUser()
-  }
+export default (WrappedComponent) => (props) => {
+  const currentUser = useCurrentUser()
 
-  render() {
-    const {onDeviseSigned} = digs(this, "onDeviseSigned")
-    const {currentUser} = digs(this.state, "currentUser")
-
-    return (
-      <>
-        <EventEmitterListener events={Devise.events()} event="onDeviseSignIn" onCalled={onDeviseSigned} />
-        <EventEmitterListener events={Devise.events()} event="onDeviseSignOut" onCalled={onDeviseSigned} />
-        <WrappedComponent {...this.props} currentUser={currentUser} />
-      </>
-    )
-  }
-
-  onDeviseSigned = () => {
-    const currentUser = Devise.currentUser()
-
-    if (this.state.currentUser !== currentUser) this.setState({currentUser})
-  }
+  return (
+    <WrappedComponent {...props} currentUser={currentUser} />
+  )
 }

package/src/with-model.jsx

@@ -0,0 +1,16 @@
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import useModel from "./use-model"
+
+export default (WrappedComponent, modelClass, givenArgs) => {
+  const ApiMakerWithModel = (props) => {
+    const args = Object.assign({match: props.match}, givenArgs)
+    const useModelResult = useModel(modelClass, args)
+
+    return (
+      <WrappedComponent {...useModelResult} {...props} />
+    )
+  }
+
+  return memo(ApiMakerWithModel)
+}