Skip to main content

useNotebooks

Overview​

useNotebooks is a custom React hook designed to fetch and manage the state of notebooks related to a specific project. It uses @tanstack/react-query for data fetching and caching, and it relies on the project session to determine the current project context.

Usage​

To use useNotebooks, ensure your component has access to the project session data via useProjectSession.

import React from 'react';
import { useNotebooks } from '@lunchbox/apps/hooks/notebook/useNotebooks';

const NotebooksList: React.FC = () => {
  const { data: notebooks, isLoading, isError, error } = useNotebooks();

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

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

  return (
    <div>
      <h1>Notebooks</h1>
      <ul>
        {notebooks.map(notebook => (
          <li key={notebook._id}>
            {notebook.title}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default NotebooksList;

Parameters​

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

  • payload: An object containing:
    • projectId: The ID of the current project, retrieved from useProjectSession.

Returns​

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

  • data: An array of notebooks.
  • 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.

Notes​

  • The hook relies on useProjectSession to retrieve the current project data.
  • The listNotebooks function should be properly implemented to fetch the notebook data based on the given project ID.
  • Ensure that the QUERY_KEYS constant is correctly defined to generate the appropriate query key for the notebooks list.