Create a Custom Confirmation Component for Trip Deletion

[rishabhguptajs]

Description

The current implementation for deleting a trip on the /dashboard page uses the default JavaScript confirm dialog. We would like to replace this with a custom confirmation component for a better user experience. The new confirmation box should be visually appealing, reusable, and align with the overall theme of the application.

The custom confirmation component will:

• Display a message asking the user to confirm their action.
• Have two buttons: one to confirm and another to cancel.
• Be reusable so that it can be integrated into other parts of the application if needed.

Current Version:

Task

1. Create a custom confirmation component to replace the default confirm, in the 'components' directory.
2. Integrate this component into the /dashboard page for the trip deletion functionality.

Requirements

• The custom component should:
  • Be styled to match the overall design of the application.
  • Support dynamic messages (e.g., "Are you sure you want to delete this trip?").
  • Have clear, accessible buttons for "Confirm" and "Cancel."
• Integrate the component in a way that replaces the current confirm for the delete button on the /dashboard page (for reference, line number - 220 in app>dashboard>page.jsx).
• Ensure that the delete functionality works correctly after integration.

Notes

• Make the confirmation box reusable as a standalone component.
• Ensure responsiveness so it works across all device sizes.
• Test the component thoroughly for edge cases (e.g., canceling the action or confirming).

Submission

• Provide the custom confirmation component code in your PR.
• Ensure the /dashboard page uses the new component for trip deletion confirmation.
• Attach screenshots of the updated UI in your PR.

We are excited to see your contributions!

[gneo0]

hey @rishabhguptajs, I'm willing to help you solve this issue! Would you like to assign it to me?

[rishabhguptajs]

hey @gneo0 , thanks for the interest. yeah sure you can go ahead with it, i'll assign it to you, all the best!

[gneo0]

Hey @rishabhguptajs , I'm having an issue with running the project.
I have followed these steps:

• Forked repo on my account
• Created a new branch named following the rules of the Contribution guide
• Followed the steps on README.md file of how to run server and client
• Added the necessary .env variables on server and client as written on README.md file
• Created new Clerk auth project and pasted the important fields of env files
• Ran server and client again

The problem that i face is that initially the project is being ran for some seconds, meaning that i can see the homepage, but then I get some strange hydration errors. Here i provide you a screenshot of what I get on my console:

Please, kindly let me know if I'm missing something. We can always chat on linked in if this is your preffered method 😊

[rishabhguptajs]

Hi @gneo0 ,

Thanks for reaching out and for your effort in setting up the project! The hydration error you're facing during development might be related to a few common issues. Let’s troubleshoot this step by step:

Suggestions to Fix the Issue

1. Check the Node.js Version:
   Ensure that your Node.js version matches the version specified in the engines field of the package.json file or in the documentation. Mismatched versions often cause hydration or runtime issues.

2. Re-install the dependencies:
   rm -rf node_modules
rm package-lock.json
npm install

3. Clear Cache:
   npm run clean
npm start

Try these steps for now. Feel free to ignore minor hydration warnings during development unless they block specific functionality. If you prefer, we can connect on LinkedIn or discuss here further for troubleshooting.

[gneo0]

I will try them soon @rishabhguptajs . I will let you know for the results on Linked in!