New delete question button

Marchand-Nicolas commented 3 days ago

Description

In the admin dashboard, when creating or editing a quest, we can set tasks. For the quiz one, we can obviously add questions for the quiz, but currently, if we add too much, we can't delete them.

PROPOSED TODO

[ ] Add a "delete question" button.

[ ] Call "/admin/tasks/quiz/question/delete" (as we do for "/admin/tasks/quiz/question/update" for instance) providing the question_id in the body. (This route doesn't exist yet, so it's likely to fail, but another issue is ongoing to add it to the API).
[ ] Make sure to refresh questions after the deletion.

sajalbnl commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have 2 years of experience as a front-end developer, with expertise in JavaScript, React.js, CSS, and HTML. I've built full-stack projects like Crypto Bank, handling both front-end and back-end development. My skills in creating responsive, dynamic interfaces make me well-equipped to contribute effectively to your project. @Marchand-Nicolas can i work on this

dznes commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a typescript developer for 2 years now and worked in different projects, mostly in e-commerce websites. I have good experience with NodeJS servers and NextJS projects. This year been into a Starknet HackerHouse in Brussels and started my new project called Metronome Finance.

How I plan on tackling this issue

Using the button component from the components/UI and ajusting the "onClick" event to push the "DELETE" method into the oriented route in the issue description. In the end of the handleDeleteQuestQuestion() function i would add a function to refetch the questions of the quest.

JosueBrenes commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Josué Brenes and I'll be working on issue. I'm Dojo Coding member.

I estimate this will take 4 days to complete.

How I plan on tackling this issue

Add a "delete question" button in the UI:

Next to each question in the quiz form, add a button with a trash icon or a "Delete" text. This button should trigger an action to delete the specific question.

Example button in HTML/JSX:

<button 
  className="delete-button" 
  onClick={() => handleDeleteQuestion(question_id)}>
  Delete Question
</button>

Implement the handleDeleteQuestion function:

This function should make an HTTP request to the backend to delete the selected question. The request should target the route /admin/tasks/quiz/question/delete (which will be implemented in another issue) and pass the question_id in the request body.

Example function in JavaScript/TypeScript:

const handleDeleteQuestion = async (question_id: string) => {
  try {
    const response = await fetch('/admin/tasks/quiz/question/delete', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ question_id }),
    });

    if (!response.ok) {
      throw new Error('Failed to delete question');
    }

    refreshQuestions();
  } catch (error) {
    console.error('Error deleting question:', error);
  }
};

Refresh the questions:

After a successful deletion, call a function like refreshQuestions to reload the list of quiz questions. Example:

const refreshQuestions = async () => {
  const response = await fetch('/admin/tasks/quiz/questions');
  const questions = await response.json();
  setQuestions(questions);
};

Add the /admin/tasks/quiz/question/delete route to the backend:

This part will be handled in another issue where the API endpoint for deleting questions will be implemented. Ensure that functionality is ready to allow question deletions to work properly.

KevinLatino commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a deep passion for Web3 and I am currently working as a frontend developer intern at a Web2 company, focusing on Next.js. Additionally, I am an active member of Dojo Coding, a prominent Web3 community in LATAM, which has given me great exposure to decentralized technologies.

Recently, I have been working on a project for Base LATAM's Buildathon, where I am gaining hands-on experience in building decentralized applications. I am eager to continue growing and contributing, and see this as a fantastic opportunity to further develop my skills and make a significant impact.

This is my first OD Hack, so I will appreciate it if you give me the chance to contribute to this amazing project.

How I plan on tackling this issue

To effectively resolve this issue, I would start by adding a "delete question" button to the admin dashboard where tasks are managed for the quiz. This button will be strategically placed next to each quiz question, allowing users to easily remove any unwanted questions.

Upon clicking the button, a request will be sent to the /admin/tasks/quiz/question/delete endpoint, providing the question_id in the body of the request. While this specific route is currently not implemented, I understand that another issue is being handled to add it to the API. Therefore, my solution will be built to seamlessly integrate with this route once it's available, ensuring smooth functionality in the future.

