formik#withFormik TypeScript Examples

WithFormik = withFormik<LogContactFormInnerProps, FormValues>({
  // Transform outer props into form values
  mapPropsToValues: (props) => ({
    entryDate: props.initialEntryDate || new Date(),
    contactWith: props.initialContactWith || null
  }),

  // Add a custom validation function (this can be async too!)
  validationSchema: Yup.object({
    contactWith: Yup.array()
      .min(1, <FormattedMessage id="LogForm.error-1" />)
      .required(<FormattedMessage id="LogForm.error-2" />)
  }),

  handleSubmit: async (values, actions) =>
    Promise.all(
      values.contactWith.map((contact) =>
        actions.props.logContactMutation({
          variables: {
            input: {
              fromUid: actions.props.uid,
              toUid: contact.uid,
              ...toDateObject(values.entryDate)
            }
          },
          refetchQueries: [
            {
              query: LogHistoryDocument,
              variables: { uid: actions.props.uid }
            }
          ]
        })
      )
    ).then(() => actions.setSubmitting(false))
})(InnerForm)

WithFormik = withFormik<ProfileFormInnerProps, FormValues>({
  mapPropsToValues: (props) => ({
    healthStatus: props.initialHealthStatus || statusOptions[0].value,
    inQuarantine: props.initialInQuarantine || false,
    notifyButtonEnabled: false
  }),

  handleSubmit: async (values, actions) => {
    actions.props.updateHealthStatusMutation({
      variables: {
        uid: actions.props.uid,
        status: values.healthStatus as HealthStatus,
        isInQuarantine: values.inQuarantine
      }
    });
  }
})(InnerForm)

SettingsCustomExplorerForm = withFormik<
  SettingsExplorerFormProps,
  SettingsExplorerFormValues
>({
  mapPropsToValues: (props): SettingsExplorerFormValues => ({
    network: props.network,
    esploraURL: '',
    electrsURL: '',
  }),

  validationSchema: Yup.object().shape({
    esploraURL: Yup.string().required('An explorer URL is required'),
    electrsURL: Yup.string().required('A web explorer URL is required'),
  }),

  handleSubmit: async (values, { props }) => {
    await props.dispatch(
      setExplorer(
        { type: 'Custom', esploraURL: values.esploraURL, electrsURL: values.electrsURL },
        props.network
      )
    );

    props.onDone();
  },

  displayName: 'SettingsExplorerForm',
})(SettingsExplorerForm)

ModalUnlockEnhancedForm = withFormik<ModalUnlockFormProps, ModalUnlockFormValues>({
  mapPropsToValues: (props): ModalUnlockFormValues => ({
    handleModalUnlockClose: props.handleModalUnlockClose.bind(this),
    password: '',
  }),

  validationSchema: Yup.object().shape({
    password: Yup.string()
      .required('A password is required')
      .min(8, 'Password should be 8 characters minimum'),
  }),

  handleSubmit: async (values, { props }) => {
    return await props.handleUnlock(values.password);
  },

  displayName: 'ModalUnlockForm',
})(ModalUnlockForm)

BackUpUnlockEnhancedForm = withFormik<BackUpUnlockFormProps, BackUpUnlockFormValues>({
  mapPropsToValues: (): BackUpUnlockFormValues => ({
    password: '',
  }),

  validationSchema: Yup.object().shape({
    password: Yup.string()
      .required('A password is required')
      .min(8, 'Password should be 8 characters minimum'),
  }),

  handleSubmit: async (values, { props, setErrors }) => {
    try {
      const mnemonic = decrypt(props.encryptedMnemonic, createPassword(values.password));
      await props.dispatch(setBackup(mnemonic));
      return props.history.push(INITIALIZE_SEED_PHRASE_ROUTE);
    } catch (err) {
      console.error(err);
      setErrors({ password: 'This password is not correct' });
    }
  },

  displayName: 'BackUpUnlockForm',
})(BackUpUnlockForm)

OnboardingForm = withFormik<OnboardingFormProps, OnboardingFormValues>({
  mapPropsToValues: (): OnboardingFormValues => ({
    confirmPassword: '',
    password: '',
    acceptTerms: false,
    makeSecurityAccount: false,
  }),

  validationSchema: Yup.object().shape({
    password: Yup.string()
      .required('Please input password')
      .min(8, 'Password is too short - should be 8 chars minimum.'),
    confirmPassword: Yup.string()
      .required('Please confirm password')
      .min(8, 'Password is too short - should be 8 chars minimum.')
      .oneOf([Yup.ref('password'), null], 'Passwords must match'),
    acceptTerms: Yup.bool().oneOf([true], 'Accepting Terms & Conditions is required'),
  }),

  handleSubmit: (values, { props }) => {
    props.onSubmit(values).catch(console.error);
  },

  displayName: 'WalletCreateForm',
})(OnboardingFormView)

SettingsChangePasswordEnhancedForm = withFormik<
  SettingsChangePasswordFormProps,
  SettingsChangePasswordFormValues
>({
  mapPropsToValues: (): SettingsChangePasswordFormValues => ({
    currentPassword: '',
    newPassword: '',
    confirmNewPassword: '',
  }),

  validationSchema: Yup.object().shape({
    currentPassword: Yup.string()
      .required('Please input password')
      .min(8, 'Password is too short - should be 8 chars minimum.'),
    newPassword: Yup.string()
      .required('Please input password')
      .min(8, 'Password is too short - should be 8 chars minimum.'),
    confirmNewPassword: Yup.string()
      .required('Please confirm password')
      .min(8, 'Password is too short - should be 8 chars minimum.')
      .oneOf([Yup.ref('newPassword'), null], 'Passwords must match'),
  }),

  handleSubmit: (values, { props }) => {
    props.history.push(DEFAULT_ROUTE);
  },

  displayName: 'SettingsChangePasswordForm',
})(SettingsChangePasswordForm)

