import { useQueryErrorResetBoundary } from '@tanstack/react-query';
import { PropsWithChildren } from 'react';
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';

type Props = PropsWithChildren<{
  FallbackComponent: React.ComponentType<FallbackProps>;
}>;

export const CommonErrorBoundary = (props: Props) => {
  const { children, FallbackComponent } = props;
  const { reset } = useQueryErrorResetBoundary();

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