New Download quest participants button

[Marchand-Nicolas]

Description 📹

Add a new button labeled "Download quest participants" in the "Preview" tab when editing a quest. The button should call the API endpoint /admin/quests/get_quest_participants?quest_id=<QuestId> with an Authorization header to fetch a JSON response containing quest participants and download this data as a JSON file. To avoid making the questDetails.tsx file too heavy, implement this button as a separate reusable component, and define the request in services/authService.ts for reusability.

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:

• Add a new service method in services/authService.ts to fetch quest participants.
• Create a new component DownloadQuestParticipantsButton.tsx to handle the "Download quest participants" functionality.
• Import the service method in DownloadQuestParticipantsButton.tsx.
• Update questDetails.tsx to include this new component in the "Preview" tab.

Update in services/authService.ts:

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")}`,
        },
      }
    );
    if (!response.ok) {
      throw new Error("Failed to fetch quest participants");
    }
    return await response.json();
  } catch (err) {
    console.log("Error while getting quest participants by quest id", err);
    throw err;
  }
};

export { getQuestParticipantsByQuestId };

Create DownloadQuestParticipantsButton.tsx:

import React from "react";
import Button from "@components/UI/button";
import { useNotification } from "@context/NotificationProvider";
import { getQuestParticipantsByQuestId } from "@services/authService";

type DownloadQuestParticipantsButtonProps = {
  questId: string;
};

const DownloadQuestParticipantsButton: React.FC<DownloadQuestParticipantsButtonProps> = ({ questId }) => {
  const { showNotification } = useNotification();

  const handleDownload = async () => {
    try {
      const data = await getQuestParticipantsByQuestId({ id: Number(questId) });

      const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `quest_${questId}_participants.json`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error("Error downloading quest participants:", error);
      showNotification("Failed to download quest participants.", "error");
    }
  };

  return (
    <Button onClick={handleDownload}>
      <p>Download quest participants</p>
    </Button>
  );
};

export default DownloadQuestParticipantsButton;

Update in questDetails.tsx:

import DownloadQuestParticipantsButton from "./DownloadQuestParticipantsButton";

// Inside the render function of AdminQuestDetails component:
<DownloadQuestParticipantsButton questId={questId} />

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: Add reusable component for downloading quest participants using authService"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[Supa-mega]

Could I grab this task?

[davedumto]

Hi I am Dumto, I am a frontend developer and I am a new contributor to Only Dust platform. Can I be assigned this issue?. ETA 1 day

[Emmykeyz101]

Can I tackle this one?

[abhirajprasad]

I am interested in taking up this issue :)

[Nanle100]

Can I start working on this?

[mimisavage]

I’d love to work on this task.

[SudiptaPaul-31]

Can I get this issue

[Birdmannn]

Hey, can I pick this up? The instructions on what to do, and the rules of carrying out this assignment is clear

[emmz3230]

hi
I am a front-end web developer with skills like HTML, CSS, JavaScript, React.js, and Next.js.
I have experience writing code for websites and web apps.
I will gladly love to use my skill to tackle the calling of the API from the endpoint within the timeframe (3 days) and close the PR as expected in the appropriate file in the project by using the PR ID and testing locally before pushing to production.
Thanks

[OWK50GA]

Hi, I'm Wilfrid Okorie, a Frontend Web Developer and I'll like to take this issue on.
My approach:
I would go through the services/authservices.ts, as well as the places where the functions are called, to see the current system of making requests to ensure their Reusability. I would then add what needs to be added to make this particular request. Then I would make the download button component, write the appropriate functions in it, and create a function that makes the request and downloads as shown above.

After this, I would render the component in the appropriate place and position.

I will make my first PR within 24 hours.
Please give me an opportunity to contribute to this project

[Villarley]

Hi @Marchand-Nicolas 👋,
I’m Santiago Villarreal Arley, a proactive and communicative developer with experience in both front-end and back-end Web3 development. I’m a proud member of Dojo Coding and have worked on various projects built on StarkNet and Stellar, where I actively contributed to creating scalable and efficient solutions. I also won a Web3 hackathon Buildathon for my work on BuildMyEvent, an open-source blockchain project focused on solving real-world challenges and integrating useful features.
Additionally, I’m a Gold Contributor with over 15 merged PRs, showcasing my commitment to open-source development and collaborative problem-solving.
To tackle this issue:

