import {Button, Result} from 'antd';
import {FC} from 'react';
import {ErrorBoundary as ErrorBoundaryOri, FallbackProps} from 'react-error-boundary';
import {useQueryErrorResetBoundary} from '@tanstack/react-query';
import {ChildrenFC} from '@utils';

const ErrorBoundaryComponent: FC<FallbackProps> = function({error, resetErrorBoundary}) {
  return (
    <Result
      status='error'
      title={error?.message}
      extra={
        <Button type='primary' onClick={resetErrorBoundary}>重试</Button>
      }
    />
  );
};

const ErrorBoundary: ChildrenFC = function({children}) {
  const {reset} = useQueryErrorResetBoundary();

  return (
    <ErrorBoundaryOri
      FallbackComponent={ErrorBoundaryComponent}
      onReset={reset}
    >
      {children}
    </ErrorBoundaryOri>
  );
};

export default ErrorBoundary;
