useActiveDocument

Overview

useActiveDocument is a custom React hook designed to fetch and manage the state of a specific document based on the document ID retrieved from the URL parameters. It uses @tanstack/react-query for data fetching and caching, supports multiple document types such as NotebookDocument, BoardDocument, CoachingDocument, and PdfDocument.

Usage

To use useActiveDocument, ensure your component is within a react-router-dom context and that useDocuments is properly set up to provide the necessary document data.

import React from 'react';
import { useParams } from 'react-router-dom';
import useActiveDocument from '@lunchbox/apps/hooks/useActiveDocument';

const DocumentViewer: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { data: document, isLoading, isError, error } = useActiveDocument();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>{document.title}</h1>
      {/* Render document content */}
    </div>
  );
};

export default DocumentViewer;

Parameters

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

• params.id: Retrieved from the URL using useParams from react-router-dom.
• data: Fetched using the useDocuments hook, which provides an array of document metadata.

Returns

The hook returns an object with the following properties, managed by useQuery from @tanstack/react-query:

• data: The fetched document data.
• isLoading: A boolean indicating if the data is currently being loaded.
• isError: A boolean indicating if there was an error fetching the data.
• error: The error object if an error occurred during data fetching.