feat: Extract useInfiniteQueries / useQuery to custom hook

[gershon]

Describe the feature you'd like to request

Refactor react queries with custom hooks.

Describe the solution you'd like to see

Use custom hook like https://github.com/ArkProjectNFTs/ark-market/blob/main/apps/arkmarket/src/hooks/useCollection.tsx .

Additional information

No response

[ShantelPeters]

Hello @gershon please i will like to work on this by tomorrow when the OD hack begins

[jorgezerpa]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi!! I'm a fullstack dev focused on frontend development, with 4 years of experience building web and mobile apps and a couple months into web3 development. I have build some next.js apps in the past of course using react query.

How I plan on tackling this issue

I will look for all "not-hooked" implementations using vscode search functionality (example in image)

Then, I will start creating the corresponding hooks into apps/arkmarket/src/hooks/ folder

Of course I will pay special attention to make code as reusable as possible, for example, the queries on "mobile-global-search.tsx" and "global-search.tsx" looks almost identical, so I can create a single hook "useSearchCollection" that work for both implementations.

This is a quick summary of the hooks I'll be implementing, based on useQuery usage:

For useQuery implementation:

• useCollection (I saw it's already into a hook on the issue description example)
• useCollectionTraits
• useTokenMarketData
• useSearchCollection
• useSystemStatus

And for useInfiniteQuery:

• useCollectionActivity
• useTokenActivity
• useTokenOffers
• useWalletActivity
• useWalletCollections
• useWalletOffers
• useWalletTokens

And any other if I forgot someone

Stimated time to complete the issue -> less than 1-2 days, this should be ready for weekend or even before.

🚀I look forward to contribute, I'm attentive🚀

[gregemax]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a solid background in TypeScript and React development, with experience in creating custom hooks for efficient state management and data fetching. This expertise will enable me to effectively refactor the existing queries into reusable hooks, enhancing the project's maintainability.

How I plan on tackling this issue

I would start by analyzing the current implementation of useInfiniteQueries and useQuery to understand their functionalities. Then, I’d create custom hooks similar to the provided example, ensuring they handle the necessary parameters and return values. I would test the hooks thoroughly to confirm they integrate seamlessly with the existing components

[GoSTEAN]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in React development, focusing on state management and custom hooks. I am experienced in optimizing data fetching and managing server state using React Query.

How I plan on tackling this issue

Review Existing Queries: Analyze the current React queries in the codebase to identify areas for refactoring.
Design Custom Hooks: Create custom hooks similar to useCollection.tsx to encapsulate data fetching logic and improve reusability.
Implement Hooks: Replace existing queries with the new custom hooks across components.
Test Functionality: Ensure that the new hooks work as expected and maintain the same functionality.
Document Changes: Update documentation to reflect the new custom hooks and their usage.

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a blockchain developer with experience in html, cario, typescript, solidity, react, css and javascript. please assign this issue to me . i am ready to work.

How I plan on tackling this issue

To approach this issue i will carry out the following:

1. Review Current Implementation: Analyze the existing React queries in the project to identify areas for refactoring.

2. Create Custom Hooks: Implement custom hooks based on the provided example, such as useCollection, to encapsulate logic and improve reusability.

3. ntegrate Custom Hooks: Replace existing React queries with the new custom hooks throughout the application.

4. Test Functionality: Ensure that all features function correctly after the refactor and that performance is optimized.

5. Update Documentation: Document the new hooks and their usage for future reference.

[deeseeker]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Qudus Adeyemi, a front-end developer with 2 years of experience in React, TypeScript, and JavaScript, specializing in building pixel-perfect, interactive user interfaces. During the previous OD Hackathon, I contributed by enhancing the Starknet React documentation and implementing the useWatchAssets hook to improve wallet tracking. I also have strong experience with React Query and have successfully applied it in various projects to handle complex use cases.

I’m genuinely excited about this opportunity to deepen my knowledge of Web3 technologies and to contribute to your project. I believe my experience, enthusiasm for learning, and problem-solving skills would make me a strong fit for this task.

I estimate the task will take around 2-3 days to complete and I would love the chance to collaborate with the team. Thank you for considering my application!

How I plan on tackling this issue

1. Clone the project to my local machine.
2. Set up the project by following the provided documentation.
3. Review the existing codebase to understand how current hooks are implemented, particularly focusing on the useCollection hook as a guide.
4. Plan the extraction process and identify all necessary queries to be included in custom hooks.
5. Implement the custom hook.
6. Thoroughly test the hook to ensure it functions as expected.
7. Document the hook for future reference and ease of use.

[Luluameh]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience with React, TypeScript, and React Query. I’ve worked on refactoring components and extracting logic into reusable custom hooks for better code maintainability.

How I plan on tackling this issue

I’d start by analyzing the current implementation of useInfiniteQueries and useQuery. I’d then refactor the logic into a custom hook, ensuring it’s reusable and follows best practices, similar to the approach used in the provided example.

[jorgezerpa]

Hi! @gershon is this issue still available?

[deeseeker]

@gershon Hi, can I pick this up?

[YohanTz]

@jorgezerpa I just assigned you 👍🏽 Please also take into consideration useSuspenseQuery and useSuspenseInfiniteQuery 🙂

[jorgezerpa]

@YohanTz Thanks🙂 I got it! I'll start working

[jorgezerpa]

Hello @YohanTz

should I have to replace the queries with the created hooks (example: create useCollection hook and then use it where is appropriate) or just create the hooks without implementing them?

[jorgezerpa]

Hello @YohanTz

should I have to replace the queries with the created hooks (example: create useCollection hook and then use it where is appropriate) or just create the hooks without implementing them?

Hi @YohanTz @gershon I created all these hooks:

useQuery:

• (was already implemented) useCollection
• useCollectionTraits
• (was already implemented) useTokenMarketData
• useSearchCollection
• useSystemStatus
• (was already implemented) useBalance
• (was already implemented) usePortfolioStats
• (was already implemented) usePrices

useInfiniteQuery:

• useCollectionActivity
• useTokenActivity
• useTokenOffers
• useWalletActivity
• useWalletCollections
• useWalletOffers
• useWalletTokens

useSuspenseQuery:

• useCollectionTraits --> renamed to useCollectionTraitsSuspense (there are another hook called useCollectionTraits but with useQuery instead of useSuspenseQuery)

useSuspenseInfiniteQuery:

• useCollectionTokens

Please confirm if I have to implement them where is needed. If not, I think this is ready for a PR, thanks🙂

[gershon]

Hi @jorgezerpa, looks good, let's go for a PR 🚀 .

[jorgezerpa]

PR done! I'm attentive for any correction🙂