1. Add getQuestParticipantsByQuestId in services/authService.ts to fetch participants securely via the API.
2. Create DownloadQuestParticipantsButton.tsx as a reusable component for downloading quest participant data as a JSON file.
3. Integrate the button into the "Preview" tab in questDetails.tsx for easy access.
4. Test to ensure functionality works seamlessly and handles errors properly.
   Pls feel free to reach out via telegram! always happy to contribute!!!

[robertram]

Hi, I am from de Dojo Coding community and a new contributor to Only Dust. Im a web3 frontend developer and founder of a NFT ticketing platform. The way I would approach this feature is follow the proposed actions such as add the new service method in services/authService.ts, create the component and add it in the required parent component. I would follow the styles guidelines from the project to make sure it looks as expected. Then test the changes and run the build to make sure everything is working fine.

[blessingbytes]

i would love to take this up

[Emmanex01]

Mind if I try this one?
I'm Emmanuel Tochukwu, a Software Engineer with hands-on experience in Cairo, Typescript, Javascript, Tailwindcss. I’ve successfully created several projects using these technology. Given the opportunity, I’ll ensure my first PR is submitted within 72 hours.

[SYLVIANNORUKA]

Can I work on this, please?
I am a Front-end and smart contract developer. I am proficient in tailwind css, Next Js, Typescript, JavaScript, . I would love to contribute to this project.

[7-falseparfait]

I am a Front-end and Smart Contract Developer with expertise in Tailwind CSS, Next.js, TypeScript, and JavaScript. I am eager to contribute to this project and bring value with my skills.

[Adedayo-Data]

I'm excited to take on this task as my first contribution! Although I'm new to contributing, I'm a quick learner, and I'm eager to dive in and utilize my experience in solving this.

[Kachimercy1]

Is it okay if I take this?

[psychemist]

Hi. I am a fullstack web developer and a recent alumni of Web3Bridge, the largest and most sought after blockchain developer community in Africa. I am a new contributor to OnlyDust and would love to take on this task to increase my knowledge base and contribute to open source projects.

I would solve this task by:

1. Update services/authService.ts with the new getQuestParticipantsByQuestId function
2. Create a new, reusable DownloadQuestParticipantsButton.tsx. button component
3. Update questDetails.tsx with the new component and the questId prop
4. Run all tests to ensure full functionality

Thank you for the opportunity and I look forward to working with you

[0xdevcollins]

Can I be assigned this issue?

My Background
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 58 significant contributions spread over 17 OnlyDust projects.

[Benjtalkshow]

I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 49 contributions to over 17 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

I can handle this task.
ETA is 3days.

[lauchaves]

Hey! I'm Lau Chaves, I have been contributing to this project and would like to keep doing so I would like to contribute to this issue!
I have over 5 years of experience with JavaScript, ReactJS,React Native TypeScript, and Ruby. I’m now enthusiastic about web3 and eager to learn more! I’m also a member of Dojo Coding Costa Rica.
Id follow the proposed actions to resolve this issue, they're pretty straight forward to follow, Id make sure it works as expected and matches design

[abdegenius]

Can I be assigned to this?

[ncoquelet]

Hey,

I'm a dev with 20 years of XP, super comfy with TypeScript, React/Next, Dapps, Prisma, CI/CD. I ship fast and high-quality stuff. Worked with AFK and GoStarkMe, check my GitHub profile for more details (got several hackathon prizes).
Currently doing Basecamp 11.

Down to handle this task.

[3th-Enjay]

Can I take this issue?

[chigozzdevv]

Hello, good day :)
Could I grab this task?

[aurlic]

Hey I would love to be assigned to this issue and fix it. I'm a student at school 42 and I'm also currently learning Rust and Cairo (through Node Guardians). I think this would be a great issue to develop and perfect my skills and would be glad to be assigned. Thanks in advance !

[wheval]

May I be assigned to this?
I have experience working with APIs.
I would ensure to test that the endpoint is called successfully.
ETA is 2 days.

[ryzen-xp]