LogInEnhancedForm = withFormik<LogInFormProps, LogInFormValues>({
  mapPropsToValues: (): LogInFormValues => ({
    password: '',
  }),
  validationSchema: Yup.object().shape({
    password: Yup.string()
      .required('Please input password')
      .min(8, 'Password should be 8 characters minimum.'),
  }),
  handleSubmit: (values, { props, setErrors, setSubmitting }) => {
    const logInAction = logIn(createPassword(values.password), props.passwordHash);
    props
      .dispatch(logInAction)
      .then(() => {
        if (logInAction.type === AUTHENTICATION_SUCCESS) {
          props.dispatch({ type: AUTHENTICATION_SUCCESS }).catch(console.error);
          props.history.push(DEFAULT_ROUTE);
        } else {
          const err = logInAction.payload.error;
          setErrors({ password: err.message });
          setSubmitting(false);
        }
      })
      .catch(console.error);
  },
  displayName: 'LogInForm',
})(LogInForm)

WithFormik = withFormik<SettingsFormInnerProps, FormValues>({
  // Transform outer props into form values
  mapPropsToValues: (props) => ({
    displayName: props.initialDisplayName,
    preferences: props.initialPreferences,
    smsNumber: props.initialSmsNumber,
    should_show_profileURL: false
  }),

  handleSubmit: async (values, actions) => {
    const { settingsChanged } = useAnalytics();

    //Check if notification preference is set to SMS and contact number is not null
    if (values.preferences.contact_via_sms && !values.smsNumber) {
      actions.props.toast({
        position: 'bottom-right',
        title: <FormattedMessage id="Settings.SMS-missing" />,
        description: <FormattedMessage id="Settings.SMS-desc" />,
        status: 'error',
        isClosable: true
      });
      actions.setSubmitting(false);
      return;
    }

    try {
      //  Public Profile
      await firebase.database().ref(`profiles/${actions.props.uid}/`).update({
        displayName: values.displayName
      });

      //  Settings
      await firebase
        .firestore()
        .collection('accounts')
        .doc(actions.props.uid)
        .update({
          smsNumber: values.smsNumber.length > 0 ? values.smsNumber : null,
          'preferences.contact_via_sms': values.smsNumber.length > 0
        });

      actions.props.toast({
        position: 'bottom-right',
        title: <FormattedMessage id="Settings.saved" />,
        description: <FormattedMessage id="Settings.msg" />,
        status: 'success',
        isClosable: true
      });

      settingsChanged();
      actions.setSubmitting(false);
    } catch (e) {
      actions.props.toast({
        position: 'bottom-right',
        title: <FormattedMessage id="Settings.error" />,
        description: e.message,
        status: 'error',
        isClosable: true
      });
      actions.setSubmitting(false);
    }
  }
})(InnerForm)

DataDocChartComposer = withFormik<IProps, IChartFormValues>({
    mapPropsToValues: ({ meta, cellAboveId }) =>
        mapMetaToFormVals(meta, cellAboveId),

    handleSubmit: (values, { props: { onUpdateChartConfig, meta } }) => {
        onUpdateChartConfig(formValsToMeta(values, meta));
    },
})(DataDocChartComposerComponent)

AddressAmountEnhancedForm = withFormik<AddressAmountFormProps, AddressAmountFormValues>({
  mapPropsToValues: (props: AddressAmountFormProps): AddressAmountFormValues => ({
    address: props.transaction.sendAddress?.value ?? '',
    // Little hack to initialize empty value of type number
    // https://github.com/formium/formik/issues/321#issuecomment-478364302
    amount:
      props.transaction.sendAmount > 0
        ? fromSatoshi(props.transaction.sendAmount ?? 0, props.asset.precision)
        : ('' as unknown as number),
    assetTicker: props.asset.ticker ?? '??',
    assetPrecision: props.asset.precision,
    balance: fromSatoshi(props.balance ?? 0, props.asset.precision),
  }),

  validationSchema: (props: AddressAmountFormProps): any =>
    Yup.object().shape({
      address: Yup.string()
        .required('Please enter a valid address')
        .test(
          'valid-address',
          'Address is not valid',
          (value) => value !== undefined && isValidAddressForNetwork(value, props.network)
        ),

      amount: Yup.number()
        .required('Please enter a valid amount')
        .min(
          getMinAmountFromPrecision(props.asset.precision),
          'Amount should be at least 1 satoshi'
        )
        .test('insufficient-funds', 'Insufficient funds', (value) => {
          return value !== undefined && value <= fromSatoshi(props.balance, props.asset.precision);
        }),
    }),

  handleSubmit: async (values, { props }) => {
    const masterPubKey = await props.account.getWatchIdentity(props.network);
    const changeAddressGenerated = await masterPubKey.getNextChangeAddress();
    const changeAddress = createAddress(
      changeAddressGenerated.confidentialAddress,
      changeAddressGenerated.derivationPath
    );

    await props.dispatch(incrementChangeAddressIndex(props.account.getAccountID(), props.network)); // persist address in wallet

    await props
      .dispatch(
        setAddressesAndAmount(
          toSatoshi(values.amount, values.assetPrecision),
          [changeAddress],
          createAddress(values.address)
        )
      )
      .catch(console.error);

    await props.dispatch(setPendingTxStep('address-amount'));
    props.history.push({
      pathname: SEND_CHOOSE_FEE_ROUTE,
    });
  },
  displayName: 'AddressAmountForm',
})(AddressAmountForm)