Merge pull request #989 from blessingbytes/fix-979

Fix: Add reusable component for downloading quest participants using …

components/admin/DownloadQuestParticipantsButton.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from '@components/UI/button';
+import { useNotification } from '@context/NotificationProvider';
+import { AdminService } from '@services/authService';
+
+interface DownloadQuestParticipantsButtonProps {
+  questId: string | number;
+}
+
+const DownloadQuestParticipantsButton: React.FC<DownloadQuestParticipantsButtonProps> = ({ questId }) => {
+  const { showNotification } = useNotification();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleDownload = async () => {
+    setIsLoading(true);
+    try {
+      const data = await AdminService.getQuestParticipantsByQuestId({ id: Number(questId) });
+
+      const jsonString = JSON.stringify(data, null, 2);
+      const blob = new Blob([jsonString], { type: 'application/json' });
+
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `quest_${questId}_participants_${new Date().toISOString().split('T')[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      showNotification('Quest participants downloaded successfully', 'success');
+    } catch (error) {
+      console.error('Error downloading quest participants:', error);
+      showNotification(
+        'Failed to download quest participants',
+        'error'
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-full flex justify-center">
+      <div className="w-full sm:w-fit">
+        <Button 
+          onClick={handleDownload}
+          disabled={isLoading}
+        >
+          <p>{isLoading ? 'Downloading...' : 'Download quest participants'}</p>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DownloadQuestParticipantsButton;

components/admin/questDetails.tsx

@@ -23,6 +23,7 @@ import { AdminService } from "@services/authService";
 import { useNotification } from "@context/NotificationProvider";
 import Button from "@components/UI/button";
 import { useRouter } from "next/navigation";
+import DownloadQuestParticipantsButton from './DownloadQuestParticipantsButton';
 
 type QuestDetailsProps = {
   quest: QuestDocument;
@@ -226,7 +227,7 @@ const AdminQuestDetails: FunctionComponent<QuestDetailsProps> = ({
         )}
       </div>
 
-      <div className="w-full flex justify-center gap-8">
+      <div className="w-full flex justify-center gap-8 flex-wrap">
         <div className="w-fit">
           <Button onClick={handleNavigate}>
             <p>Done</p>
@@ -238,12 +239,16 @@ const AdminQuestDetails: FunctionComponent<QuestDetailsProps> = ({
           </Button>
         </div>
         {isEdit && (
-          <div className="w-fit">
-            <DownloadQuestUsersButton questId={questId} />
-          </div>
+          <>
+            <div className="w-fit">
+              <DownloadQuestUsersButton questId={questId} />
+            </div>
+            <div className="w-fit">
+              <DownloadQuestParticipantsButton questId={quest.id} />
+            </div>
+          </>
         )}
       </div>
-
     </>
   );
 };

services/authService.ts

@@ -614,6 +614,25 @@ const addUser = async (params: AddUser) => {
     console.log("Error while adding user", err);
   }
 };
+
+const getQuestParticipantsByQuestId = async (params: { id: number }) => {
+  try {
+    const response = await fetch(
+      `${baseurl}/admin/quests/get_quest_participants?quest_id=${params.id}`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      }
+    );
+    return await response.json();
+  } catch (err) {
+    console.log("Error while getting quest participants", err);
+    throw err;
+  }
+}; 
+
 export const AdminService = {
   login,
   getQuests,
@@ -651,4 +670,5 @@ export const AdminService = {
   createNftUri,
   updateNftUri,
   addUser,
+  getQuestParticipantsByQuestId,
 };