74 lines
No EOL
2.5 KiB
TypeScript
74 lines
No EOL
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { FaTrash } from 'react-icons/fa';
|
|
import { createPortal } from 'react-dom';
|
|
import styles from './PromptItemDelete.module.css';
|
|
import { useAuthToken } from '../../../auth/Hooks/use-auth-token';
|
|
import { authorizedDelete } from '../../../api';
|
|
|
|
interface PromptItemDeleteProps {
|
|
promptId: string;
|
|
promptTitle: string;
|
|
onDelete: (promptId: string) => Promise<void>;
|
|
}
|
|
|
|
export const PromptItemDelete: React.FC<PromptItemDeleteProps> = ({ promptId, promptTitle, onDelete }) => {
|
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
|
const { getToken } = useAuthToken();
|
|
|
|
const handleDeleteClick = () => {
|
|
setShowConfirmation(true);
|
|
};
|
|
|
|
const handleConfirm = async () => {
|
|
try {
|
|
await authorizedDelete(`/api/user/prompts/${promptId}`, getToken);
|
|
setShowConfirmation(false);
|
|
await onDelete(promptId);
|
|
} catch (error) {
|
|
console.error('Error deleting prompt:', error);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setShowConfirmation(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
className={styles.deleteButton}
|
|
title="Delete"
|
|
onClick={handleDeleteClick}
|
|
>
|
|
<FaTrash />
|
|
</button>
|
|
|
|
{showConfirmation && createPortal(
|
|
<div className={styles.modalOverlay}>
|
|
<div className={styles.modalContent}>
|
|
<h2>Delete Prompt</h2>
|
|
<p>Are you sure you want to delete the prompt:</p>
|
|
<p className={styles.deletePromptTitle}>{promptTitle}?</p>
|
|
<div className={styles.modalButtons}>
|
|
<button
|
|
className={`${styles.modalButton} ${styles.cancelButton}`}
|
|
onClick={handleCancel}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
className={`${styles.modalButton} ${styles.confirmButton}`}
|
|
onClick={handleConfirm}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PromptItemDelete;
|