SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							import {Fragment, useCallback, useMemo} from 'react';

import {
  addErrorMessage,
  addLoadingMessage,
  addSuccessMessage,
} from 'sentry/actionCreators/indicator';
import {ModalRenderProps, openModal} from 'sentry/actionCreators/modal';
import {Button} from 'sentry/components/button';
import {useInfiniteFeedbackListData} from 'sentry/components/feedback/feedbackDataContext';
import {Flex} from 'sentry/components/profiling/flex';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {HydratedFeedbackItem} from 'sentry/utils/feedback/item/types';
import useApi from 'sentry/utils/useApi';
import useOrganization from 'sentry/utils/useOrganization';
import useUrlParams from 'sentry/utils/useUrlParams';

interface Props {
  feedbackItem: HydratedFeedbackItem;
}

function openDeleteModal({onDelete}: {onDelete: () => void | Promise<void>}) {
  openModal(({Body, Footer, closeModal}: ModalRenderProps) => (
    <Fragment>
      <Body>
        {t('Deleting this feedback is permanent. Are you sure you wish to continue?')}
      </Body>
      <Footer>
        <Flex gap={space(1)}>
          <Button onClick={closeModal}>{t('Cancel')}</Button>
          <Button
            priority="danger"
            onClick={() => {
              closeModal();
              onDelete();
            }}
          >
            {t('Delete')}
          </Button>
        </Flex>
      </Footer>
    </Fragment>
  ));
}

export default function useDeleteFeedback({feedbackItem}: Props) {
  const feedbackId = feedbackItem.feedback_id;

  const api = useApi();
  const organization = useOrganization();
  const {getParamValue: getFeedbackSlug, setParamValue: setFeedbackSlug} =
    useUrlParams('feedbackSlug');
  const {setFeedback} = useInfiniteFeedbackListData();

  const url = useMemo(() => {
    const feedbackSlug = getFeedbackSlug();
    const projectSlug = feedbackSlug?.split(':')[0];
    return `/projects/${organization.slug}/${projectSlug}/feedback/${feedbackId}/`;
  }, [feedbackId, getFeedbackSlug, organization]);

  const handleDelete = useCallback(async () => {
    addLoadingMessage(t('Deleting feedback...'));
    try {
      await api.requestPromise(url, {method: 'DELETE'});
      addSuccessMessage(t('Deleted feedback'));
      setFeedbackSlug('');
      setFeedback(feedbackId, undefined);
    } catch {
      addErrorMessage(t('An error occurred while deleting the feedback.'));
    }
  }, [api, feedbackId, setFeedback, setFeedbackSlug, url]);

  return {
    onDelete: () => openDeleteModal({onDelete: handleDelete}),
  };
}