@redocly/theme/src/core/hooks/feedback/use-report-dialog.ts

Shared UI components lib

import { useState } from 'react';

import type { ReportDialogProps } from '../../../components/Feedback/ReportDialog';

import { useThemeHooks } from '../use-theme-hooks';
import { useThemeConfig } from '../use-theme-config';

export type ReportButtonProps = {
  onClick: () => void;
  buttonText: string;
  tooltip: string;
  hide: boolean;
};
type ReportComponentsProps = {
  visible?: boolean;
  props: Partial<ReportDialogProps> | ReportButtonProps;
};

export function useReportDialog(): Record<string, ReportComponentsProps> {
  const { codeSnippet: { report = {} } = {} } = useThemeConfig();
  const [isReportDialogShown, setIsReportDialogShown] = useState(false);
  const { tooltipText, buttonText, label } = report;
  const { useTranslate, useSubmitFeedback } = useThemeHooks();
  const { translate } = useTranslate();
  const { submitFeedback } = useSubmitFeedback();

  const showReportDialog = () => {
    setIsReportDialogShown(true);
  };
  const hideReportDialog = () => {
    setTimeout(function () {
      setIsReportDialogShown(false);
    }, 3000);
  };
  const closeReportDialog = () => {
    setIsReportDialogShown(false);
  };
  const reportButtonProps: ReportButtonProps = {
    onClick: showReportDialog,
    buttonText: buttonText || translate('codeSnippet.report.buttonText', 'Report'),
    tooltip: tooltipText || translate('codeSnippet.report.tooltipText', 'Report a problem'),
    hide: report?.hide === true,
  };
  const reportDialogProps: Partial<ReportDialogProps> = {
    settings: {
      label: label || translate('codeSnippet.report.label', 'What is wrong with this code?'),
    },
    onSubmit: hideReportDialog,
    onCancel: closeReportDialog,
    submitFeedback,
  };

  return {
    reportDialog: { visible: isReportDialogShown, props: reportDialogProps },
    reportButton: { props: reportButtonProps },
  };
}