import { AxiosError } from 'axios'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { useDispatch } from 'react-redux'; import { patchMe } from 'soapbox/actions/me'; import snackbar from 'soapbox/actions/snackbar'; import { Button, Card, CardBody, FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui'; import { useOwnAccount } from 'soapbox/hooks'; const BioStep = ({ onNext }: { onNext: () => void }) => { const dispatch = useDispatch(); const account = useOwnAccount(); const [value, setValue] = React.useState(account?.source.get('note') || ''); const [isSubmitting, setSubmitting] = React.useState(false); const [errors, setErrors] = React.useState([]); const trimmedValue = value.trim(); const isValid = trimmedValue.length > 0; const isDisabled = !isValid; const handleSubmit = () => { setSubmitting(true); const credentials = dispatch(patchMe({ note: value })); Promise.all([credentials]) .then(() => { setSubmitting(false); onNext(); }).catch((error: AxiosError) => { setSubmitting(false); if (error.response?.status === 422) { setErrors([error.response.data.error.replace('Validation failed: ', '')]); } else { dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.')); } }); }; return (