import { useState, useMemo, useCallback, createRef } from 'react'; import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; import { useDispatch } from 'react-redux'; import Toggle from 'react-toggle'; import { updateAccount } from 'flavours/glitch/actions/accounts'; import { Button } from 'flavours/glitch/components/button'; import { ColumnBackButton } from 'flavours/glitch/components/column_back_button'; import { Icon } from 'flavours/glitch/components/icon'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; import { me } from 'flavours/glitch/initial_state'; import { useAppSelector } from 'flavours/glitch/store'; import { unescapeHTML } from 'flavours/glitch/utils/html'; import AddPhotoAlternateIcon from 'mastodon/../material-icons/400-24px/add_photo_alternate.svg?react'; import EditIcon from 'mastodon/../material-icons/400-24px/edit.svg?react'; const messages = defineMessages({ uploadHeader: { id: 'onboarding.profile.upload_header', defaultMessage: 'Upload profile header' }, uploadAvatar: { id: 'onboarding.profile.upload_avatar', defaultMessage: 'Upload profile picture' }, }); const nullIfMissing = path => path.endsWith('missing.png') ? null : path; export const Profile = () => { const account = useAppSelector(state => state.getIn(['accounts', me])); const [displayName, setDisplayName] = useState(account.get('display_name')); const [note, setNote] = useState(unescapeHTML(account.get('note'))); const [avatar, setAvatar] = useState(null); const [header, setHeader] = useState(null); const [discoverable, setDiscoverable] = useState(account.get('discoverable')); const [isSaving, setIsSaving] = useState(false); const [errors, setErrors] = useState(); const avatarFileRef = createRef(); const headerFileRef = createRef(); const dispatch = useDispatch(); const intl = useIntl(); const history = useHistory(); const handleDisplayNameChange = useCallback(e => { setDisplayName(e.target.value); }, [setDisplayName]); const handleNoteChange = useCallback(e => { setNote(e.target.value); }, [setNote]); const handleDiscoverableChange = useCallback(e => { setDiscoverable(e.target.checked); }, [setDiscoverable]); const handleAvatarChange = useCallback(e => { setAvatar(e.target?.files?.[0]); }, [setAvatar]); const handleHeaderChange = useCallback(e => { setHeader(e.target?.files?.[0]); }, [setHeader]); const avatarPreview = useMemo(() => avatar ? URL.createObjectURL(avatar) : nullIfMissing(account.get('avatar')), [avatar, account]); const headerPreview = useMemo(() => header ? URL.createObjectURL(header) : nullIfMissing(account.get('header')), [header, account]); const handleSubmit = useCallback(() => { setIsSaving(true); dispatch(updateAccount({ displayName, note, avatar, header, discoverable, indexable: discoverable, })).then(() => history.push('/start/follows')).catch(err => { setIsSaving(false); setErrors(err.response.data.details); }); }, [dispatch, displayName, note, avatar, header, discoverable, history]); return ( <>