Hi, I am a proficient blockchain developer, expert in Cairo, Rust, Solidity, Aptos, and web development. I have contributed to various projects like Chainevents and Arkprojects.

I will implement the "Download Quest Participants" functionality as a reusable component, following best practices. I’ll also ensure smooth integration into the questDetails.tsx and provide appropriate error handling. Please assign this issue to me.

Thank you!

[BrunoAmbricca]

I would like to work on this issue

[tasneemtoolba]

Mind if I take this issue?

[Shalomnze]

I am Nze Shalom, a full stack developer with strong foundation in modern web development frameworks and technologies. My expertise includes: Nuxt.js, Next.js and Tailwind CSS with a bit of knowledge in Cairo. I am Experienced in crafting responsive, visually appealing designs using Tailwind CSS, ensuring consistency and efficiency in the development process. I would love to contribute to this project.
I would love to contribute to this project.
My approach towards this issue after forking the repo and creating the branch would be to first define the API request in authService.ts and verify if the api request is been sent. I would create the new reusable component DownloadParticipantsButton.tsx. After working on the component I would integrate this component to the "Preview" tab and style it as much as its meant to be. After testing the integration i would create a PR. ETA is 24hrs

[tamaraantonella]

I’d like to work on this.

[nottherealalanturing]

I'd like to take this issue.

[DuendexCR]

Mind if I try this one?

[Amarjeet325]

Can I take care of this issue?

[omsant02]

i would like to take this issue

My approach to solve this issue is to create a button in the preview tab, modifu authservice.ts and downloadquestparticipantsButton.tsx according to the instructions

ETA : 12 hrs

[Ekene001]

Hello I'm Ekene, a frontend and blockchain developer with proficiency in Rust/solidity, Typescript and react/next js, and I’m excited about the opportunity to collaborate and bring my skills to the table.

please can i be assigned to this task

[tosinmoses384]

May I handle this issue?

[vestor-dev]

hey sir i would love to work on this issue
i'm a blockchain dev and i would love to handle this issue
assign me and i'll get to work

[Jagadeeshftw]

Can I attempt this issue?

[1nonlypiece]

Would love to tackle this!

[RareMmemshima]

Can I tackle this one?
I'm a frontend and smart contract developer. I have a solid background with react, tailwind, nextjs, javascript, typescript, cairo ETC.
I will implement this task as expected.
I'm new to onlydust and i look forward to contributing to this project.

[Michaelkingsdev]

Can I take this issue?

[ShantelPeters]

Can I take this from here?

[suhas-sensei]

I'd like to take this issue. "I'll implement a reusable download button component for quest participants with API integration through authService.
Having experience with React components and API services, I'll ensure proper authorization handling and file download functionality while maintaining clean code structure.

[Meet2054]

i want to tackle this issue, interested to work

[dbillion]

Can I be assigned to this?

[damonxue]

Is it okay if I tackle this?

[portableDD]

Hi, I am Emmanuel Dorcas, a software developer with React js and Typescript.
my estimated timeframe is 1 day:

how I will tackle this:

1. I will fork the repository and create a new branch name fix-New Download quest participants button #979
2. create a reusable components called DownloadQuestParticipantsButton.tsx and do all functionality.
   3, I will create the service method in the services/authService.ts and update the DownloadQuestParticipantsButton.tsx
3. I will update the questDetails.tsx at the "Preview" tab.
4. I test that all is working
5. then I push to the new branch.
6. then I create a pr giving it a description of Close New Download quest participants button #979.
7. then I change the label to 'ready for review"

[DioChuks]

I’d love to work on this task.

[FrankiePower]

Hi. I am a fullstack web developer and a recent alumni of Web3Bridge, the largest and most sought after blockchain developer community in Africa. I am a new contributor to OnlyDust and would love to take on this task to increase my knowledge base and contribute to open source projects.

I would solve this task by:

Update services/authService.ts with the new getQuestParticipantsByQuestId function
Create a new, reusable DownloadQuestParticipantsButton.tsx. button component
Update questDetails.tsx with the new component and the questId prop
Run all tests to ensure full functionality
Thank you for the opportunity and I look forward to working with you

[3th-Enjay]

i would like to know if i would be granted the opportunity to implement this change

[olisaagbafor]

I’d like to resolve this.