react-hook-form#Message TypeScript Examples

export default function RealEstate(): ReactElement {
  const defaultValues = blankAddForm
  const methods = useForm<PropertyAddForm>({ defaultValues })
  const { handleSubmit, control, getValues } = methods

  const dispatch = useDispatch()

  const { onAdvance, navButtons } = usePager()

  const activeYear: TaxYear = useSelector(
    (state: YearsTaxesState) => state.activeYear
  )

  const properties: Property[] = useYearSelector(
    (state) => state.information.realEstate
  )

  const propertyType = useWatch({
    control,
    name: 'propertyType'
  })

  const otherExpensesEntered: number | undefined = useWatch({
    control,
    name: 'expenses.other'
  })

  const validateDays = (n: number, other: number): Message | true => {
    const days = daysInYear(TaxYears[activeYear])
    return n + other <= days ? true : `Total use days must be less than ${days}`
  }

  const validatePersonal = (n: number): Message | true =>
    validateDays(n, Number(getValues().rentalDays ?? 0))

  const validateRental = (n: number): Message | true =>
    validateDays(n, Number(getValues().personalUseDays ?? 0))

  const deleteProperty = (n: number): void => {
    dispatch(removeProperty(n))
  }

  const onAddProperty = (formData: PropertyAddForm): void => {
    dispatch(addProperty(toProperty(formData)))
  }

  const onEditProperty =
    (index: number) =>
    (formData: PropertyAddForm): void => {
      dispatch(editProperty({ value: toProperty(formData), index }))
    }

  const expenseFields: ReactElement[] = enumKeys(PropertyExpenseType).map(
    (k, i) => (
      <LabeledInput
        key={i}
        label={displayExpense(PropertyExpenseType[k])}
        name={`expenses.${k.toString()}`}
        patternConfig={Patterns.currency}
        required={false}
      />
    )
  )

  const otherExpenseDescription = (() => {
    if ((otherExpensesEntered ?? 0) !== 0) {
      return (
        <LabeledInput
          key={enumKeys(PropertyExpenseType).length}
          label="Other description"
          name="otherExpenseType"
          required={true}
        />
      )
    }
  })()

  const form = (
    <FormListContainer
      defaultValues={defaultValues}
      items={properties.map((a) => toUserInput(a))}
      icon={() => <HouseOutlined />}
      primary={(p) => toProperty(p).address.address}
      secondary={(p) => <Currency value={toProperty(p).rentReceived} />}
      onSubmitAdd={onAddProperty}
      onSubmitEdit={onEditProperty}
      removeItem={(i) => deleteProperty(i)}
    >
      <h3>Property Location</h3>
      <Grid container spacing={2}>
        <AddressFields
          autofocus={true}
          checkboxText="Does the property have a foreign address"
          allowForeignCountry={false}
        />
        <GenericLabeledDropdown
          dropDownData={enumKeys(PropertyType)}
          label="Property type"
          textMapping={(t) => displayPropertyType(PropertyType[t])}
          keyMapping={(_, n) => n}
          name="propertyType"
          valueMapping={(n) => n}
        />
        {(() => {
          if (propertyType === 'other') {
            return (
              <LabeledInput
                name="otherPropertyType"
                label="Short property type description"
                required={true}
              />
            )
          }
        })()}
      </Grid>
      <h3>Use</h3>
      <Grid container spacing={2}>
        <LabeledInput
          name="rentalDays"
          rules={{ validate: (n: string) => validateRental(Number(n)) }}
          label="Number of days in the year used for rental"
          patternConfig={Patterns.numDays(activeYear)}
        />
        <LabeledInput
          name="personalUseDays"
          rules={{ validate: (n: string) => validatePersonal(Number(n)) }}
          label="Number of days in the year for personal use"
          patternConfig={Patterns.numDays(activeYear)}
        />
        <LabeledCheckbox
          name="qualifiedJointVenture"
          label="Is this a qualified joint venture"
        />
      </Grid>
      <h3>Property Financials</h3>
      <h4>Income</h4>
      <Grid container spacing={2}>
        <LabeledInput
          name="rentReceived"
          label="Rent received"
          patternConfig={Patterns.currency}
        />
      </Grid>
      <h4>Expenses</h4>
      <Grid container spacing={2}>
        {_.chain([...expenseFields, otherExpenseDescription])
          .chunk(2)
          .map((segment, i) =>
            segment.map((item, k) => (
              <Grid item key={`${i}-${k}`} xs={12} sm={6}>
                {item}
              </Grid>
            ))
          )
          .value()}
      </Grid>
    </FormListContainer>
  )

  return (
    <FormProvider {...methods}>
      <form
        tabIndex={-1}
        onSubmit={intentionallyFloat(handleSubmit(onAdvance))}
      >
        <Helmet>
          <title>Real Estate | Income | UsTaxes.org</title>
        </Helmet>
        <h2>Properties</h2>
        {form}
        {navButtons}
      </form>
    </FormProvider>
  )
}