Function useProjects

Returns UseProjectsReturn

The returning object contains:

• projects: Array of fetched projects.
• fetched: A boolean flag indicating whether the projects have been fetched.
• hasMore: A boolean indicating whether more projects are available to fetch.
• currentPage: The current page of the pagination.
• fetchMore: ProjectsFetchMoreMethod - Function to fetch the next page of projects or refresh the current page.
• refresh: ProjectsRefreshMethod - Function to refresh the project list.

• Implementation Details

• Caching: getProjects responses are cached for 60 seconds using withCache to optimize performance and reduce API calls.
• Effect Trigger: The useEffect hook triggers fetchProjects whenever the params page value changes.
• Error Handling: Errors during API calls are logged to the console and re-thrown with additional context.
• State Management:
  • projects: Holds the list of fetched projects.
  • hasMore: Indicates whether there are more projects to fetch.
  • fetched: Tracks whether data fetching is complete.
• Pagination Logic:
  • fetchProjects: Fetches the initial or refreshed list of projects, updating projects and hasMore.
  • fetchMore: Fetches additional pages of projects, either appending them to the current list or refreshing the last page.
  • Pagination utilities (appendNextPage, refreshLastPage, checkHasMore) are managed by usePagination.

import { useProjects } from 'react-playmakers';

// Usage with custom parameters
const { projects, currentPage, fetched } = useProjects({ page: 1, limit: 10 });

// Conditional rendering based on fetch status
if (!fetched) {
  return <LoadingSpinner />;
}

return (
  <div>
    <h2>Projects (Page {currentPage})</h2>
    {projects.map(project => (
      <ProjectCard key={project.id} project={project} />
    ))}
  </div>
);
Copy