Function useReward

Returns UseRewardReturn

The returning object contains:

• createReward: CreateRewardMethod - Function for creating a new reward.
• deleteReward: DeleteRewardMethod - Function for deleting an existing reward.
• refresh: FetchRewardMethod - Function for refreshing or fetching the current reward.
• redeemReward: RedeemRewardMethod - Function for redeeming a reward.
• updateReward: UpdateRewardMethod - Function for updating an existing reward.
• pushThumbnail: PushThumbnailMethod - Function for updating the reward thumbnail.
• setThumbnail: React set state function for updating the reward thumbnail.
• thumbnail: The current reward thumbnail, or undefined if no thumbnail is available.
• setReward: React set state function to set or update the reward state.
• reward: The current reward object, or null if no reward is available. -fetched: Boolean indicating if the reward has been successfully fetched.

Implementation Details

• Caching: API responses are cached for 60 seconds (60,000 ms) to minimize redundant network requests.
• Effect Trigger: The useEffect hook is used to initiate the data fetch when the id parameter changes.
• Error Handling: Errors encountered during API calls are logged to the console and re-thrown with additional context for clarity.
• Quiet Fetch: A quiet mode is available for refreshing data without triggering a full re-fetch indicator (e.g., fetched state changes).

import { useReward } from 'react-playmakers';

const RewardComponent = () => {
  const {
    reward,
    createReward,
    deleteReward,
    updateReward,
    redeemReward,
    pushThumbnail,
    refresh,
    fetched
  } = useReward('rXXXXXXX');

  useEffect(() => {
    if (fetched) {
      console.log('Reward fetched:', reward);
    }
  }, [fetched, reward]);

  const handleCreate = async () => {
    const newReward = await createReward({ name: 'New Reward', points: 50 });
    await pushThumbnail(new File([], 'new-reward.png'));
    console.log('Created reward:', newReward);
  };

  const handleDelete = async () => {
    await deleteReward();
    console.log('Reward deleted');
  };

  return (
    <div>
      <h1>Reward: {reward?.name || 'No Reward'}</h1>
      <button onClick={handleCreate}>Create Reward</button>
      <button onClick={handleDelete}>Delete Reward</button>
      <button onClick={() => refresh()}>Refresh Reward</button>
    </div>
  );
};
Copy