Function useQuests

Returns UseQuestsReturn

The returning object contains:

• fetched: Boolean indicating whether the quests have been fetched from the API.
• quests: List of quests with extended functionality.
• refresh: FetchQuestsMethod Function to refresh the quests. Takes an optional quiet boolean.

Implementation Details

• State Management: It maintains local state using useState to store the quests and a fetched status.
• Quest Extension: The extendQuests function augments each quest with additional methods (complete, delete, push).
• Fetching Quests: The fetchQuests method retrieves quests from the API, applies caching, and extends them with additional methods.
• State Updates: Updates to individual quests are managed using updateQuestState, which ensures state consistency.
• Updating Quests: The pushQuest method updates a quest via the API and refreshes the local state.
• Updating Quest State: The pushState method updates the state of a quest via the API and refreshes the local state. This function can be called with a cascade parameter to also update its referrer quest state.
• Deleting Quests: The deleteQuest method removes a quest via the API and updates local state to exclude it.
• Deleting Quests with Cascade: The deleteQuest method can be called with a cascade parameter to delete a quest and its referrer quest.
• Completing Quests: The complete method marks a quest as complete and clears relevant cached data.
• Automatic Fetching: A useEffect is used to automatically fetch quests when the params change.

import { useQuests } from 'react-playmakers';

const QuestComponent = () => {
  const { fetched, quests, refresh } = useQuests({ key: 'example' });

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

  return (
    <div>
      <h1>Quests</h1>
      <ul>
        {quests.map(quest => (
          <li key={quest.id}>
            {quest.name}
            <button onClick={() => quest.complete({ creatorId:
'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' })}>Complete</button>
            <button onClick={quest.delete}>Delete</button>
            <button onClick={() => quest.push({ name: 'Updated Quest Name' })}>Update</button>
          </li>
        ))}
      </ul>
      <button onClick={() => refresh()}>Refresh Quests</button>
    </div>
  );
};
Copy