5chan/src/components/error-display/error-display.tsx

import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { copyToClipboard } from '../../lib/utils/clipboard-utils';
import styles from './error-display.module.css';

const ErrorDisplay = ({ error }: { error: any }) => {
  const { t } = useTranslation();
  const [feedbackMessageKey, setFeedbackMessageKey] = useState<string | null>(null);
  const [shouldShow, setShouldShow] = useState(false);

  useEffect(() => {
    const hasError = !!(error?.message || error?.stack || error?.details || error);
    if (!hasError) {
      setShouldShow(false);
      return;
    }

    const timer = setTimeout(() => {
      setShouldShow(true);
    }, 1000); // delay to avoid false positives, for example when accessing cached feeds that may appear offline for a second or so

    return () => clearTimeout(timer);
  }, [error]);

  if (!shouldShow) {
    return null;
  }

  const originalDisplayMessage = error?.message ? `${t('error')}: ${error.message}` : typeof error === 'string' ? error : null;

  const handleMessageClick = async () => {
    if (!error || !error.message || feedbackMessageKey) return;

    const errorString = JSON.stringify(error, null, 2);
    try {
      await copyToClipboard(errorString);
      setFeedbackMessageKey('copied');
      setTimeout(() => {
        setFeedbackMessageKey(null);
      }, 1500);
    } catch (err) {
      console.error('Failed to copy error: ', err);
      setFeedbackMessageKey('failed');
      setTimeout(() => {
        setFeedbackMessageKey(null);
      }, 1500);
    }
  };

  let currentDisplayMessage = '';
  const classNames = [styles.errorMessage];
  let isClickable = false;

  if (feedbackMessageKey === 'copied') {
    currentDisplayMessage = t('fullErrorCopiedToClipboard', 'full error copied to the clipboard');
    classNames.pop();
    classNames.push(styles.feedbackSuccessMessage);
  } else if (feedbackMessageKey === 'failed') {
    currentDisplayMessage = t('copyFailed', 'copy failed');
  } else if (originalDisplayMessage) {
    currentDisplayMessage = originalDisplayMessage;
    isClickable = true;
    classNames.push(styles.clickableErrorMessage);
  }

  return (
    <div className={styles.error}>
      {currentDisplayMessage && (
        <span
          className={classNames.join(' ')}
          onClick={isClickable ? handleMessageClick : undefined}
          title={isClickable ? t('clickToCopyFullError', 'Click to copy full error') : undefined}
        >
          {currentDisplayMessage}
        </span>
      )}
    </div>
  );
};

export default ErrorDisplay;