Skip to main content

useDeleteDocument

Overview​

useDeleteDocument is a custom React hook that facilitates the deletion of a document. It uses @tanstack/react-query for managing the mutation and updating the cache. The hook ensures that the document is deleted from the current project session and that the related cache entries are invalidated to reflect the changes in the UI.

Usage​

To use useDeleteDocument, ensure your component has access to the necessary hooks (useAuth, useProjectSession).

import React from 'react';
import useDeleteDocument from '@lunchbox/apps/hooks/useDeleteDocument';
import { NavbarDoc } from '@lunchbox/apps/types/docs';

const DocumentDeleter: React.FC<{ doc: NavbarDoc }> = ({ doc }) => {
  const deleteDocument = useDeleteDocument();

  const handleDelete = () => {
    deleteDocument.mutate({ doc });
  };

  return (
    <button onClick={handleDelete}>Delete Document</button>
  );
};

export default DocumentDeleter;

Parameters​

This hook does not take any parameters directly. It uses the following:

  • payload: An object containing:
    • doc: A NavbarDoc object representing the document to be deleted.

Returns​

The hook returns a mutation object with the following properties, managed by useMutation from @tanstack/react-query:

  • mutate: A function to trigger the mutation.
  • isLoading: A boolean indicating if the mutation is currently being executed.
  • isError: A boolean indicating if there was an error during the mutation.
  • error: The error object if an error occurred during the mutation.
  • isSuccess: A boolean indicating if the mutation was successful.

Notes​

  • The hook relies on the authentication state to retrieve the current user data and the project session to retrieve the current project data.
  • The DOCUMENT_MAPPER should map document types to their respective classes, which implement the delete method.
  • Upon successful mutation, the hook invalidates the related cache queries to ensure the UI reflects the updated state.