Restore Network Error column Closes #1591 See merge request soapbox-pub/soapbox!2857environments/review-main-yi2y9f/deployments/4267
commit
f56abb22a1
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Column, Stack, Text, IconButton } from 'soapbox/components/ui';
|
||||
import { isNetworkError } from 'soapbox/utils/errors';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
|
||||
body: { id: 'bundle_column_error.body', defaultMessage: 'Something went wrong while loading this page.' },
|
||||
retry: { id: 'bundle_column_error.retry', defaultMessage: 'Try again' },
|
||||
});
|
||||
|
||||
interface IErrorColumn {
|
||||
error: Error;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
const ErrorColumn: React.FC<IErrorColumn> = ({ error, onRetry = () => location.reload() }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleRetry = () => {
|
||||
onRetry?.();
|
||||
};
|
||||
|
||||
if (!isNetworkError(error)) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.title)}>
|
||||
<Stack space={4} alignItems='center' justifyContent='center' className='min-h-[160px] rounded-lg p-10'>
|
||||
<IconButton
|
||||
iconClassName='h-10 w-10'
|
||||
title={intl.formatMessage(messages.retry)}
|
||||
src={require('@tabler/icons/refresh.svg')}
|
||||
onClick={handleRetry}
|
||||
/>
|
||||
|
||||
<Text align='center' theme='muted'>{intl.formatMessage(messages.body)}</Text>
|
||||
</Stack>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorColumn;
|
Loading…
Reference in new issue