Skip to main content

useProjectSession

Overview​

useProjectSession is a custom React hook designed to fetch and manage the state of a specific project based on the project ID retrieved from the URL parameters. It uses @tanstack/react-query for data fetching and caching, and retrieves project data using the getProject API function.

Usage​

To use useProjectSession, ensure your component is within a react-router-dom context to access the project ID from the URL parameters.

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

const ProjectDetails: React.FC = () => {
  const { data: project, isLoading, isError, error } = useProjectSession();

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

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

  return (
    <div>
      <h1>{project.name}</h1>
      {/* Render project details */}
    </div>
  );
};

export default ProjectDetails;

Parameters​

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

  • params.projectId: Retrieved from the URL using useParams from react-router-dom.

Returns​

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

  • data: The fetched project 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.

Notes​

  • Ensure that the QUERY_KEYS constant is correctly defined to generate the appropriate query key for the project.
  • The hook relies on react-router-dom to retrieve the project ID from the URL parameters.