Tag: Formatting

I have a form with some text input and some custom components. I have enabled formatter validation for text input, but not for the custom components. I am now trying to add to my habit of form-checking categoriesMultiselect Component. This component stores its data in the Redux memory. I took care of the validation myself and added value to my Redux props:

const mapStateToProps = (
  state: RecordOf,
  ownProps: { rerenderKey: boolean }
) => ({...
    isCategoriesValid: selectIsCategoriesValid(state),
...
})

, I just want to plug in props.isCategoriesValid in my form of form.

After reading the official documentation, I think I do that by adding validate={validateCategories} as a prop for the custom component and adding the function validateCategories to the component. So I tried it that way:

//above React render()
      validateCategories = () => {
        let error
        if (!this.props.selectIsCategoriesValid) {
          error = 'please select a category'
        }
        console.log(error)
        return error
      }

// Inside React render()
          

validateCategories never gets run. That's why I tested it by adding it validateField to one of my inputs onChange Function:

       validateField('categories')}
        deleteText={setFieldValue}
      />

When it tries to validate the field, I get a console error:

The property & # 39; validate & # 39; from undefined can not be read

In this line of code in form:

  var validateField = useEventCallback(function (name) {
if (isFunction(fieldRegistry.current(name).validate)) {

At least I have plugged Formik into my Redux because I at least successfully trigger a Redux action when submitting the form. What am I doing wrong?

Code:

//@flow

import * as Yup from 'yup'
import { Formik, withFormik } from 'formik'
import { Container } from 'native-base'
import * as React from 'react'
import { ScrollView, View, Alert, Button } from 'react-native'
import { connect } from 'react-redux'
import { Category as CategoryEnums } from 'src/enums'
import type { VepoState } from 'src/components/model'
import type { RecordOf } from 'immutable'
import type { Product } from 'src/model'
import VepoHeader from 'src/components/formControls/header/view'
import { selectIsAddFormValid } from './selector'
import { selectProduct } from './selector'
// import { Button } from 'src/components/formControls'
import { ImagePicker } from 'src/components/formControls'
import LocationAutocomplete from 'src/components/formControls/locationAutocomplete/view'
import { uploadAddProduct, updateRerenderKey } from './action'
import { viewStyle } from './style'
import type { Dispatch } from 'redux'
import { updateAddProductImage } from './action'
import type { Place } from 'src/model/location'
import { Colors, Spacing } from 'src/styles'
import { Input } from 'src/components/formControls'
import { onPress } from './controller'
import { CategoriesMultiselect } from 'src/components/formControls'
import {
  selectIsGrocerySelected,
  selectIsCategoriesValid,
  isLocationValid
} from 'src/components/product/add/groceryItem/selector'

const mapStateToProps = (
  state: RecordOf,
  ownProps: { rerenderKey: boolean }
) => ({
  locationListDisplayed: state.formControls.root.locationListDisplayed,
  isAddFormValid: selectIsAddFormValid(state),
  // $FlowFixMe
  product: selectProduct(state),
  // $FlowFixMe
  isGrocerySelected: selectIsGrocerySelected(state),
  // $FlowFixMe
  categories: state.formControls.categories,
  isCategoriesValid: selectIsCategoriesValid(state),
  image: state.product.add.image,
  rerenderKey: ownProps.rerenderKey,
  location: state.formControls.location,
  isLocationValid: isLocationValid(state)
})

// eslint-disable-next-line flowtype/no-weak-types
const mapDispatchToProps = (dispatch: Dispatch<*>): Object => ({
  updateAddProductImage: (value): void => {
    dispatch(updateAddProductImage({ value }))
  },
  uploadAddProduct: (product: Product): void => {
    dispatch(uploadAddProduct(product))
  },
  updateRerenderKey: () => {
    dispatch(updateRerenderKey())
  }
})

export const getLocationIsValid = (place: Place): boolean => {
  return Object.keys(place).length > 0 ? true : false
}
type AddGroceryStoreState = {
  name: string,
  brand: string,
  description: string,
  price?: number
}

class AddGroceryItemView extends React.Component {
  validateCategories = () => {
    let error
    if (!this.props.selectIsCategoriesValid) {
      error = 'please select a category'
    }
    console.log(error)
    return error
  }
  render() {
    const {
      values,
      handleSubmit,
      setFieldValue,
      errors,
      touched,
      setFieldTouched,
      isValid,
      isSubmitting,
      validateField
    } = this.props
    return (
      
        
        
          
            
              
            
            
              
              
               validateField('categories')}
                deleteText={setFieldValue}
              />
              
                
                
                
                  
                
              
            
          
        
        
        {/*  */}
      
    )
  }
}

const container = {
  flex: 1,
  ...Spacing.horizontalPaddingLarge,
  backgroundColor: Colors.greyLight,
  flexDirection: 'column'
}

const formikEnhancer = withFormik({
  validationSchema: Yup.object().shape({
    name: Yup.string().required(),
    brand: Yup.string().required(),
    categories: Yup.array(),
    description: Yup.string()
      .min(9)
      .required(),
    price: Yup.number()
      .typeError('price must be a number')
      .required()
  }),
  mapPropsToValues: () => ({
    name: '',
    brand: '',
    description: '',
    price: '',
    categories: ()
  }),
  handleSubmit: (values, { props }) => {
    props.updateRerenderKey()
  },
  displayName: 'AddGroceryItemView'
})(AddGroceryItemView)

// $FlowFixMe
const AddGroceryItemViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(formikEnhancer)

export default AddGroceryItemViewComponent