From 5db1eb5498abbcb601d191c66e624149e73326cb Mon Sep 17 00:00:00 2001
From: Aguwa Blessing <150056008+blessingbytes@users.noreply.github.com>
Date: Sun, 15 Dec 2024 21:26:07 +0000
Subject: [PATCH 1/3] Fix: Add reusable component for downloading quest
 participants using authService

---
 .../admin/DownloadQuestParticipantsButton.tsx | 58 +++++++++++++++++++
 components/admin/questDetails.tsx             |  7 +++
 services/authService.ts                       | 20 +++++++
 3 files changed, 85 insertions(+)
 create mode 100644 components/admin/DownloadQuestParticipantsButton.tsx

diff --git a/components/admin/DownloadQuestParticipantsButton.tsx b/components/admin/DownloadQuestParticipantsButton.tsx
new file mode 100644
index 00000000..564cd07d
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/components/admin/questDetails.tsx b/components/admin/questDetails.tsx
index be4de2e2..618bc7a3 100644
--- a/components/admin/questDetails.tsx
+++ b/components/admin/questDetails.tsx
@@ -22,6 +22,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;
@@ -128,6 +129,12 @@ const AdminQuestDetails: FunctionComponent<QuestDetailsProps> = ({
         })}
       />
 
+      <div className="w-full flex justify-center my-6">
+        <div className="w-full sm:w-fit">
+          <DownloadQuestParticipantsButton questId={quest.id} />
+        </div>
+      </div>
+
       <div className={styles.descriptionContainer}>
         {quest.name === "loading" ? (
           <Skeleton
diff --git a/services/authService.ts b/services/authService.ts
index c4bbe7e0..919be557 100644
--- a/services/authService.ts
+++ b/services/authService.ts
@@ -592,6 +592,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,
@@ -628,4 +647,5 @@ export const AdminService = {
   createNftUri,
   updateNftUri,
   addUser,
+  getQuestParticipantsByQuestId,
 };

From 8be9ffe06305166e4a33f84e43ac91af773288c8 Mon Sep 17 00:00:00 2001
From: Aguwa Blessing <150056008+blessingbytes@users.noreply.github.com>
Date: Tue, 17 Dec 2024 06:40:05 +0000
Subject: [PATCH 2/3] fix: Moves DownloadQuestParticipants button next to
 DownloadQuestUsers button

---
 components/admin/questDetails.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/admin/questDetails.tsx b/components/admin/questDetails.tsx
index 57386a76..1da90f4f 100644
--- a/components/admin/questDetails.tsx
+++ b/components/admin/questDetails.tsx
@@ -132,12 +132,6 @@ const AdminQuestDetails: FunctionComponent<QuestDetailsProps> = ({
         })}
       />
 
-      <div className="w-full flex justify-center my-6">
-        <div className="w-full sm:w-fit">
-          <DownloadQuestParticipantsButton questId={quest.id} />
-        </div>
-      </div>
-
       <div className={styles.descriptionContainer}>
         {quest.name === "loading" ? (
           <Skeleton
@@ -245,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>
-
     </>
   );
 };

From 430c2d55372932d7c315189f4104ec28a68606b0 Mon Sep 17 00:00:00 2001
From: Aguwa Blessing <150056008+blessingbytes@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:01:01 +0000
Subject: [PATCH 3/3] fix: add flex-wrap to buttons container className for
 responsive layout

---
 components/admin/questDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/admin/questDetails.tsx b/components/admin/questDetails.tsx
index 1da90f4f..985dc4a4 100644
--- a/components/admin/questDetails.tsx
+++ b/components/admin/questDetails.tsx
@@ -227,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>