In addition to the deletion action, I will implement logic to refresh the list of questions automatically after a question is deleted, so that users can immediately see the updated list without having to refresh the page manually. This will enhance the overall user experience and ensure the interface remains responsive and up-to-date.

By following this approach, I aim to provide a reliable and efficient solution to improve the quiz creation and editing process on the admin dashboard. @Marchand-Nicolas, I would love the opportunity to contribute to this amazing project by working on this issue. Please give me the oportunnity opportunity

akintewe commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm qualified to handle this problem as an experienced JavaScript and TypeScript developer with a degree in computer science. My proficiency with contemporary frontend frameworks and solid background in web development make me a perfect choice to implement the new delete question button in the admin dashboard.

How I plan on tackling this issue

In order to tackle this issue, I would begin by including a delete button in the quiz creation/editing interface for every question. Subsequently, I would incorporate the capability to use the "/admin/tasks/quiz/question/delete" endpoint by providing the question_id in the body of the request. I would make sure the questions list is updated to appropriately reflect the changes after the deletion is finished.

gadyrcdz commented 3 days ago

Hello, @Marchand-Nicolas, if this issue is still available I'd like to take it.

Samuel1-ona commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a fullstack developer with years of experience. Please, I would like to hop on this as this would be my first time contributing to this project.

I promise to execute the task seamlessly

How I plan on tackling this issue

Follow the ToDos and improve on them to achieve desired changes .Ensure the button works well

GradleD commented 3 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Full Stack Web Developer with over 4+ years of experience

How I plan on tackling this issue

To implement a "delete question" button in your React component, follow these steps: Step 1: Add the Delete Button In the QuizStep component, add a button for deleting a question within the mapping of questions. This button will trigger a function to handle the deletion. javascript

Step 2: Implement the handleDeleteQuestion Function Create a new function called handleDeleteQuestion that will send a DELETE request to your API endpoint and refresh the questions afterward. javascript const handleDeleteQuestion = useCallback((questionIndex) => { const questionId = steps[index].data.questions[questionIndex].id; // Assuming each question has an id

fetch('/admin/tasks/quiz/question/delete', { method: 'DELETE', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ questionid: questionId }), }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(() => { // Refresh questions after deletion const updatedSteps = steps.map((step, i) => { if (i === index && step.type === "Quiz") { const updatedQuestions = step.data.questions.filter((, qIndex) => qIndex !== questionIndex); return { ...step, data: { ...step.data, questions: updatedQuestions, }, }; } return step; }); setSteps(updatedSteps); }) .catch(error => console.error('Error deleting question:', error)); }, [steps]);

Step 3: Update the Component Structure Ensure that your component structure allows for the new delete button to be rendered correctly. The complete section for rendering each question should now include the delete functionality. Example Code Snippet Here's how the relevant part of your QuizStep component might look: javascript {step.data.questions?.map((eachQuestion, questionIndex) => ( <InputCard key={"questionCategory-" + questionIndex}> {/ Existing question input fields /}

<div className="flex flex-col gap-1">
  <button onClick={() => handleDeleteQuestion(questionIndex)}>Delete Question</button>
</div>

))}

Villarley commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Santiago Villarreal Arley, a passionate software developer with a growing interest in Web3 technologies. Over the past few months, I've had the opportunity to work on innovative projects, such as BuildMyEvent, an open-source initiative that leverages blockchain and decentralized systems. I thrive on problem-solving and enjoy the challenge of integrating cutting-edge solutions into real-world applications. My goal is to contribute to the Web3 ecosystem by staying ahead of emerging trends, learning continuously, and developing projects that push the boundaries of decentralized technologies.

How I plan on tackling this issue

To address this issue, here’s how I would propose implementing the solution:

Add a "delete question" button next to each question on the quiz creation or editing screen in the admin dashboard.

On click, trigger an API call to the route "/admin/tasks/quiz/question/delete" (similar to how we handle updates using "/admin/tasks/quiz/question/update"). The body of the request will include the question_id for the specific question we want to delete.

