Function useUserQuests

Custom React hook to manage and fetch a user's quests data.

Example

import { useUserQuests } from 'react-playmakers';

const UserQuestsComponent = () => {
  const { userQuests, fetched, refresh, completeQuest } = useUserQuests({
   startDate: '2025-01-01T00:00:00Z', // Start date filter
   endDate: '2025-01-31T23:59:59Z',   // End date filter
  });

  useEffect(() => {
    if (fetched) {
      console.log('User quests fetched:', userQuests);
    }
  }, [fetched, userQuests]);

  const handleCompleteQuest = async (quest) => {
    try {
      const updatedQuest = await completeQuest(quest);
      console.log('Quest completed:', updatedQuest);
    } catch (error) {
      console.error('Error completing quest:', error);
    }
  };

  return (
    <div>
      <h1>User Quests</h1>
      {!fetched && <p>Loading...</p>}
      {fetched && userQuests.map((quest) => (
        <div key={quest.id}>
          <h3>{quest.name}</h3>
          <button onClick={() => handleCompleteQuest(quest)}>Complete Quest</button>
        </div>
      ))}
      <button onClick={() => refresh(true)}>Refresh Quests</button>
    </div>
  );
};

export default UserQuestsComponent;
Copy