Function useTutorialsByProject

Custom React hook to fetch and manage tutorial assets filtered by a specific project.

This hook is a wrapper around useTutorials, pre-configured to fetch tutorial assets for a given project by providing the projectId parameter.

Example

import { useTutorialsByProject } from 'react-playmakers';

const TutorialsList = ({ projectId, filters }) => {
  // Using the hook to fetch and display tutorials for the specified project
  const { assets, fetched, hasMore, fetchMore, refresh } = useTutorialsByProject(projectId, filters);

  // useEffect to log when tutorials are being fetched
  useEffect(() => {
    if (!fetched) {
      console.log("Fetching tutorials for project...");
    }
  }, [fetched]);

  return (
    <div>
      {assets.length > 0 ? (
        assets.map(tutorial => (
          <div key={tutorial.id}>
            <p>{tutorial.name}</p>
            <button onClick={() => tutorial.delete()}>Delete</button>
          </div>
        ))
      ) : (
        <p>No tutorials found</p>
      )}

      {hasMore && <button onClick={fetchMore}>Load More</button>}
      <button onClick={refresh}>Refresh</button>
    </div>
  );
}

export default TutorialsList;
Copy