Function useSubmissions

Returns UseSubmissionsValue

The returning object contains:

• submissions: The list of submissions currently fetched.
• approveAll: Function 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:

• Error Handling: Errors during fetch operations are logged to the console for debugging and may trigger retries or fallback mechanisms.
• State Management: The hook maintains internal state (fetched, hasMore currentPage) to optimize UI updates and avoid unnecessary fetches.
• Bulk Actions: Includes utility methods like approveAll and rejectAll to perform bulk updates on all currently loaded submissions.
• Caching: API responses are optionally cached to minimize redundant network requests, improving performance during pagination or refresh operations.
• Effect Trigger: A useEffect hook is used to trigger the initial data fetch and handle dependencies like project IDs or filter parameters.

import { useSubmissions } from 'react-playmakers';

const SubmissionsComponent = () => {
  const { submissions, fetchMore, approveAll, rejectAll } = useSubmissions([], {limit: 10,
state: "submitted"});

  useEffect(() => {
    // Perform an initial fetch of submissions when the component mounts
    fetchMore();
  }, []);

  return (
    <div>
      <h1>Submissions</h1>
      <ul>
        {submissions.map((submission) => (
          <li key={submission.id}>
            <p>{submission.name}</p>
            <button onClick={() => submission.approve("Looks good!")}>Approve</button>
            <button onClick={() => submission.reject("Needs changes.")}>Reject</button>
          </li>
        ))}
      </ul>
      <button onClick={approveAll}>Approve All</button>
      <button onClick={rejectAll}>Reject All</button>
      <button onClick={fetchMore}>Load More</button>
    </div>
  );
};

export default SubmissionsComponent;
Copy