Merge download components

[Marchand-Nicolas]

Description 📹

Merge components/quests/downloadQuestUsersButton.tsx, components/admin/DownloadBoostWinnersButton.tsx, and components/admin/DownloadQuestParticipantsButton.tsx into one single reusable component.

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:

   • Create a new reusable component DownloadButton.tsx in a common or shared directory (e.g., components/shared/).
   • Implement a prop-based structure to allow flexibility for different use cases (e.g., button label, API endpoint, query parameters).

     import React from "react";
     
     interface DownloadButtonProps {
       label: string;
       endpoint: string;
       queryParams?: Record<string, string | number>;
     }
     
     const DownloadButton: React.FC<DownloadButtonProps> = ({ label, endpoint, queryParams }) => {
       const handleDownload = async () => {
         const query = queryParams
           ? "?" +
             new URLSearchParams(queryParams as Record<string, string>).toString()
           : "";
         const url = `${endpoint}${query}`;
         const response = await fetch(url);
         const blob = await response.blob();
         const link = document.createElement("a");
         link.href = URL.createObjectURL(blob);
         link.download = `${label}.csv`;
         link.click();
       };
     
       return <button onClick={handleDownload}>{label}</button>;
     };
     
     export default DownloadButton;

   • Replace DownloadQuestUsersButton, DownloadBoostWinnersButton, and DownloadQuestParticipantsButton with the new reusable DownloadButton component.
     • Update the props as needed to maintain functionality for each use case.
   • Remove the old button components (downloadQuestUsersButton.tsx, DownloadBoostWinnersButton.tsx, DownloadQuestParticipantsButton.tsx).

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: Merge download buttons into reusable DownloadButton component"

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.

[No-bodyq]

May I take this issue on?

[mimisavage]

Could I grab this task?

[Agbeleshe]

I’d love to work on this task.
I will love to make this my first contribution to the starknet Quest

[Michaelkingsdev]

@Marchand-Nicolas
Let me handle this

[ryzen-xp]

Is this issue still available?

[wheval]

Hi @Marchand-Nicolas, I'm an experienced Frontend Developer.
I would love to get this done.

I would implement a new reusable DownloadButton component in the shared directory that takes a prop and returns the needed variant based on the prop.
I would also check for imports containing the previous variants of the download button and replace them by passing the correct prop.
I would test that it works properly.

ETA is 1 day.

[SudiptaPaul-31]

I can solve this issue

My name is Sudipta Paul, a fullstack and blockchain developer having experience of working in previous session of ODHack my profile :(https://app.onlydust.com/u/SudiptaPaul-31)

[VyuduInc]

Can I be assigned to this?

[aidenwong812]

Can I jump on this task?

[aurlic]

Can I handle this task?

[Thibrac]

Is it okay if I take this?

[emarc99]

Can I tackle this one?

[thedevtask]

I hope to get this done in only a few hours, if you assign it to me.