Handle the API call failure gracefully since the endpoint isn’t ready yet, but it’s being worked on. In the meantime, I would add error handling to ensure users know something went wrong.

After successful deletion, I would trigger a refresh to ensure the list of questions is updated without the deleted question, giving the user immediate feedback.

I look forward to contributing by implementing this feature!

emmz3230 commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hi I am a front-end developer specializing in responsive web design, device-compatible email templates, 3D web integration, and technical writing on programming topics. I also contribute to open-source documentation and help build documentation sites.

contributing got me first github badge

How I plan on tackling this issue

step to to do the above task

i will make sure to read the code and understand it codebase first
will embark on the task by deleting and using my react routing skill to fix the routing issue of the page of not created
ask question in the discussion and group for proper adjustment of the task
ask for review from maintainer

ryzen-xp commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Blockchain developer experienced in JavaScript and TypeScript.

How I plan on tackling this issue

[1]=>Implement a "delete question" button in the admin dashboard for quiz tasks. [2]=>Create a function to call the /admin/tasks/quiz/question/delete API endpoint with the question_id in the body. [3]=>Ensure the questions list refreshes after a successful deletion. [4]=>Test the functionality to confirm that questions can be deleted without issues. [5]=>Sir/Mam please assign me this issue .

meetjn commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a blockchain developer intern at Quranium, skilled in Javascript and Typescript. And have been contributing to open-source projects since the start of this year.

How I plan on tackling this issue

I would approach this problem by going to the desired source code file "/admin/tasks/quiz/question/" and creating a "delete question" button with a parameter (question_id) adding the logic for removing a quest. How does this sound?

Josue19-08 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Josué. I'm part of the Dojo Coding community and have worked on several projects, including some in Unity. I have experience with C#, .NET, Java, JavaScript, Angular, and Node.js. I love contributing to open-source projects, whether it's fixing bugs, adding new features, or improving documentation.

How I plan on tackling this issue

I'll add a "delete question" button to the quiz section. When clicked, it will send a request to delete the question. After that, I'll refresh the question list to show the updated version.

joeperpetua commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

3+ years experience doing full stack dev :)

martinvibes commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @ i'm an experienced frontend developer and a blockchain developer i would love to work on this issue Pleasee kindly assign :)

chibokaxavier commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Chiboka Xavier, a full-stack developer with over 4 years of experience building applications that not only work well but feels great to use. I’m passionate about turning creative UI/UX designs into real, responsive user interfaces with tools like Next.js, React, and Tailwind CSS. On the backend, I use Express and MongoDB to make sure everything runs smoothly behind the scenes. I love exploring new technologies and finding ways to create seamless, enjoyable experiences for users, blending both the frontend and backend to bring ideas to life.

How I plan on tackling this issue

To add a "delete question" button, I’ll start by putting the button in the UI where the questions are being listed. When someone clicks it, I’ll set up an event handler to call the /admin/tasks/quiz/question/delete endpoint and send the question_id in the request body. I know this route doesn’t exist yet, as to that it might fail, so i on my own end I’ll make sure to follow up with the team to get it added to the API. After a deletion attempt, I’ll refresh the questions list to make sure that the UI is up to date, so that users can see the changes immediately.

SudiptaPaul-31 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello! I’m Sudipta Paul, and I currently have 1.5 years of experience in the field of blockchain and web development. I'm eager to contribute to this issue by implementing a "delete question" button in the admin dashboard.

How I plan on tackling this issue

My approach:
I will first examine the current code for creating and editing quiz questions to understand how questions are being managed in the admin dashboard. I will create a new button labeled "Delete Question" next to each question in the quiz management interface I will define the onDelete function that will handle the deletion process. This function will make an API call to the new endpoint /admin/tasks/quiz/question/delete, sending the question_id in the request body. javascript After a successful deletion, I will ensure that the questions are refreshed to reflect the latest state of the quiz. This may involve calling an existing function that fetches the updated list of questions.

ETA - 1 Day

fricoben commented 1 day ago

Assigned @JosueBrenes

lfglabs-dev / starknet.quest