|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
import classNames from 'clsx';
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
|
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
|
|
|
|
|
|
import { patchMe } from 'soapbox/actions/me';
|
|
|
|
@ -12,6 +12,11 @@ import resizeImage from 'soapbox/utils/resize-image';
|
|
|
|
|
|
|
|
|
|
import type { AxiosError } from 'axios';
|
|
|
|
|
|
|
|
|
|
const messages = defineMessages({
|
|
|
|
|
header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
|
|
|
|
|
error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** Default header filenames from various backends */
|
|
|
|
|
const DEFAULT_HEADERS = [
|
|
|
|
|
'/headers/original/missing.png', // Mastodon
|
|
|
|
@ -24,6 +29,7 @@ const isDefaultHeader = (url: string) => {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|
|
|
|
const intl = useIntl();
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
const account = useOwnAccount();
|
|
|
|
|
|
|
|
|
@ -65,7 +71,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|
|
|
|
if (error.response?.status === 422) {
|
|
|
|
|
dispatch(snackbar.error((error.response.data as any).error.replace('Validation failed: ', '')));
|
|
|
|
|
} else {
|
|
|
|
|
dispatch(snackbar.error('An unexpected error occurred. Please try again or skip this step.'));
|
|
|
|
|
dispatch(snackbar.error(messages.error));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}).catch(console.error);
|
|
|
|
@ -90,7 +96,6 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|
|
|
|
<div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
|
|
|
|
|
<Stack space={10}>
|
|
|
|
|
<div className='border border-solid border-gray-200 dark:border-gray-800 rounded-lg'>
|
|
|
|
|
{/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
|
|
|
|
|
<div
|
|
|
|
|
role='button'
|
|
|
|
|
className='relative h-24 bg-gray-200 dark:bg-gray-800 rounded-t-md flex items-center justify-center'
|
|
|
|
@ -98,7 +103,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
|
|
|
|
|
{selectedFile || account?.header && (
|
|
|
|
|
<StillImage
|
|
|
|
|
src={selectedFile || account.header}
|
|
|
|
|
alt='Profile Header'
|
|
|
|
|
alt={intl.formatMessage(messages.header)}
|
|
|
|
|
className='absolute inset-0 object-cover rounded-t-md'
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|