Function useSubmissionsByParams

Returns UseSubmissionsValue

The returning object contains:

• submissions: The filtered list of submissions, which includes only submissions that match the specified params.
• approveAll: Fucntion to approve all submissions in the current list.
• refresh: Function to refresh the list of submissions by re-fetching them from the backend. Pass quiet to suppress loading indicators.
• rejectAll: Function to reject all submissions in the current list.
• fetchMore: Function to fetch additional submissions beyond the current list. Pass refresh to indicate whether to refresh the existing list.
• fetched: Boolean indicating whether the list of submissions has been fetched from the backend.
• hasMore: Boolean indicating whether there are more submissions available to fetch.
• currentPage: The current page of submissions that has been fetched.

Implementation Details:

• Parameterized Fetching: Uses the provided params to fetch submissions that match specific criteria (e.g., state, schemaId, ownerId, etc.).
• Integration with useSubmissions: Delegates the functionality to useSubmissions, passing an empty initial list and the params object for filtered fetching.
• State Management: Inherits state management and utility methods from the useSubmissions hook, including pagination (fetchMore), refreshing (refresh), and bulk actions (approveAll, rejectAll).
• Error Handling: Errors during the fetch process are logged via useSubmissions and can be handled or surfaced as needed.

Example Usage:

import { useSubmissionsByParams } from 'react-playmakers';

const SubmissionsList = () => {
  const params = {
    state: "published",
    ownerId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    schemaId: "sXXXXXXXX",
    limit: 10,
  };
  const { submissions, fetchMore, refresh, fetched } = useSubmissionsByParams(params);

  if (!fetched) {
    return <div>Loading submissions...</div>;
  }

  return (
    <div>
      {submissions.map(submission => (
        <div key={submission.id}>{submission.name}</div>
      ))}
      <button onClick={() => fetchMore()}>Load More</button>
      <button onClick={() => refresh(false)}>Refresh</button>
    </div>
  );
};
Copy